/* ============================================================
   UTILITIES — clases atómicas y helpers globales
   ============================================================ */

/* ===== Display ===== */
.u-flex           { display: flex; }
.u-inline-flex    { display: inline-flex; }
.u-block          { display: block; }
.u-hidden         { display: none !important; }

/* ===== Flex helpers ===== */
.u-flex-center    { display: flex; align-items: center; justify-content: center; }
.u-flex-between   { display: flex; justify-content: space-between; }
.u-flex-column    { display: flex; flex-direction: column; }

/* ===== Text ===== */
.u-text-center    { text-align: center; }
.u-text-right     { text-align: right; }
.u-uppercase      { text-transform: uppercase; }
.u-bold           { font-weight: 700; }

/* ===== Spacing ===== */
/* Margen */
.u-m-0            { margin: 0 !important; }
.u-mt-1           { margin-top: 0.5rem; }
.u-mt-2           { margin-top: 1rem; }
.u-mt-3           { margin-top: 1.5rem; }
.u-mb-1           { margin-bottom: 0.5rem; }
.u-mb-2           { margin-bottom: 1rem; }
.u-mb-3           { margin-bottom: 1.5rem; }

/* Padding */
.u-p-0            { padding: 0 !important; }
.u-px-1           { padding-left: 0.5rem; padding-right: 0.5rem; }
.u-px-2           { padding-left: 1rem; padding-right: 1rem; }
.u-px-3           { padding-left: 1.5rem; padding-right: 1.5rem; }
.u-py-1           { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.u-py-2           { padding-top: 1rem; padding-bottom: 1rem; }
.u-py-3           { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ===== Width ===== */
.u-max-content    { max-width: max-content; }
.u-w-full         { width: 100%; }
.u-max-w-600      { max-width: 600px; }
.u-max-w-800      { max-width: 800px; }
.u-max-w-1200     { max-width: 1200px; }

/* ===== Visibility ===== */
@media (max-width: 768px) {
  .u-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .u-hide-desktop { display: none !important; }
}

/* ===== Colors =====
   (Basados en tokens.css)
*/
.u-text-primary     { color: var(--primary-600); }
.u-text-secondary   { color: var(--primary-500); }
.u-bg-primary       { background: var(--primary-600); color: #fff; }

/* ===== Position helpers ===== */
.u-relative       { position: relative; }
.u-absolute       { position: absolute; }

/* ===== Borders ===== */
.u-rounded        { border-radius: 6px; }
.u-rounded-lg     { border-radius: 12px; }

/* ===== Shadows ===== */
.u-shadow-sm      { box-shadow: var(--shadow-sm); }
.u-shadow-md      { box-shadow: var(--shadow-md); }
.u-shadow-lg      { box-shadow: var(--shadow-lg); }