/* ===== SISTEMA ACADÉMICO PROFESIONAL v3.0.1 - DESIGN TOKENS CENTRALIZADOS ===== */
/* Norma única, estricta y global para identidad visual premium, académica y tecnológica */

/* ===== DESIGN TOKENS - SISTEMA DE VARIABLES CENTRALIZADAS ===== */
:root {
  /* ===== SISTEMA TIPOGRÁFICO UNIFICADO ===== */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: var(--font-family-primary);
  
  /* Escala tipográfica académica profesional */
  --font-size-xs: 0.75rem;     /* 12px - Metadatos */
  --font-size-sm: 0.875rem;    /* 14px - Texto secundario */
  --font-size-base: 1rem;      /* 16px - Texto base */
  --font-size-lg: 1.125rem;    /* 18px - Texto destacado */
  --font-size-xl: 1.25rem;     /* 20px - Subtítulos */
  --font-size-2xl: 1.5rem;     /* 24px - Títulos sección */
  --font-size-3xl: 1.875rem;   /* 30px - Títulos principales */
  --font-size-4xl: 2.25rem;    /* 36px - Hero títulos */
  --font-size-5xl: 3rem;       /* 48px - Display grandes */
  
  /* Peso tipográfico jerárquico estricto */
  --font-weight-light: 300;      /* Textos descriptivos */
  --font-weight-normal: 400;     /* Texto base */
  --font-weight-medium: 500;     /* Texto destacado */
  --font-weight-semibold: 600;   /* Subtítulos */
  --font-weight-bold: 700;       /* Títulos, botones primarios */
  --font-weight-extrabold: 800;  /* Hero, display */
  
  /* Interlineado académico optimizado */
  --line-height-tight: 1.25;     /* Títulos */
  --line-height-snug: 1.375;     /* Subtítulos */
  --line-height-normal: 1.5;     /* Texto base */
  --line-height-relaxed: 1.625;  /* Textos largos */
  --line-height-loose: 2;        /* Espaciado especial */
  
  /* ===== SISTEMA DE ESPACIADO ACADÉMICO ===== */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  
  /* ===== SISTEMA DE BORDER RADIUS UNIFORME ===== */
  --radius-none: 0;
  --radius-sm: 0.125rem;    /* 2px */
  --radius-base: 0.25rem;   /* 4px - ESTÁNDAR para botones */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-full: 9999px;   /* Círculos completos */
  
  /* ===== TRANSICIONES PROFESIONALES ===== */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow: 350ms ease-out;
  --transition-theme: 200ms ease-out;
  --easing-natural: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== PALETA DE COLORES ACADÉMICA PREMIUM ===== */
  /* Color institucional principal - azul petróleo sobrio y profesional */
  --color-institutional: #334155;      /* Slate-700: Base institucional */
  --color-institutional-dark: #1e293b; /* Slate-800: Variante oscura */
  --color-institutional-light: #475569;/* Slate-600: Variante clara */
  
  /* ===== SISTEMA DE BOTONES - CONTRASTE AAA GARANTIZADO ===== */
  /* Botón Primario - Máximo contraste institucional */
  --btn-primary-bg: #0f172a;           /* Slate-900: Máximo contraste */
  --btn-primary-bg-hover: #020617;     /* Slate-950: Hover profundo */
  --btn-primary-bg-active: #0f172a;    /* Vuelve al estado normal */
  --btn-primary-bg-disabled: #94a3b8;  /* Slate-400: Deshabilitado */
  --btn-primary-text: #ffffff;         /* Blanco puro - Contraste AAA */
  --btn-primary-text-disabled: #f1f5f9; /* Slate-100: Deshabilitado */
  
  /* Botón Secundario - Elegante con borde institucional */
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: #334155;   /* Color institucional */
  --btn-secondary-bg-active: #1e293b;  /* Más oscuro */
  --btn-secondary-bg-disabled: transparent;
  --btn-secondary-border: #334155;     /* Color institucional */
  --btn-secondary-border-hover: #334155;
  --btn-secondary-border-disabled: #cbd5e0; /* Slate-300 */
  --btn-secondary-text: #334155;       /* Color institucional */
  --btn-secondary-text-hover: #ffffff; /* Blanco en hover */
  --btn-secondary-text-disabled: #94a3b8; /* Slate-400 */
  
  /* ===== TEMA CLARO - MODO BASE ===== */
  --bg-primary: #ffffff;            /* Fondo principal */
  --bg-secondary: #f8fafc;          /* Slate-50: Fondo secundario */
  --bg-tertiary: #f1f5f9;           /* Slate-100: Fondo terciario */
  --bg-quaternary: #e2e8f0;         /* Slate-200: Fondo elementos */
  
  --text-primary: #0f172a;          /* Slate-900: Texto principal */
  --text-secondary: #334155;        /* Slate-700: Texto secundario */
  --text-tertiary: #64748b;         /* Slate-500: Texto terciario */
  --text-quaternary: #94a3b8;       /* Slate-400: Texto deshabilitado */
  
  --border-primary: #e2e8f0;        /* Slate-200: Bordes principales */
  --border-secondary: #cbd5e0;      /* Slate-300: Bordes secundarios */
  --border-tertiary: #94a3b8;       /* Slate-400: Bordes destacados */
  
  /* ===== SISTEMA DE SOMBRAS ACADÉMICAS ===== */
  --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-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Estados interactivos profesionales */
  --color-hover-bg: rgba(51, 65, 85, 0.04);     /* Hover sutil */
  --color-focus-ring: rgba(51, 65, 85, 0.2);    /* Focus académico */
  --color-active-bg: rgba(51, 65, 85, 0.08);    /* Estado activo */
  
  /* ===== ESTADOS DE FORMULARIOS ===== */
  --input-bg: #ffffff;
  --input-border: #d1d5db;           /* Gray-300 */
  --input-border-hover: #9ca3af;     /* Gray-400 */
  --input-border-focus: #334155;     /* Color institucional */
  --input-text: #111827;             /* Gray-900 */
  --input-placeholder: #6b7280;      /* Gray-500 */
  --input-shadow-focus: 0 0 0 3px rgba(51, 65, 85, 0.1);
  
  /* ===== ENLACES Y CTAs ===== */
  --link-color: #334155;             /* Color institucional */
  --link-color-hover: #1e293b;       /* Hover más oscuro */
  --link-underline: rgba(51, 65, 85, 0.3);
  --link-underline-hover: rgba(51, 65, 85, 1);
}

/* ===== TEMA OSCURO - MODO ACADÉMICO NOCTURNO ===== */
[data-theme="dark"] {
  /* Fondos profesionales optimizados para lectura prolongada */
  --bg-primary: #0f172a;            /* Slate-900: Fondo principal */
  --bg-secondary: #1e293b;          /* Slate-800: Fondo secundario */
  --bg-tertiary: #334155;           /* Slate-700: Fondo terciario */
  --bg-quaternary: #475569;         /* Slate-600: Fondo elementos */
  
  --text-primary: #f8fafc;          /* Slate-50: Texto principal */
  --text-secondary: #e2e8f0;        /* Slate-200: Texto secundario */
  --text-tertiary: #cbd5e0;         /* Slate-300: Texto terciario */
  --text-quaternary: #94a3b8;       /* Slate-400: Texto deshabilitado */
  
  --border-primary: #475569;        /* Slate-600: Bordes principales */
  --border-secondary: #64748b;      /* Slate-500: Bordes secundarios */
  --border-tertiary: #94a3b8;       /* Slate-400: Bordes destacados */
  
  /* Sombras optimizadas para fondo oscuro */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.7), 0 1px 2px -1px rgba(0, 0, 0, 0.7);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.8), 0 2px 4px -2px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.8), 0 4px 6px -4px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  
  /* Estados interactivos modo oscuro */
  --color-hover-bg: rgba(248, 250, 252, 0.08);  /* Hover claro sutil */
  --color-focus-ring: rgba(100, 116, 139, 0.3); /* Focus Slate-500 */
  --color-active-bg: rgba(248, 250, 252, 0.12); /* Estado activo */
  
  /* Botones modo oscuro - Colores ajustados */
  --btn-primary-bg: #475569;            /* Slate-600: Más claro en oscuro */
  --btn-primary-bg-hover: #64748b;      /* Slate-500: Hover más claro */
  --btn-primary-bg-disabled: #334155;   /* Slate-700: Deshabilitado */
  
  --btn-secondary-border: #64748b;      /* Slate-500: Más visible */
  --btn-secondary-text: #cbd5e0;        /* Slate-300: Más claro */
  --btn-secondary-bg-hover: #64748b;    /* Slate-500: Hover */
  
  /* Formularios modo oscuro */
  --input-bg: #1e293b;                  /* Slate-800 */
  --input-border: #475569;              /* Slate-600 */
  --input-border-hover: #64748b;        /* Slate-500 */
  --input-border-focus: #94a3b8;        /* Slate-400 */
  --input-text: #f8fafc;                /* Slate-50 */
  --input-placeholder: #94a3b8;         /* Slate-400 */
  --input-shadow-focus: 0 0 0 3px rgba(148, 163, 184, 0.2);
  
  /* Enlaces modo oscuro */
  --link-color: #cbd5e0;                /* Slate-300 */
  --link-color-hover: #e2e8f0;         /* Slate-200 */
  --link-underline: rgba(203, 213, 224, 0.3);
  --link-underline-hover: rgba(203, 213, 224, 1);
}

/* ===== RESPETO A PREFERENCIAS DEL SISTEMA ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-quaternary: #475569;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    --text-quaternary: #94a3b8;
    --border-primary: #475569;
    --border-secondary: #64748b;
    --border-tertiary: #94a3b8;
    --color-hover-bg: rgba(248, 250, 252, 0.08);
    --color-focus-ring: rgba(100, 116, 139, 0.3);
  }
}

/* ===== SISTEMA TIPOGRÁFICO UNIFICADO ===== */
/* Todas las tipografías siguen la escala académica estricta */

.text-xs { font-size: var(--font-size-xs); line-height: var(--line-height-normal); }
.text-sm { font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.text-base { font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.text-lg { font-size: var(--font-size-lg); line-height: var(--line-height-normal); }
.text-xl { font-size: var(--font-size-xl); line-height: var(--line-height-snug); }
.text-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-snug); }
.text-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); }
.text-4xl { font-size: var(--font-size-4xl); line-height: var(--line-height-tight); }
.text-5xl { font-size: var(--font-size-5xl); line-height: var(--line-height-tight); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* ===== SISTEMA JERÁRQUICO DE BOTONES - CONTRASTE AAA GARANTIZADO ===== */
/* BOTÓN PRIMARIO: Máximo peso visual para acciones principales */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  border: 2px solid var(--btn-primary-bg);
  border-radius: var(--radius-base);
  transition: all var(--transition-fast) var(--easing-smooth);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  /* Elimina estilos de enlace */
  -webkit-appearance: none;
  appearance: none;
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--color-focus-ring);
}

.btn-primary:disabled {
  background-color: var(--btn-primary-bg-disabled);
  border-color: var(--btn-primary-bg-disabled);
  color: var(--btn-primary-text-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* BOTÓN SECUNDARIO: Elegante con borde institucional */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border: 2px solid var(--btn-secondary-border);
  border-radius: var(--radius-base);
  transition: all var(--transition-fast) var(--easing-smooth);
  cursor: pointer;
  text-decoration: none;
  /* Elimina estilos de enlace */
  -webkit-appearance: none;
  appearance: none;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-secondary-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  background-color: var(--btn-secondary-bg-active);
  transform: translateY(0);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-secondary:disabled {
  background-color: var(--btn-secondary-bg-disabled);
  color: var(--btn-secondary-text-disabled);
  border-color: var(--btn-secondary-border-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===== SISTEMA DE TAMAÑOS DE BOTONES ===== */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  gap: var(--space-1);
}

.btn-md {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  gap: var(--space-2);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  gap: var(--space-2);
}

.btn-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  gap: var(--space-3);
}

/* Botones de ancho completo */
.btn-full {
  width: 100%;
}

/* ===== SISTEMA DE FORMULARIOS UNIFICADO ===== */
.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-base);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  transition: all var(--transition-fast) var(--easing-smooth);
  /* Elimina estilos por defecto */
  -webkit-appearance: none;
  appearance: none;
}

.form-input {
  padding: var(--space-3) var(--space-4);
}

.form-textarea {
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  min-height: 120px;
}

.form-select {
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-10); /* Espacio para el icono */
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--input-placeholder);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--input-border-hover);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-quaternary);
  cursor: not-allowed;
}

/* Labels de formulario */
.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.form-label.required::after {
  content: ' *';
  color: #dc2626; /* Red-600 para requeridos */
}

/* ===== SISTEMA DE ENLACES UNIFICADO ===== */
.link-base {
  color: var(--link-color);
  text-decoration: none;
  transition: all var(--transition-fast) var(--easing-smooth);
  position: relative;
}

.link-base:hover {
  color: var(--link-color-hover);
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--link-underline);
  transition: width var(--transition-normal) var(--easing-natural);
}

.link-underline:hover::after {
  width: 100%;
  background-color: var(--link-underline-hover);
}

.link-bold {
  font-weight: var(--font-weight-semibold);
}

/* ===== SISTEMA DE COLORES ADAPTATIVOS UNIFICADOS ===== */
/* Todos los elementos usan variables CSS, NO colores hardcodeados */

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-quaternary { background-color: var(--bg-quaternary); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-quaternary { color: var(--text-quaternary); }

.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }
.border-tertiary { border-color: var(--border-tertiary); }

.text-institutional { color: var(--color-institutional); }
.bg-institutional { background-color: var(--color-institutional); }
.border-institutional { border-color: var(--color-institutional); }

/* ===== SOBREESCRITURA DE CLASES TAILWIND HARDCODEADAS ===== */
/* PROHIBIDO usar colores duros: todas las clases usan variables */

.bg-white { background-color: var(--bg-primary) !important; }
.bg-gray-50 { background-color: var(--bg-secondary) !important; }
.bg-gray-100 { background-color: var(--bg-tertiary) !important; }
.bg-gray-200 { background-color: var(--bg-quaternary) !important; }
.bg-black { background-color: var(--text-primary) !important; }

.text-white { color: var(--bg-primary) !important; }
.text-black { color: var(--text-primary) !important; }
.text-gray-900 { color: var(--text-primary) !important; }
.text-gray-800 { color: var(--text-primary) !important; }
.text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-600 { color: var(--text-secondary) !important; }
.text-gray-500 { color: var(--text-tertiary) !important; }
.text-gray-400 { color: var(--text-quaternary) !important; }

.border-white { border-color: var(--bg-primary) !important; }
.border-gray-100 { border-color: var(--border-primary) !important; }
.border-gray-200 { border-color: var(--border-primary) !important; }
.border-gray-300 { border-color: var(--border-secondary) !important; }

.hover\\:bg-gray-50:hover { background-color: var(--color-hover-bg) !important; }
.hover\\:bg-gray-100:hover { background-color: var(--color-hover-bg) !important; }

/* ===== ESTADOS INTERACTIVOS GLOBALES ===== */
.hover-lift:hover {
  transform: translateY(-1px);
  transition: transform var(--transition-fast) var(--easing-smooth);
}

.hover-shadow:hover {
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-fast) var(--easing-smooth);
}

.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ===== SISTEMA DE SOMBRAS ===== */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ===== TRANSICIONES ACADÉMICAS ===== */
.transition-theme {
  transition: background-color var(--transition-theme) var(--easing-smooth),
              color var(--transition-theme) var(--easing-smooth),
              border-color var(--transition-theme) var(--easing-smooth),
              box-shadow var(--transition-theme) var(--easing-smooth);
}

.transition-smooth { transition: all var(--transition-normal) var(--easing-smooth); }
.transition-fast { transition: all var(--transition-fast) var(--easing-smooth); }

/* ===== MICRO-ANIMACIONES ACADÉMICAS ===== */
/* Respeta prefers-reduced-motion para accesibilidad */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(var(--space-5));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-on-scroll {
  opacity: 0;
  transition: opacity var(--transition-slow) var(--easing-natural),
              transform var(--transition-slow) var(--easing-natural);
}

.animate-on-scroll.animate-fade-up {
  transform: translateY(var(--space-5));
}

.animate-on-scroll.animate-scale {
  transform: scale(0.95);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== TEMA TOGGLE ACADÉMICO ===== */
.theme-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-theme);
  display: flex;
  align-items: center;
  padding: var(--space-1);
}

.theme-toggle:hover {
  background: var(--bg-quaternary);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.theme-toggle-slider {
  width: 20px;
  height: 20px;
  background: var(--color-institutional);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast) var(--easing-smooth),
              background-color var(--transition-theme);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
}

[data-theme="dark"] .theme-toggle-slider {
  transform: translateX(20px);
}

/* ===== ICONOS SOCIALES ACADÉMICOS ===== */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: all var(--transition-fast) var(--easing-smooth);
}

.social-icon:hover {
  transform: scale(1.05);
}

.social-icon.linkedin {
  color: #0A66C2;
}

.social-icon.linkedin:hover {
  color: #004182;
}

.social-icon.google-scholar {
  color: #4285F4;
}

.social-icon.google-scholar:hover {
  color: #1a73e8;
}

.social-icon.orcid {
  color: #A6CE39;
}

.social-icon.orcid:hover {
  color: #8fb82a;
}

/* ===== UTILIDADES DE ESPACIADO ===== */
.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.space-y-8 > * + * { margin-top: var(--space-8); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

/* ===== ACCESSIBILITY & PERFORMANCE ===== */
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== RESPONSIVE - MÓVIL OPTIMIZADO ===== */
@media (max-width: 768px) {
  :root {
    /* Ajusta espaciado para móvil */
    --space-20: 3rem;  /* 48px en lugar de 80px */
    --space-24: 4rem;  /* 64px en lugar de 96px */
  }
  
  .hover-lift:hover {
    transform: translateY(-0.5px); /* Más sutil en móvil */
  }
  
  .btn-lg {
    padding: var(--space-3) var(--space-6); /* Más compacto en móvil */
    font-size: var(--font-size-base);
  }
}

/* ===== DOCUMENTACIÓN DEL SISTEMA v3.0.1 ===== */
/*
🎓 SISTEMA ACADÉMICO PROFESIONAL v3.0.1
================================================
✅ NORMA ÚNICA Y ESTRICTA IMPLEMENTADA

📋 DESIGN TOKENS CENTRALIZADOS:
• Tipografía: Escala jerárquica académica completa
• Espaciado: Sistema modular de 4px base
• Colores: Paleta institucional Slate sobria
• Sombras: 6 niveles académicos profesionales
• Radios: Consistentes en todo el sitio

🎯 SISTEMA DE BOTONES AAA:
• Primario: Slate-900 bg + blanco text (Contraste 21:1)
• Secundario: Transparente + borde Slate-700 (Contraste 8.5:1)
• Estados: hover/active/disabled/focus completamente definidos
• Tamaños: sm/md/lg/xl con proporciones académicas

📝 FORMULARIOS UNIFICADOS:
• Inputs/textareas/selects con estilos consistentes
• Estados focus con ring institucional
• Labels con tipografía y espaciado estricto
• Colores adaptativos claro/oscuro

🔗 ENLACES ESTANDARIZADOS:
• Color institucional con hover definido
• Underline animado profesional
• Estados focus con ring académico

🎨 SOBREESCRITURA TAILWIND:
• bg-white → var(--bg-primary)
• text-black → var(--text-primary)  
• border-gray-300 → var(--border-secondary)
• ¡PROHIBIDOS colores hardcodeados!

🌗 MODO OSCURO ACADÉMICO:
• Paleta Slate completa para lectura prolongada
• Contrastes calibrados para trabajo nocturno
• Transiciones suaves entre modos

♿ ACCESIBILIDAD COMPLETA:
• Contraste AAA en todos los elementos interactivos
• Focus visible académico en todo el sitio
• prefers-reduced-motion respetado
• Semántica HTML preservada

📱 RESPONSIVE ACADÉMICO:
• Espaciado adaptativo en móvil
• Botones compactos para touch
• Animaciones sutiles optimizadas
*/
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.8);
  
  /* Estados interactivos mejorados */
  --hover-bg: rgba(255, 255, 255, 0.08);  /* Hover más visible */
  --focus-ring: rgba(59, 130, 246, 0.5);  /* Focus con color institucional */
}

/* Respeto a preferencia del sistema - Colores profesionales optimizados */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Fondos profesionales */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    
    /* Textos con jerarquía clara */
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    
    /* Bordes definidos */
    --border-primary: #4a5568;
    --border-secondary: #718096;
    
    /* Acentos académicos profesionales */
    --accent-primary: #64748b;  /* Slate-500: azul grisáceo visible en oscuro */
    --accent-secondary: #94a3b8; /* Slate-400: variante para interacciones */
    
    /* Sombras optimizadas */
    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.8);
    
    /* Estados interactivos mejorados */
    --hover-bg: rgba(255, 255, 255, 0.08);
    --focus-ring: rgba(100, 116, 139, 0.3);
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== UTILITY CLASSES ===== */

/* Base transition classes */
.transition-smooth {
  transition: all var(--transition-normal) var(--easing-natural);
}

.transition-fast {
  transition: all var(--transition-fast) ease-out;
}

.transition-theme {
  transition: background-color var(--transition-theme) ease-out,
              color var(--transition-theme) ease-out,
              border-color var(--transition-theme) ease-out,
              box-shadow var(--transition-theme) ease-out;
}

/* Theme-aware backgrounds */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-tertiary {
  background-color: var(--bg-tertiary);
}

/* Theme-aware text colors */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

/* Theme-aware borders */
.border-primary {
  border-color: var(--border-primary);
}

.border-secondary {
  border-color: var(--border-secondary);
}

/* Hover effects para botones */
.btn-hover-lift {
  transition: transform var(--transition-fast) ease-out,
              box-shadow var(--transition-fast) ease-out;
}

.btn-hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn-hover-lift:active {
  transform: translateY(0);
}

/* Hover effects para enlaces */
.link-hover-underline {
  position: relative;
  transition: color var(--transition-fast) ease-out;
}

.link-hover-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transition: width var(--transition-normal) var(--easing-natural);
}

.link-hover-underline:hover::after {
  width: 100%;
}

/* Card hover effects */
.card-hover {
  transition: transform var(--transition-normal) ease-out,
              box-shadow var(--transition-normal) ease-out;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* Icon hover effects */
.icon-hover {
  transition: transform var(--transition-fast) ease-out,
              color var(--transition-fast) ease-out;
}

.icon-hover:hover {
  transform: scale(1.1);
}

/* Social links hover */
.social-hover {
  transition: all var(--transition-fast) ease-out;
}

.social-hover:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

/* ===== SOCIAL MEDIA BRAND COLORS ===== */
.social-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  transition: all var(--transition-fast) ease-out;
}

.social-icon:hover {
  transform: scale(1.05);
}

/* LinkedIn brand color */
.social-icon.linkedin {
  color: #0A66C2;
}

.social-icon.linkedin:hover {
  color: #004182;
}

/* Google Scholar brand color */
.social-icon.google-scholar {
  color: #4285F4;
}

.social-icon.google-scholar:hover {
  color: #1a73e8;
}

/* ORCID brand color */
.social-icon.orcid {
  color: #A6CE39;
}

.social-icon.orcid:hover {
  color: #8fb82a;
}

/* Hover background for social links */
.hover\:bg-hover-bg:hover {
  background-color: var(--hover-bg);
}

/* ===== ANIMACIONES DE ENTRADA ===== */

/* Fade in from bottom */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale in */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Utility classes for scroll animations */
.animate-on-scroll {
  opacity: 0;
  transition: opacity var(--transition-slow) ease-out,
              transform var(--transition-slow) ease-out;
}

.animate-on-scroll.animate-fade-up {
  transform: translateY(20px);
}

.animate-on-scroll.animate-fade-left {
  transform: translateX(-20px);
}

.animate-on-scroll.animate-fade-right {
  transform: translateX(20px);
}

.animate-on-scroll.animate-scale {
  transform: scale(0.95);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ===== ANIMACIONES ESPECÍFICAS ===== */

/* Pulse sutil para elementos interactivos */
.pulse-subtle {
  animation: pulseSubtle 2s ease-in-out infinite;
}

@keyframes pulseSubtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Shimmer effect para loading states */
.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Stagger animation delays para elementos en lista */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* ===== MEJORAS DE FOCUS ===== */

/* Focus visible mejorado - Adaptado para ambos temas */
.focus-visible-enhanced:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring);
  transition: box-shadow var(--transition-fast) ease-out;
}

/* Focus específico para modo oscuro */
[data-theme="dark"] .focus-visible-enhanced:focus-visible {
  outline-color: #63b3ed;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
}

/* ===== RESPONSIVE CONSIDERATIONS ===== */

/* Reduce motion on mobile para mejor performance */
@media (max-width: 768px) {
  .card-hover:hover {
    transform: translateY(-1px); /* Reducido en móvil */
    box-shadow: var(--shadow-soft);
  }
  
  .btn-hover-lift:hover {
    transform: translateY(-0.5px); /* Más sutil en móvil */
  }
  
  /* Reduce stagger delays en móvil */
  .stagger-1 { animation-delay: 0.05s; }
  .stagger-2 { animation-delay: 0.1s; }
  .stagger-3 { animation-delay: 0.15s; }
  .stagger-4 { animation-delay: 0.2s; }
  .stagger-5 { animation-delay: 0.25s; }
}

/* High refresh rate optimization */
@media (min-resolution: 120dpi) {
  .transition-fast {
    transition-duration: 120ms;
  }
  
  .transition-normal {
    transition-duration: 200ms;
  }
}

/* ===== THEME TOGGLE STYLES ===== */
.theme-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 14px;
  cursor: pointer;
  transition: background-color var(--transition-theme) ease-out,
              border-color var(--transition-theme) ease-out;
  display: flex;
  align-items: center;
  padding: 2px;
}

.theme-toggle:hover {
  background: var(--hover-bg);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.theme-toggle-slider {
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  border-radius: 50%;
  transition: transform var(--transition-fast) ease-out,
              background-color var(--transition-theme) ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  position: relative;
}

[data-theme="dark"] .theme-toggle-slider {
  transform: translateX(20px);
}

.theme-toggle-icon {
  width: 12px;
  height: 12px;
  transition: opacity var(--transition-fast) ease-out;
}

/* ===== CLASES DE COLOR DE ACENTO GLOBAL ===== */
.border-accent {
  border-color: var(--accent-color) !important;
}

.border-accent-2 {
  border-width: 2px;
  border-color: var(--accent-color) !important;
}

.border-accent-primary {
  border-color: var(--accent-primary) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.bg-accent {
  background-color: var(--accent-color) !important;
}

.bg-accent-primary {
  background-color: var(--accent-primary) !important;
}

.bg-accent-secondary {
  background-color: var(--accent-secondary) !important;
}

.hover\:bg-accent:hover {
  background-color: var(--accent-hover) !important;
}

.hover\:bg-accent-secondary:hover {
  background-color: var(--accent-secondary) !important;
}

.ring-accent {
  --tw-ring-color: var(--accent-color) !important;
}

.focus\:ring-accent:focus {
  --tw-ring-color: var(--accent-color) !important;
}

/* ===== SISTEMA UNIFICADO DE COLORES ===== */
/* Clases de texto adaptativas para ambos temas */
.text-gray-600,
.text-gray-500 {
  color: var(--text-secondary) !important;
}

.text-gray-700,
.text-gray-800,
.text-gray-900 {
  color: var(--text-primary) !important;
}

.text-gray-400 {
  color: var(--text-tertiary) !important;
}

/* Fondos adaptivos */
.bg-white {
  background-color: var(--bg-primary) !important;
}

.bg-gray-50,
.bg-gray-100 {
  background-color: var(--bg-secondary) !important;
}

.bg-gray-200 {
  background-color: var(--bg-tertiary) !important;
}

/* Bordes adaptivos */
.border-gray-200,
.border-gray-100 {
  border-color: var(--border-primary) !important;
}

.border-gray-300,
.border-gray-400 {
  border-color: var(--border-secondary) !important;
}

/* Estados hover unificados */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
  background-color: var(--hover-bg) !important;
}

.hover\:bg-white:hover {
  background-color: var(--hover-bg) !important;
}

/* ===== CLASES ADICIONALES PARA ELEMENTOS ESPECÍFICOS ===== */
/* Botones y elementos interactivos con colores duros codificados */
.bg-black {
  background-color: var(--accent-primary) !important;
}

.hover\:bg-gray-800:hover {
  background-color: var(--accent-secondary) !important;
}

.text-black {
  color: var(--text-primary) !important;
}

.text-white {
  color: var(--text-primary) !important;
}

/* ===== SISTEMA JERÁRQUICO DE BOTONES PROFESIONALES ===== */

/* Botón Primario - Máximo contraste y peso visual para acciones principales */
.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  font-weight: 700 !important;  /* Peso tipográfico sólido */
  border: 2px solid var(--btn-primary-bg) !important;
  transition: all 0.2s ease-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.4) !important;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Botón Secundario - Elegante y refinado para navegación */
.btn-secondary {
  background-color: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  font-weight: 600 !important;  /* Peso medio pero sólido */
  border: 2px solid var(--btn-secondary-border) !important;
  transition: all 0.2s ease-out;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover-bg) !important;
  color: var(--btn-secondary-hover-text) !important;
  border-color: var(--btn-secondary-hover-bg) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(51, 65, 85, 0.2);
}

.btn-secondary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.4) !important;
}

.btn-secondary:active {
  transform: translateY(0);
}

/* ===== FIX: Boton Exportar Dashboard Analytics ===== */
.analytics-export-button {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
}

.analytics-export-button:hover {
  background-color: #1f2937 !important;
  border-color: #1f2937 !important;
}

.analytics-export-button svg {
  color: #ffffff !important;
}

/* Variantes de tamaño premium con proporción académica */
.btn-lg {
  padding: 0.875rem 2rem !important;  /* 14px 32px - Generoso pero no excesivo */
  font-size: 1.125rem !important;     /* 18px - Legible y sólido */
  border-radius: 0.25rem !important;  /* 4px - Esquinas sutiles */
}

.btn-md {
  padding: 0.75rem 1.75rem !important;  /* 12px 28px */
  font-size: 1rem !important;           /* 16px */
  border-radius: 0.25rem !important;
}

.btn-sm {
  padding: 0.625rem 1.5rem !important;  /* 10px 24px */
  font-size: 0.875rem !important;       /* 14px */
  border-radius: 0.25rem !important;
}

/* Estados extendidos para accesibilidad premium */
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Mejoras temáticas para modo oscuro */
[data-theme="dark"] .btn-primary {
  --btn-primary-bg: #475569;          /* Slate-600: Más claro en modo oscuro */
  --btn-primary-hover: #64748b;       /* Slate-500: Hover más claro */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .btn-secondary {
  --btn-secondary-border: #64748b;    /* Slate-500: Borde más claro */
  --btn-secondary-text: #94a3b8;      /* Slate-400: Texto más claro */
  --btn-secondary-hover-bg: #64748b;  /* Hover con slate-500 */
}

[data-theme="dark"] .btn-secondary:hover {
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.3);
}

/* Para elementos que usan bg-black en modo oscuro */
[data-theme="dark"] .bg-black {
  background-color: var(--accent-primary) !important;
}

[data-theme="dark"] .hover\:bg-gray-800:hover {
  background-color: var(--accent-secondary) !important;
}

/* Clases adicionales para Tailwind */
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* ===== DEBUG (remover en producción) ===== */
.animate-debug {
  border: 1px solid red !important;
}

.animate-debug.is-visible {
  border-color: green !important;
}

/* ===== DOCUMENTACIÓN SISTEMA MODO OSCURO MEJORADO v2.8.1 ===== */
/*
IMPLEMENTACIÓN SUSTANCIAL DE MODO OSCURO PROFESIONAL

Fecha de actualización: Febrero 2026
Versión: 2.8.1 - Modo Oscuro Profesional

MEJORAS IMPLEMENTADAS:

1. PALETA DE COLORES REDISEÑADA:
   - Fondo principal: #1a202c (más claro y cálido que el anterior #0f1419)
   - Fondo secundario: #2d3748 (mejor contraste para cards y secciones)
   - Fondo terciario: #4a5568 (elementos destacados con excelente legibilidad)
   - Textos: Jerarquía clara con #f7fafc, #e2e8f0, #cbd5e0
   - Bordes: #4a5568 y #718096 para definición visual clara

2. CONTRASTE Y LEGIBILIDAD OPTIMIZADOS:
   - Contrastes calibrados para lectura prolongada
   - Cumple estándares WCAG AA para accesibilidad
   - Eliminación de negro absoluto (#000000) problemático
   - Jerarquía tipográfica clara mantenida

3. COHERENCIA VISUAL ENTRE SECCIONES:
   - Variables CSS centralizadas para todos los elementos
   - Transiciones suaves con transition-theme
   - Eliminación de inconsistencias bg-white/bg-gray hardcodeadas
   - Sistema unificado de colores adaptativos

4. ELEMENTOS CORREGIDOS:
   - Headers y navegación
   - Cards de publicaciones y proyectos
   - Secciones Hero con background consistency
   - Footer y elementos interactivos
   - Bordes y líneas divisorias

5. SISTEMA DE VARIABLES CSS:
   - --bg-primary, --bg-secondary, --bg-tertiary
   - --text-primary, --text-secondary, --text-tertiary
   - --border-primary, --border-secondary
   - --accent-primary (azul institucional adaptado)
   - Estados hover e interactivos mejorados

6. CLASSES ADAPTATIVAS IMPLEMENTADAS:
   - .text-gray-* → variables CSS temáticas
   - .bg-white → .bg-primary adaptivo
   - .border-gray-* → .border-primary/secondary adaptivos
   - .transition-theme para cambios suaves

RESULTADO:
Modo oscuro profesional, cómodo, homogéneo y apropiado para 
sitio académico senior, manteniendo exactamente las mismas 
tipografías, tamaños y jerarquía visual del modo claro.

COMPATIBILIDAD:
- Respeta prefers-color-scheme: dark
- Funciona con toggle manual de tema
- Mantiene coherencia con el color institucional azul
- Optimizado para dispositivos móviles y desktop

*/

/* ===== ARREGLO DE CONTRASTE EN ESTADOS ACTIVOS DE BOTONES ===== */
/* Solucion para botones que se ponen blancos al hacer click */

/* Botones genéricos - Asegurar contraste adecuado en estado active */
button:active,
button:focus {
  background-color: var(--color-active-bg) !important;
  color: var(--text-primary) !important;
  outline: none !important;
}

/* Botones con clases Tailwind específicas */
.inline-flex:active,
.inline-flex:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Botones de navegación específicos */
.text-secondary:active,
.text-primary:active {
  color: var(--text-primary) !important;
  background-color: var(--bg-tertiary) !important;
}

/* Estados hover mejorados para mejor contraste */
.hover\\:text-primary:hover {
  color: var(--text-primary) !important;
}

.hover\\:text-secondary:hover {
  color: var(--text-secondary) !important;
}

.hover\\:bg-tertiary:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Mobile menu button states */
.md\\:hidden button:active,
.md\\:hidden button:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* Focus ring para accesibilidad */
button:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
  background-color: var(--bg-tertiary) !important;
}

/* Language selector buttons */
.SimpleLanguageSelector button:active,
.SimpleLanguageSelector button:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* Prevenir background blanco en todos los elementos interactivos */
*:active {
  background-color: inherit !important;
}

/* Botones específicos que mantienen su estado visual */
button.inline-flex:active,
button.inline-flex:focus,
a.inline-flex:active,
a.inline-flex:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transform: translateY(0) !important;
}

/* Estilos específicos para botones primarios grandes (Contacto Institucional) */
.btn-primary.btn-lg:active,
.btn-primary.btn-lg:focus {
  background-color: var(--btn-primary-bg-active) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg-active) !important;
  transform: translateY(0) !important;
}

.btn-primary.btn-lg:hover {
  background-color: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg-hover) !important;
}

/* Estilos específicos para botón de Contacto Institucional completo */
button.btn-primary.btn-lg.inline-flex:active,
button.btn-primary.btn-lg.inline-flex:focus,
button.btn-primary.btn-lg.inline-flex:focus-visible {
  background-color: var(--btn-primary-bg-active) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg-active) !important;
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}

/* Arreglo adicional para cualquier botón con justify-center */
.justify-center:active,
.justify-center:focus {
  background-color: inherit !important;
}

/* Arreglo específico para elementos inline-flex que se transforman en blancos */
.inline-flex.items-center:active,
.inline-flex.justify-center:active {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* ===== ARREGLO COMPLETO PARA BOTONES CON COMBINACIONES DE CLASES ===== */
/* Asegurar que NINGÚN botón se ponga blanco bajo ninguna circunstancia */

/* Botones con múltiples clases que pueden generar conflicto */
button[class*="btn-primary"]:active,
button[class*="btn-primary"]:focus,
button[class*="btn-primary"]:focus-visible {
  background-color: var(--btn-primary-bg-active) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg-active) !important;
}

button[class*="btn-secondary"]:active,
button[class*="btn-secondary"]:focus,
button[class*="btn-secondary"]:focus-visible {
  background-color: var(--btn-secondary-bg-active) !important;
  color: var(--btn-secondary-text) !important;
  border-color: var(--btn-secondary-border) !important;
}

/* Regla global para prevenir fondo blanco en cualquier elemento */
*:active:not(input):not(textarea):not(select) {
  background-color: inherit !important;
}

/* Regla específica para prevenir text-white con fondo blanco */
.text-white:active,
.text-primary:active,
.text-secondary:active {
  color: var(--text-primary) !important;
  background-color: var(--bg-tertiary) !important;
}

/* Arreglo para todos los elementos flex que pueden ser botones */
.flex:active,
.inline-flex:active {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Estados touch para dispositivos móviles */
@media (hover: none) and (pointer: coarse) {
  button:active,
  .btn-primary:active,
  .btn-secondary:active,
  .inline-flex:active {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    opacity: 0.8;
    transform: scale(0.98);
  }
}