/* ==========================================================================
03-UTILITIES.CSS - Clases Utilitarias Globales
========================================================================== */

/* Alineación de texto */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* Tipografía */
.font-bold { font-weight: bold; }
.font-mono { font-family: var(--font-mono); }
.text-muted {
    color: var(--gray-400);
    font-style: italic;
    font-size: 12px;
}

/* Truncamiento de texto */
.text-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-sm {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flexbox utilities */
.d-flex { display: flex; }
.gap-5 { gap: 5px; }

/* Ocultar elementos */
.hidden { display: none !important; }

/* Fila clicable (usada en tablas) */
.clickable-row { cursor: pointer; }

/* ==========================================================================
UTILIDADES DE ESPACIADO (MARGEN INFERIOR)
========================================================================== */
.mb-sm {
    margin-bottom: var(--space-2); /* 0.5rem (8px) */
}

.mb-md {
    margin-bottom: var(--space-3); /* 0.75rem (12px) */
}

.mb-lg {
    margin-bottom: var(--space-4); /* 1rem (16px) */
}

.mb-xl {
    margin-bottom: var(--space-5); /* 1.25rem (20px) */
}

/* Bonus: Si en el futuro necesitas margen superior o vertical */
.mt-sm { margin-top: var(--space-2); }
.mt-md { margin-top: var(--space-3); }
.mt-lg { margin-top: var(--space-4); }
.mt-xl { margin-top: var(--space-5); }

.my-sm { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-md { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-lg { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-xl { margin-top: var(--space-5); margin-bottom: var(--space-5); }


/* Utilities in progress  */
/* Utilities  */
.mt-2{
    margin-top: calc(var(--spacing) * 2);
}