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

/* Clases de ayuda y utilidades (margen, padding, colores, displays) */

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

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

/* Helpers de espaciado Bootstrap-like (mt-1, pb-2, etc) */
.mt-0, .my-0 { margin-top: 0 !important; }
.mt-1, .my-1 { margin-top: 0.25rem !important; }
.mt-2, .my-2 { margin-top: 0.5rem !important; }
.mt-3, .my-3 { margin-top: 1rem !important; }
.mt-4, .my-4 { margin-top: 1.5rem !important; }
.mt-5, .my-5 { margin-top: 3rem !important; }

.mb-0, .my-0 { margin-bottom: 0 !important; }
.mb-1, .my-1 { margin-bottom: 0.25rem !important; }
.mb-2, .my-2 { margin-bottom: 0.5rem !important; }
.mb-3, .my-3 { margin-bottom: 1rem !important; }
.mb-4, .my-4 { margin-bottom: 1.5rem !important; }
.mb-5, .my-5 { margin-bottom: 3rem !important; }

.pt-0, .py-0 { padding-top: 0 !important; }
.pt-1, .py-1 { padding-top: 0.25rem !important; }
.pt-2, .py-2 { padding-top: 0.5rem !important; }
.pt-3, .py-3 { padding-top: 1rem !important; }

.pb-0, .py-0 { padding-bottom: 0 !important; }
.pb-1, .py-1 { padding-bottom: 0.25rem !important; }
.pb-2, .py-2 { padding-bottom: 0.5rem !important; }
.pb-3, .py-3 { padding-bottom: 1rem !important; }

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

/* Colores de texto auxiliares */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-muted { color: var(--offi-text-muted) !important; }
.text-white { color: #fff !important; }