/**
 * CheckToBuild - Spacing System
 * Sistema de márgenes y paddings consistente
 * 
 * @package CheckToBuild
 * @since 2.0.0
 */

/* ===========================
   MARGIN UTILITIES
   =========================== */

/* All sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-10 { margin: var(--space-10) !important; }
.m-12 { margin: var(--space-12) !important; }
.m-auto { margin: auto !important; }

/* Margin X (horizontal) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y (vertical) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
.my-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }

/* Individual sides (ya definidos en utilities.css pero repetimos por claridad) */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }

/* ===========================
   PADDING UTILITIES
   =========================== */

/* All sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }
.p-10 { padding: var(--space-10) !important; }
.p-12 { padding: var(--space-12) !important; }

/* Padding X (horizontal) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }

/* Padding Y (vertical) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
.py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }

/* Individual sides */
.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pt-16 { padding-top: var(--space-16) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pb-12 { padding-bottom: var(--space-12) !important; }
.pb-16 { padding-bottom: var(--space-16) !important; }

/* ===========================
   NEGATIVE MARGINS
   =========================== */

.-mt-2 { margin-top: calc(-1 * var(--space-2)) !important; }
.-mt-4 { margin-top: calc(-1 * var(--space-4)) !important; }
.-mt-6 { margin-top: calc(-1 * var(--space-6)) !important; }
.-mt-8 { margin-top: calc(-1 * var(--space-8)) !important; }

.-mb-2 { margin-bottom: calc(-1 * var(--space-2)) !important; }
.-mb-4 { margin-bottom: calc(-1 * var(--space-4)) !important; }
.-mb-6 { margin-bottom: calc(-1 * var(--space-6)) !important; }
.-mb-8 { margin-bottom: calc(-1 * var(--space-8)) !important; }

.-ml-2 { margin-left: calc(-1 * var(--space-2)) !important; }
.-ml-4 { margin-left: calc(-1 * var(--space-4)) !important; }

.-mr-2 { margin-right: calc(-1 * var(--space-2)) !important; }
.-mr-4 { margin-right: calc(-1 * var(--space-4)) !important; }

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

@media (max-width: 768px) {
    /* Reducir spacing en mobile */
    .m-md-0 { margin: 0 !important; }
    .m-md-2 { margin: var(--space-2) !important; }
    .m-md-4 { margin: var(--space-4) !important; }
    
    .p-md-0 { padding: 0 !important; }
    .p-md-2 { padding: var(--space-2) !important; }
    .p-md-4 { padding: var(--space-4) !important; }
    
    .mt-md-0 { margin-top: 0 !important; }
    .mb-md-0 { margin-bottom: 0 !important; }
    
    .pt-md-0 { padding-top: 0 !important; }
    .pb-md-0 { padding-bottom: 0 !important; }
}