/* ============================================================
   DESIGN SYSTEM — UTILITIES
   Clases utilitarias atómicas para layouts rápidos sin escribir CSS.
   Inspiradas en Tailwind pero limitadas a lo esencial.

   Prefijo ds-u- (utility) para distinguir de componentes.
   ============================================================ */


/* ============================================================
   DISPLAY
   ============================================================ */

.ds-u-hidden        { display: none !important; }
.ds-u-block         { display: block; }
.ds-u-inline        { display: inline; }
.ds-u-inline-block  { display: inline-block; }
.ds-u-flex          { display: flex; }
.ds-u-inline-flex   { display: inline-flex; }
.ds-u-grid          { display: grid; }


/* ============================================================
   FLEX
   ============================================================ */

.ds-u-flex-col      { flex-direction: column; }
.ds-u-flex-row      { flex-direction: row; }
.ds-u-flex-wrap     { flex-wrap: wrap; }
.ds-u-flex-1        { flex: 1 1 0%; }
.ds-u-flex-auto     { flex: 1 1 auto; }

.ds-u-items-start    { align-items: flex-start; }
.ds-u-items-center   { align-items: center; }
.ds-u-items-end      { align-items: flex-end; }
.ds-u-items-stretch  { align-items: stretch; }

.ds-u-justify-start    { justify-content: flex-start; }
.ds-u-justify-center   { justify-content: center; }
.ds-u-justify-end      { justify-content: flex-end; }
.ds-u-justify-between  { justify-content: space-between; }
.ds-u-justify-around   { justify-content: space-around; }


/* ============================================================
   GAP (entre flex/grid items)
   ============================================================ */

.ds-u-gap-1  { gap: var(--space-1); }
.ds-u-gap-2  { gap: var(--space-2); }
.ds-u-gap-3  { gap: var(--space-3); }
.ds-u-gap-4  { gap: var(--space-4); }
.ds-u-gap-5  { gap: var(--space-5); }
.ds-u-gap-6  { gap: var(--space-6); }
.ds-u-gap-8  { gap: var(--space-8); }


/* ============================================================
   MARGIN / PADDING
   Formato: ds-u-{prop}{lado}-{valor}
   Ej: ds-u-mt-4 = margin-top 16px
   ============================================================ */

/* --- Margen total --- */
.ds-u-m-0  { margin: 0; }
.ds-u-m-1  { margin: var(--space-1); }
.ds-u-m-2  { margin: var(--space-2); }
.ds-u-m-3  { margin: var(--space-3); }
.ds-u-m-4  { margin: var(--space-4); }
.ds-u-m-5  { margin: var(--space-5); }
.ds-u-m-6  { margin: var(--space-6); }
.ds-u-m-8  { margin: var(--space-8); }
.ds-u-m-auto { margin: auto; }

/* --- Margen top --- */
.ds-u-mt-0  { margin-top: 0; }
.ds-u-mt-1  { margin-top: var(--space-1); }
.ds-u-mt-2  { margin-top: var(--space-2); }
.ds-u-mt-3  { margin-top: var(--space-3); }
.ds-u-mt-4  { margin-top: var(--space-4); }
.ds-u-mt-5  { margin-top: var(--space-5); }
.ds-u-mt-6  { margin-top: var(--space-6); }
.ds-u-mt-8  { margin-top: var(--space-8); }

/* --- Margen bottom --- */
.ds-u-mb-0  { margin-bottom: 0; }
.ds-u-mb-1  { margin-bottom: var(--space-1); }
.ds-u-mb-2  { margin-bottom: var(--space-2); }
.ds-u-mb-3  { margin-bottom: var(--space-3); }
.ds-u-mb-4  { margin-bottom: var(--space-4); }
.ds-u-mb-5  { margin-bottom: var(--space-5); }
.ds-u-mb-6  { margin-bottom: var(--space-6); }
.ds-u-mb-8  { margin-bottom: var(--space-8); }

/* --- Margen horizontal --- */
.ds-u-mx-0    { margin-left: 0; margin-right: 0; }
.ds-u-mx-auto { margin-left: auto; margin-right: auto; }

/* --- Padding total --- */
.ds-u-p-0  { padding: 0; }
.ds-u-p-1  { padding: var(--space-1); }
.ds-u-p-2  { padding: var(--space-2); }
.ds-u-p-3  { padding: var(--space-3); }
.ds-u-p-4  { padding: var(--space-4); }
.ds-u-p-5  { padding: var(--space-5); }
.ds-u-p-6  { padding: var(--space-6); }
.ds-u-p-8  { padding: var(--space-8); }

/* --- Padding direccionales (los más usados) --- */
.ds-u-pt-4  { padding-top: var(--space-4); }
.ds-u-pb-4  { padding-bottom: var(--space-4); }
.ds-u-px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.ds-u-py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }


/* ============================================================
   TEXTO
   ============================================================ */

.ds-u-text-xs    { font-size: var(--text-xs); }
.ds-u-text-sm    { font-size: var(--text-sm); }
.ds-u-text-base  { font-size: var(--text-base); }
.ds-u-text-md    { font-size: var(--text-md); }
.ds-u-text-lg    { font-size: var(--text-lg); }
.ds-u-text-xl    { font-size: var(--text-xl); }
.ds-u-text-2xl   { font-size: var(--text-2xl); }
.ds-u-text-3xl   { font-size: var(--text-3xl); }

.ds-u-font-regular   { font-weight: var(--font-regular); }
.ds-u-font-medium    { font-weight: var(--font-medium); }
.ds-u-font-semibold  { font-weight: var(--font-semibold); }
.ds-u-font-bold      { font-weight: var(--font-bold); }

.ds-u-text-left    { text-align: left; }
.ds-u-text-center  { text-align: center; }
.ds-u-text-right   { text-align: right; }

.ds-u-text-primary    { color: var(--text-primary); }
.ds-u-text-secondary  { color: var(--text-secondary); }
.ds-u-text-muted      { color: var(--text-muted); }
.ds-u-text-accent     { color: var(--text-accent); }
.ds-u-text-success    { color: var(--text-success); }
.ds-u-text-danger     { color: var(--text-danger); }
.ds-u-text-warning    { color: var(--text-warning); }

.ds-u-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-u-text-mono { font-family: var(--font-mono); }


/* ============================================================
   FONDOS
   ============================================================ */

.ds-u-bg-page     { background-color: var(--bg-page); }
.ds-u-bg-card     { background-color: var(--bg-card); }
.ds-u-bg-subtle   { background-color: var(--bg-subtle); }
.ds-u-bg-accent-soft { background-color: var(--accent-soft); }


/* ============================================================
   BORDES
   ============================================================ */

.ds-u-border        { border: 1px solid var(--border); }
.ds-u-border-top    { border-top: 1px solid var(--border); }
.ds-u-border-bottom { border-bottom: 1px solid var(--border); }
.ds-u-border-none   { border: none; }


/* ============================================================
   RADIOS
   ============================================================ */

.ds-u-rounded-sm    { border-radius: var(--radius-sm); }
.ds-u-rounded-md    { border-radius: var(--radius-md); }
.ds-u-rounded-lg    { border-radius: var(--radius-lg); }
.ds-u-rounded-xl    { border-radius: var(--radius-xl); }
.ds-u-rounded-full  { border-radius: var(--radius-full); }
.ds-u-rounded-none  { border-radius: 0; }


/* ============================================================
   ANCHO / ALTO
   ============================================================ */

.ds-u-w-full    { width: 100%; }
.ds-u-w-auto    { width: auto; }
.ds-u-w-fit     { width: fit-content; }

.ds-u-h-full    { height: 100%; }
.ds-u-h-screen  { height: 100vh; }
.ds-u-h-auto    { height: auto; }

.ds-u-min-h-screen { min-height: 100vh; }


/* ============================================================
   POSICIÓN
   ============================================================ */

.ds-u-relative  { position: relative; }
.ds-u-absolute  { position: absolute; }
.ds-u-fixed     { position: fixed; }
.ds-u-sticky    { position: sticky; }


/* ============================================================
   SOMBRA
   ============================================================ */

.ds-u-shadow      { box-shadow: var(--shadow); }
.ds-u-shadow-none { box-shadow: none; }


/* ============================================================
   CURSOR
   ============================================================ */

.ds-u-cursor-pointer  { cursor: pointer; }
.ds-u-cursor-disabled { cursor: not-allowed; }


/* ============================================================
   CONTAINER (centrado con max-width)
   ============================================================ */

.ds-u-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.ds-u-container--sm { max-width: 640px; }
.ds-u-container--md { max-width: 840px; }
.ds-u-container--lg { max-width: 1200px; }


/* ============================================================
   RESPONSIVE HELPERS (mobile-first)
   ============================================================ */

@media (max-width: 640px) {
    .ds-u-hidden-mobile { display: none !important; }
}

@media (min-width: 641px) {
    .ds-u-hidden-desktop { display: none !important; }
}