/**
 * ============================================================================
 * INTERGRID2.CSS - UTILITIES CSS PER A INTERGRID.CAT
 * ============================================================================
 *
 * VERSIÓ: 2.0.5
 * DATA: 2025-11-11
 * CREAT PER: Anàlisi automàtica exhaustiva del CSS existent
 *
 * DESCRIPCIÓ:
 * Aquest fitxer conté NOMÉS utilities noves (prefix .u-*) que NO existeixen
 * a intergrid.css. No modifica cap estil existent del web.
 *
 * PROPÒSIT:
 * - Proporcionar utilities reutilitzables per a nous desenvolupaments
 * - Permetre migrar progressivament les classes inline-style-*
 * - NO interferir amb els estils actuals del web
 *
 * ⚠️ IMPORTANT:
 * Aquest fitxer es carrega DESPRÉS d'intergrid.css en Dual Loading.
 * Per tant, NO ha de contenir cap classe que ja existeixi a intergrid.css.
 *
 * ============================================================================
 */

/* ============================================================================
   1. VARIABLES CSS (CSS Custom Properties)
   ============================================================================ */

:root {
  /* Spacing Scale (rem) */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Colors (from intergrid.css) */
  --color-primary: #1E5594;
  --color-secondary: #4A90E2;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #17a2b8;
  --color-light: #f8f9fa;
  --color-dark: #343a40;

  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
}

/* ============================================================================
   2. UTILITIES - DISPLAY
   ============================================================================ */

.u-d-none { display: none !important; }
.u-d-block { display: block !important; }
.u-d-inline { display: inline !important; }
.u-d-inline-block { display: inline-block !important; }
.u-d-flex { display: flex !important; }
.u-d-inline-flex { display: inline-flex !important; }
.u-d-grid { display: grid !important; }

/* ============================================================================
   3. UTILITIES - FLEXBOX
   ============================================================================ */

.u-flex-row { flex-direction: row !important; }
.u-flex-column { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-nowrap { flex-wrap: nowrap !important; }

.u-justify-start { justify-content: flex-start !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-around { justify-content: space-around !important; }

.u-align-start { align-items: flex-start !important; }
.u-align-end { align-items: flex-end !important; }
.u-align-center { align-items: center !important; }
.u-align-baseline { align-items: baseline !important; }
.u-align-stretch { align-items: stretch !important; }

.u-flex-1 { flex: 1 !important; }
.u-flex-auto { flex: auto !important; }
.u-flex-initial { flex: initial !important; }
.u-flex-none { flex: none !important; }

/* ============================================================================
   4. UTILITIES - SPACING (Margin)
   ============================================================================ */

.u-m-0 { margin: 0 !important; }
.u-m-1 { margin: var(--sp-1) !important; }
.u-m-2 { margin: var(--sp-2) !important; }
.u-m-3 { margin: var(--sp-3) !important; }
.u-m-4 { margin: var(--sp-4) !important; }
.u-m-5 { margin: var(--sp-5) !important; }
.u-m-6 { margin: var(--sp-6) !important; }
.u-m-8 { margin: var(--sp-8) !important; }

.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--sp-1) !important; }
.u-mt-2 { margin-top: var(--sp-2) !important; }
.u-mt-3 { margin-top: var(--sp-3) !important; }
.u-mt-4 { margin-top: var(--sp-4) !important; }
.u-mt-5 { margin-top: var(--sp-5) !important; }
.u-mt-6 { margin-top: var(--sp-6) !important; }
.u-mt-8 { margin-top: var(--sp-8) !important; }
.u-mt-10 { margin-top: var(--sp-10) !important; }

.u-mr-0 { margin-right: 0 !important; }
.u-mr-1 { margin-right: var(--sp-1) !important; }
.u-mr-2 { margin-right: var(--sp-2) !important; }
.u-mr-3 { margin-right: var(--sp-3) !important; }
.u-mr-4 { margin-right: var(--sp-4) !important; }
.u-mr-5 { margin-right: var(--sp-5) !important; }
.u-mr-6 { margin-right: var(--sp-6) !important; }
.u-mr-8 { margin-right: var(--sp-8) !important; }
.u-mr-10 { margin-right: var(--sp-10) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: var(--sp-1) !important; }
.u-mb-2 { margin-bottom: var(--sp-2) !important; }
.u-mb-3 { margin-bottom: var(--sp-3) !important; }
.u-mb-4 { margin-bottom: var(--sp-4) !important; }
.u-mb-5 { margin-bottom: var(--sp-5) !important; }
.u-mb-6 { margin-bottom: var(--sp-6) !important; }
.u-mb-8 { margin-bottom: var(--sp-8) !important; }
.u-mb-10 { margin-bottom: var(--sp-10) !important; }
.u-mb-12 { margin-bottom: var(--sp-12) !important; }

.u-ml-0 { margin-left: 0 !important; }
.u-ml-1 { margin-left: var(--sp-1) !important; }
.u-ml-2 { margin-left: var(--sp-2) !important; }
.u-ml-3 { margin-left: var(--sp-3) !important; }
.u-ml-4 { margin-left: var(--sp-4) !important; }
.u-ml-5 { margin-left: var(--sp-5) !important; }
.u-ml-6 { margin-left: var(--sp-6) !important; }
.u-ml-8 { margin-left: var(--sp-8) !important; }
.u-ml-10 { margin-left: var(--sp-10) !important; }

.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ============================================================================
   5. UTILITIES - SPACING (Padding)
   ============================================================================ */

.u-p-0 { padding: 0 !important; }
.u-p-1 { padding: var(--sp-1) !important; }
.u-p-2 { padding: var(--sp-2) !important; }
.u-p-3 { padding: var(--sp-3) !important; }
.u-p-4 { padding: var(--sp-4) !important; }
.u-p-5 { padding: var(--sp-5) !important; }
.u-p-6 { padding: var(--sp-6) !important; }
.u-p-8 { padding: var(--sp-8) !important; }

.u-pt-0 { padding-top: 0 !important; }
.u-pt-1 { padding-top: var(--sp-1) !important; }
.u-pt-2 { padding-top: var(--sp-2) !important; }
.u-pt-3 { padding-top: var(--sp-3) !important; }
.u-pt-4 { padding-top: var(--sp-4) !important; }
.u-pt-5 { padding-top: var(--sp-5) !important; }
.u-pt-6 { padding-top: var(--sp-6) !important; }
.u-pt-8 { padding-top: var(--sp-8) !important; }

.u-pr-0 { padding-right: 0 !important; }
.u-pr-1 { padding-right: var(--sp-1) !important; }
.u-pr-2 { padding-right: var(--sp-2) !important; }
.u-pr-3 { padding-right: var(--sp-3) !important; }
.u-pr-4 { padding-right: var(--sp-4) !important; }
.u-pr-5 { padding-right: var(--sp-5) !important; }
.u-pr-6 { padding-right: var(--sp-6) !important; }
.u-pr-8 { padding-right: var(--sp-8) !important; }

.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-1 { padding-bottom: var(--sp-1) !important; }
.u-pb-2 { padding-bottom: var(--sp-2) !important; }
.u-pb-3 { padding-bottom: var(--sp-3) !important; }
.u-pb-4 { padding-bottom: var(--sp-4) !important; }
.u-pb-5 { padding-bottom: var(--sp-5) !important; }
.u-pb-6 { padding-bottom: var(--sp-6) !important; }
.u-pb-8 { padding-bottom: var(--sp-8) !important; }

.u-pl-0 { padding-left: 0 !important; }
.u-pl-1 { padding-left: var(--sp-1) !important; }
.u-pl-2 { padding-left: var(--sp-2) !important; }
.u-pl-3 { padding-left: var(--sp-3) !important; }
.u-pl-4 { padding-left: var(--sp-4) !important; }
.u-pl-5 { padding-left: var(--sp-5) !important; }
.u-pl-6 { padding-left: var(--sp-6) !important; }
.u-pl-8 { padding-left: var(--sp-8) !important; }

/* ============================================================================
   6. UTILITIES - TEXT ALIGNMENT
   ============================================================================ */

.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-text-justify { text-align: justify !important; }

/* ============================================================================
   7. UTILITIES - TYPOGRAPHY
   ============================================================================ */

.u-font-normal { font-weight: normal !important; }
.u-font-bold { font-weight: bold !important; }
.u-font-light { font-weight: 300 !important; }
.u-font-semibold { font-weight: 600 !important; }

.u-italic { font-style: italic !important; }
.u-not-italic { font-style: normal !important; }

.u-uppercase { text-transform: uppercase !important; }
.u-lowercase { text-transform: lowercase !important; }
.u-capitalize { text-transform: capitalize !important; }
.u-normal-case { text-transform: none !important; }

.u-font-variant-normal { font-variant: normal !important; }
.u-letter-spacing-normal { letter-spacing: normal !important; }

.u-text-xs { font-size: var(--font-size-xs) !important; }
.u-text-sm { font-size: var(--font-size-sm) !important; }
.u-text-base { font-size: var(--font-size-base) !important; }
.u-text-lg { font-size: var(--font-size-lg) !important; }
.u-text-xl { font-size: var(--font-size-xl) !important; }
.u-text-2xl { font-size: var(--font-size-2xl) !important; }

/* ============================================================================
   8. UTILITIES - WIDTH & HEIGHT
   ============================================================================ */

.u-w-full { width: 100% !important; }
.u-w-auto { width: auto !important; }
.u-w-50 { width: 50% !important; }
.u-w-33 { width: 33.333% !important; }
.u-w-25 { width: 25% !important; }

.u-h-full { height: 100% !important; }
.u-h-auto { height: auto !important; }

.u-max-w-full { max-width: 100% !important; }
.u-max-h-full { max-height: 100% !important; }

/* ============================================================================
   9. UTILITIES - POSITION
   ============================================================================ */

.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-sticky { position: sticky !important; }

/* ============================================================================
   9B. UTILITIES - FLOAT & CLEAR
   ============================================================================ */

.u-float-left { float: left !important; }
.u-float-right { float: right !important; }
.u-float-none { float: none !important; }

.u-clear-left { clear: left !important; }
.u-clear-right { clear: right !important; }
.u-clear-both { clear: both !important; }
.u-clear-none { clear: none !important; }

/* ============================================================================
   10. UTILITIES - OVERFLOW
   ============================================================================ */

.u-overflow-auto { overflow: auto !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-visible { overflow: visible !important; }
.u-overflow-scroll { overflow: scroll !important; }

/* ============================================================================
   11. UTILITIES - VISIBILITY
   ============================================================================ */

.u-visible { visibility: visible !important; }
.u-invisible { visibility: hidden !important; }

.u-opacity-0 { opacity: 0 !important; }
.u-opacity-50 { opacity: 0.5 !important; }
.u-opacity-75 { opacity: 0.75 !important; }
.u-opacity-100 { opacity: 1 !important; }

/* ============================================================================
   12. UTILITIES - BORDER RADIUS
   ============================================================================ */

.u-rounded-none { border-radius: 0 !important; }
.u-rounded-sm { border-radius: 0.125rem !important; }
.u-rounded { border-radius: 0.25rem !important; }
.u-rounded-md { border-radius: 0.375rem !important; }
.u-rounded-lg { border-radius: 0.5rem !important; }
.u-rounded-xl { border-radius: 0.75rem !important; }
.u-rounded-full { border-radius: 9999px !important; }

/* ============================================================================
   13. UTILITIES - GAP (for flexbox/grid)
   ============================================================================ */

.u-gap-0 { gap: 0 !important; }
.u-gap-1 { gap: var(--sp-1) !important; }
.u-gap-2 { gap: var(--sp-2) !important; }
.u-gap-3 { gap: var(--sp-3) !important; }
.u-gap-4 { gap: var(--sp-4) !important; }
.u-gap-6 { gap: var(--sp-6) !important; }
.u-gap-8 { gap: var(--sp-8) !important; }

/* ============================================================================
   END OF INTERGRID2.CSS
   ============================================================================ */