src/scss/modules/_utilities.scss
/**
 * Generador de variables tipográficas 
 * ([nombre], [valor]) 
 */
$configTypeWeights: (
    ("thin", 100),
    ("extra-light", 200),
    ("light", 300),
    ("normal", 400),
    ("medium", 500),
    ("semibold", 600),
    ("bold", 700),
    ("extra-bold", 800),
    ("black", 900)
);

@each $name, $value in $configTypeWeights {
    .fw-#{$name} {
        font-weight: #{$value} !important;
    }
}


/**
 * Generador de espacios gap
 * ([nombre], [valor]) 
 */
$gapSpacer : 1;
$configGap: (
    (0, 0),
    (1, $gapSpacer * .25),
    (2, $gapSpacer * .5),
    (3, $gapSpacer),
    (4, $gapSpacer * 1.5),
    (5, $gapSpacer * 3),
);


@each $name, $value in $configGap {
    .gap-#{$name} {
        gap: #{$value}rem;
    }
}


/**
 * Generador de espacios 
 * ([nombre], [valor]) 
 */
$configSpaces: (
    (auto, auto),
    (0, 0px),
    ("xs", 0.25rem),
    ("05", 0.5rem),
    (1, 1rem),
    (2, 1.5rem),
    (3, 3rem),
    (4, 4rem)
);

@each $name, $value in $configSpaces {
    @if $name !=auto {
        .p-#{$name} {
            padding: #{$value} !important;
        }

        .p-t-#{$name} {
            padding-top: #{$value} !important;
        }

        .p-r-#{$name} {
            padding-right: #{$value} !important;
        }

        .p-b-#{$name} {
            padding-bottom: #{$value} !important;
        }

        .p-l-#{$name} {
            padding-left: #{$value} !important;
        }

        .p-x-#{$name} {
            padding-right: #{$value} !important;
            padding-left: #{$value} !important;
        }

        .p-y-#{$name} {
            padding-top: #{$value} !important;
            padding-bottom: #{$value} !important;
        }
    }

    .m-a-#{$name},
    .m-#{$name} {
        margin: #{$value} !important;
    }

    .m-t-#{$name} {
        margin-top: #{$value} !important;
    }

    .m-r-#{$name} {
        margin-right: #{$value} !important;
    }

    .m-b-#{$name} {
        margin-bottom: #{$value} !important;
    }

    .m-l-#{$name} {
        margin-left: #{$value} !important;
    }

    .m-x-#{$name} {
        margin-right: #{$value} !important;
        margin-left: #{$value} !important;
    }

    .m-y-#{$name} {
        margin-top: #{$value} !important;
        margin-bottom: #{$value} !important;
    }
}

.pos-f-t {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.text-justify {
    text-align: justify !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-uppercase {
    text-transform: uppercase;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.d-flex {
    display: flex;
}

.font-sans-serif {
    font-family: $font-family-sans-serif;
}

.font-serif {
    font-family: $font-family-serif;
}

@media (max-width: 575.98px) {
    .text-xs-left {
        text-align: left !important;
    }

    .text-xs-right {
        text-align: right !important;
    }

    .text-xs-center {
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    .text-sm-left {
        text-align: left !important;
    }

    .text-sm-right {
        text-align: right !important;
    }

    .text-sm-center {
        text-align: center !important;
    }
}

@media (min-width: 992px) {
    .text-md-left {
        text-align: left !important;
    }

    .text-md-right {
        text-align: right !important;
    }

    .text-md-center {
        text-align: center !important;
    }
}

@media (min-width: 1200px) {
    .text-lg-left {
        text-align: left !important;
    }

    .text-lg-right {
        text-align: right !important;
    }

    .text-lg-center {
        text-align: center !important;
    }
}

.img .img-rounded {
    border-radius: 10px;
}

.panel-heading {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

pre {
    border: solid 1px #ddd;
}

// Grupo de atajos
.atajos-agrupados .h2 {
    margin-bottom: 1.35em;
    margin-top: 2.25em;
}

.atajos-agrupados .lead {
    margin-bottom: 0.26em;
}

// Misma altura del contenedor de atajos
.atajos-agrupados {
    display: flex;
    flex-wrap: wrap;
}
