/*
 * Descripción: Clases de utilidad atómicas para diseño y espaciado rápido.
 */

/* ==========================================================================
   UTILITIES — Atomic single-purpose classes
   Layer 3 of 7 — ITCSS Utilities
   ========================================================================== */

/* Flexbox */
.flex              { display: flex; }
.flex-wrap         { flex-wrap: wrap; }
.flex-1            { flex: 1; }
.flex-2            { flex: 2; }
.flex-between      { display: flex; justify-content: space-between; align-items: center; }
.flex-center       { display: flex; justify-content: center; align-items: center; }
.flex-align-center { display: flex; align-items: center; }
.flex-column       { display: flex; flex-direction: column; }
.justify-start    { justify-content: flex-start !important; }
.justify-end      { justify-content: flex-end !important; }
.align-start      { align-items: flex-start !important; }

/* Gap */
.gap-4  { gap: 4px;  } .gap-8  { gap: 8px;  } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-15 { gap: 15px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; }

/* Padding */
.p-10 { padding: 10px; } .p-15 { padding: 15px; } .p-20 { padding: 20px; }
.p-24 { padding: 24px; } .p-30 { padding: 30px; } .p-40 { padding: 40px; }
.px-8  { padding-left: 8px;  padding-right: 8px;  }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-4  { padding-top: 4px;   padding-bottom: 4px;  }
.py-6  { padding-top: 6px;   padding-bottom: 6px;  }
.py-8  { padding-top: 8px;   padding-bottom: 8px;  }
.py-12 { padding-top: 12px;  padding-bottom: 12px; }
.py-16 { padding-top: 16px;  padding-bottom: 16px; }
.pb-15  { padding-bottom: 15px;  }
.pb-40  { padding-bottom: 40px;  }
.pb-100 { padding-bottom: 100px; }

/* Margin */
.m-0   { margin: 0; }
.mt-4  { margin-top: 4px;  } .mt-5  { margin-top: 5px;  } .mt-8  { margin-top: 8px;  }
.mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-0  { margin-bottom: 0;    } .mb-4  { margin-bottom: 4px;  } .mb-5  { margin-bottom: 5px;  }
.mb-8  { margin-bottom: 8px;  } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; }
.mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; } .mb-32 { margin-bottom: 32px; } .mb-40 { margin-bottom: 40px; }

/* Sizing */
.w-full { width: 100%;  } .w-auto { width: auto;  }
.h-full { height: 100%; }
.w-44   { width:  44px; } .h-44   { height: 44px; }
.w-60   { width:  60px; } .h-60   { height: 60px; }
.obj-cover { object-fit: cover; }

/* Border radius */
.rounded-4    { border-radius: 4px;  }
.rounded-12   { border-radius: 12px; }
.rounded-18   { border-radius: 18px; }
.rounded-24   { border-radius: 24px; }
.rounded-full { border-radius: 50%;  }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { top: 0; left: 0; right: 0; bottom: 0; }

/* Typography */
.fs-xs   { font-size: 0.6rem;  }
.fs-75   { font-size: 0.75rem; }
.fs-sm   { font-size: 0.8rem;  }
.fs-md   { font-size: 0.95rem; }
.fs-base { font-size: 1rem;    }
.fs-lg   { font-size: 1.1rem;  }
.fs-xl   { font-size: 1.2rem;  }
.fs-2xl  { font-size: 1.4rem;  }
.fs-3xl  { font-size: 2rem;    }
.fs-huge { font-size: 2.5rem;  }

.font-medium   { font-weight: 500; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-black    { font-weight: 900; }
.font-main     { font-family: var(--font-main); }
.font-code     { font-family: var(--font-code); }

.text-center    { text-align: center;        }
.text-right     { text-align: right;         }
.text-uppercase { text-transform: uppercase; }
.letter-spacing-1 { letter-spacing: 1px;    }

.text-gold { color: #d4af37; }
.text-pink { color: #ff2d55; }

/* Opacity */
.opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; }

/* Shadows */
.shadow-soft     { box-shadow: var(--shadow-soft);     }
.shadow-elevated { box-shadow: var(--shadow-elevated); }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Transition */
.transition-all { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Misc */
.cursor-pointer   { cursor: pointer;   }
.user-select-none { user-select: none; }

/* Glass Panel */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}