/* ============================================
   MSC Ingenierías y Redes SAS — Utilities
   ============================================ */

/* ── Display ── */
.u-block        { display: block; }
.u-inline       { display: inline; }
.u-inline-block  { display: inline-block; }
.u-flex         { display: flex; }
.u-inline-flex   { display: inline-flex; }
.u-grid         { display: grid; }
.u-hidden       { display: none; }

/* ── Flex ── */
.u-items-center     { align-items: center; }
.u-items-start      { align-items: flex-start; }
.u-items-end        { align-items: flex-end; }
.u-justify-center   { justify-content: center; }
.u-justify-between  { justify-content: space-between; }
.u-justify-end      { justify-content: flex-end; }
.u-flex-col         { flex-direction: column; }
.u-flex-wrap        { flex-wrap: wrap; }
.u-gap-2            { gap: var(--space-2); }
.u-gap-4            { gap: var(--space-4); }
.u-gap-6            { gap: var(--space-6); }
.u-gap-8            { gap: var(--space-8); }

/* ── Text ── */
.u-text-center   { text-align: center; }
.u-text-left     { text-align: left; }
.u-text-right    { text-align: right; }
.u-uppercase     { text-transform: uppercase; }
.u-bold          { font-weight: var(--weight-bold); }
.u-semibold      { font-weight: var(--weight-semibold); }
.u-medium        { font-weight: var(--weight-medium); }
.u-italic        { font-style: italic; }
.u-underline     { text-decoration: underline; }
.u-no-underline  { text-decoration: none; }
.u-truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Margin ── */
.u-m-0    { margin: 0; }
.u-mt-0   { margin-top: 0; }
.u-mt-2   { margin-top: var(--space-2); }
.u-mt-4   { margin-top: var(--space-4); }
.u-mt-6   { margin-top: var(--space-6); }
.u-mt-8   { margin-top: var(--space-8); }
.u-mt-10  { margin-top: var(--space-10); }
.u-mt-12  { margin-top: var(--space-12); }
.u-mt-16  { margin-top: var(--space-16); }
.u-mb-0   { margin-bottom: 0; }
.u-mb-2   { margin-bottom: var(--space-2); }
.u-mb-4   { margin-bottom: var(--space-4); }
.u-mb-6   { margin-bottom: var(--space-6); }
.u-mb-8   { margin-bottom: var(--space-8); }
.u-mb-10  { margin-bottom: var(--space-10); }
.u-mb-12  { margin-bottom: var(--space-12); }
.u-mb-16  { margin-bottom: var(--space-16); }
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* ── Padding ── */
.u-p-0    { padding: 0; }
.u-p-4    { padding: var(--space-4); }
.u-p-6    { padding: var(--space-6); }
.u-p-8    { padding: var(--space-8); }
.u-py-4   { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.u-py-8   { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.u-py-12  { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* ── Width ── */
.u-w-full       { width: 100%; }
.u-max-w-sm     { max-width: 640px; }
.u-max-w-md     { max-width: 768px; }
.u-max-w-lg     { max-width: 1024px; }
.u-max-w-xl     { max-width: 1280px; }

/* ── Visibility ── */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .u-hidden-mobile { display: none; }
}

@media (min-width: 769px) {
  .u-hidden-desktop { display: none; }
}

/* ── Backgrounds ── */
.u-bg-white     { background-color: var(--color-white); }
.u-bg-gray      { background-color: var(--color-gray-bg); }
.u-bg-navy      { background-color: var(--color-navy); }
.u-bg-black     { background-color: var(--color-black); }
.u-bg-red       { background-color: var(--color-red); }

/* ── Border radius ── */
.u-rounded-sm   { border-radius: var(--radius-sm); }
.u-rounded-md   { border-radius: var(--radius-md); }
.u-rounded-lg   { border-radius: var(--radius-lg); }
.u-rounded-xl   { border-radius: var(--radius-xl); }
.u-rounded-full { border-radius: var(--radius-full); }

/* ── Overflow ── */
.u-overflow-hidden { overflow: hidden; }
.u-relative        { position: relative; }
.u-absolute        { position: absolute; }
.u-fixed           { position: fixed; }
.u-inset-0         { inset: 0; }