/* Utilities - Helper Classes */

/* ========== SPACING ========== */

/* Margin */
.spacing-xs {
  margin: var(--spacing-xs);
}

.spacing-sm {
  margin: var(--spacing-sm);
}

.spacing-md {
  margin: var(--spacing-md);
}

.spacing-lg {
  margin: var(--spacing-lg);
}

.spacing-xl {
  margin: var(--spacing-xl);
}

.spacing-2xl {
  margin: var(--spacing-2xl);
}

/* Margin Top */
.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

/* Margin Bottom */
.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

/* Margin Left */
.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

/* Margin Right */
.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

/* Padding */
.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

/* Padding Top */
.pt-xs {
  padding-top: var(--spacing-xs);
}

.pt-sm {
  padding-top: var(--spacing-sm);
}

.pt-md {
  padding-top: var(--spacing-md);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

/* Padding Bottom */
.pb-xs {
  padding-bottom: var(--spacing-xs);
}

.pb-sm {
  padding-bottom: var(--spacing-sm);
}

.pb-md {
  padding-bottom: var(--spacing-md);
}

.pb-lg {
  padding-bottom: var(--spacing-lg);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

/* Padding Left */
.pl-xs {
  padding-left: var(--spacing-xs);
}

.pl-sm {
  padding-left: var(--spacing-sm);
}

.pl-md {
  padding-left: var(--spacing-md);
}

.pl-lg {
  padding-left: var(--spacing-lg);
}

.pl-xl {
  padding-left: var(--spacing-xl);
}

/* Padding Right */
.pr-xs {
  padding-right: var(--spacing-xs);
}

.pr-sm {
  padding-right: var(--spacing-sm);
}

.pr-md {
  padding-right: var(--spacing-md);
}

.pr-lg {
  padding-right: var(--spacing-lg);
}

.pr-xl {
  padding-right: var(--spacing-xl);
}

/* ========== SOMBRAS ========== */

.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.shadow-md {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ========== OPACIDADES ========== */

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

/* ========== TRANSICIONES ========== */

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

.transition-slow {
  transition: all var(--transition-slow);
}

.hover-lift {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ========== BORDER RADIUS ========== */

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

/* ========== COLORES DE TEXTO ========== */

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

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

.text-success {
  color: var(--accent-green);
}

.text-warning {
  color: var(--accent-yellow);
}

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

/* ========== COLORES DE FONDO ========== */

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

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

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

.bg-success {
  background-color: var(--accent-green);
}

.bg-warning {
  background-color: var(--accent-yellow);
}

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

/* ========== FONT WEIGHTS ========== */

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

/* ========== GRID UTILITIES ========== */

.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.grid-3-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.grid-4-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

/* ========== ACCESSIBILITY ========== */

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

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}