/**
 * UTILITIES CSS - Academia de Idiomas
 * Clases utilitarias adicionales
 */

/* ========== TYPOGRAPHY ========== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.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); }

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

.text-blue { color: var(--color-primary-600); }
.text-red { color: var(--color-accent-600); }
.text-green { color: var(--color-success); }

/* ========== BACKGROUNDS ========== */
.bg-white { background-color: var(--bg-primary); }
.bg-gray { background-color: var(--bg-secondary); }
.bg-dark { background-color: var(--bg-dark); }
.bg-blue { background-color: var(--color-primary-600); }
.bg-red { background-color: var(--color-accent-600); }

/* ========== BORDERS ========== */
.border { border: var(--border-width-thin) solid var(--color-neutral-200); }
.border-t { border-top: var(--border-width-thin) solid var(--color-neutral-200); }
.border-b { border-bottom: var(--border-width-thin) solid var(--color-neutral-200); }

.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-full { border-radius: var(--radius-full); }

/* ========== SHADOWS ========== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* ========== WIDTH/HEIGHT ========== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ========== DISPLAY ========== */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* ========== POSITION ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ========== OVERFLOW ========== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ========== CURSOR ========== */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ========== OPACITY ========== */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ========== TRANSITIONS ========== */
.transition { transition: all var(--transition-normal); }
.transition-fast { transition: all var(--transition-fast); }

/* ========== HOVER EFFECTS ========== */
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from { 
    opacity: 0;
    transform: translateX(20px);
  }
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

.animate-slide-up {
  animation: slideUp var(--transition-normal) ease-out;
}

.animate-slide-in-right {
  animation: slideInRight var(--transition-normal) ease-out;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ========== LOADING SPINNER ========== */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-600);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* ========== DIVIDER ========== */
.divider {
  height: 1px;
  background-color: var(--color-neutral-200);
  margin: var(--space-6) 0;
}

.divider--vertical {
  width: 1px;
  height: auto;
  margin: 0 var(--space-6);
}

/* ========== AVATAR ========== */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background-color: var(--color-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-700);
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

.avatar--lg {
  width: 64px;
  height: 64px;
  font-size: var(--font-size-xl);
}

/* ========== ICON WRAPPER ========== */
.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.icon-wrapper--accent {
  background-color: var(--color-accent-100);
  color: var(--color-accent-600);
}

.icon-wrapper--success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* ========== STATUS INDICATOR ========== */
.status {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-400);
}

.status--online {
  background-color: var(--color-success);
}

.status--busy {
  background-color: var(--color-accent-500);
}

.status--away {
  background-color: var(--color-warning);
}

/* ========== RESPONSIVE UTILITIES ========== */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  
  .text-center-mobile {
    text-align: center;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}