/* ============================================================
   utilities.css — Clases de ayuda rápida (utility-first)
   Clinidental

   REGLAS DE USO:
   - Todas llevan !important por diseño (son overrides finales)
   - No duplicar clases que ya existen en base.css
   - Este archivo se carga al final: sus clases tienen prioridad
   ============================================================ */


/* ── 1. MARGIN — escala completa ────────────────────────────── */

/* Margin top */
.mt-0   { margin-top: 0                  !important; }
.mt-xs  { margin-top: var(--space-xs)    !important; }
.mt-sm  { margin-top: var(--space-sm)    !important; }
.mt-md  { margin-top: var(--space-md)    !important; }
.mt-lg  { margin-top: var(--space-lg)    !important; }
.mt-xl  { margin-top: var(--space-xl)    !important; }
.mt-auto { margin-top: auto             !important; }

/* Margin bottom */
.mb-0   { margin-bottom: 0              !important; }
.mb-xs  { margin-bottom: var(--space-xs) !important; }
.mb-sm  { margin-bottom: var(--space-sm) !important; }
.mb-md  { margin-bottom: var(--space-md) !important; }
.mb-lg  { margin-bottom: var(--space-lg) !important; }
.mb-xl  { margin-bottom: var(--space-xl) !important; }
.mb-auto { margin-bottom: auto          !important; }

/* Margin left / right */
.ml-0   { margin-left: 0               !important; }
.ml-sm  { margin-left: var(--space-sm)  !important; }
.ml-md  { margin-left: var(--space-md)  !important; }
.ml-auto { margin-left: auto           !important; }

.mr-0   { margin-right: 0              !important; }
.mr-sm  { margin-right: var(--space-sm) !important; }
.mr-md  { margin-right: var(--space-md) !important; }
.mr-auto { margin-right: auto          !important; }

/* Margin en ambos ejes */
.mx-0   { margin-inline: 0             !important; }
.mx-sm  { margin-inline: var(--space-sm) !important; }
.mx-md  { margin-inline: var(--space-md) !important; }
.mx-auto { margin-inline: auto         !important; }

.my-0   { margin-block: 0              !important; }
.my-sm  { margin-block: var(--space-sm) !important; }
.my-md  { margin-block: var(--space-md) !important; }
.my-lg  { margin-block: var(--space-lg) !important; }


/* ── 2. PADDING — escala completa ───────────────────────────── */

/* Padding top */
.pt-0   { padding-top: 0               !important; }
.pt-xs  { padding-top: var(--space-xs)  !important; }
.pt-sm  { padding-top: var(--space-sm)  !important; }
.pt-md  { padding-top: var(--space-md)  !important; }
.pt-lg  { padding-top: var(--space-lg)  !important; }
.pt-xl  { padding-top: var(--space-xl)  !important; }

/* Padding bottom */
.pb-0   { padding-bottom: 0            !important; }
.pb-xs  { padding-bottom: var(--space-xs) !important; }
.pb-sm  { padding-bottom: var(--space-sm) !important; }
.pb-md  { padding-bottom: var(--space-md) !important; }
.pb-lg  { padding-bottom: var(--space-lg) !important; }
.pb-xl  { padding-bottom: var(--space-xl) !important; }

/* Padding left / right */
.pl-sm  { padding-left: var(--space-sm)  !important; }
.pl-md  { padding-left: var(--space-md)  !important; }
.pr-sm  { padding-right: var(--space-sm) !important; }
.pr-md  { padding-right: var(--space-md) !important; }

/* Padding en todos los lados */
.p-0    { padding: 0                    !important; }
.p-xs   { padding: var(--space-xs)      !important; }
.p-sm   { padding: var(--space-sm)      !important; }
.p-md   { padding: var(--space-md)      !important; }
.p-lg   { padding: var(--space-lg)      !important; }

/* Padding en ambos ejes */
.px-0   { padding-inline: 0             !important; }
.px-sm  { padding-inline: var(--space-sm) !important; }
.px-md  { padding-inline: var(--space-md) !important; }

.py-0   { padding-block: 0              !important; }
.py-sm  { padding-block: var(--space-sm) !important; }
.py-md  { padding-block: var(--space-md) !important; }
.py-lg  { padding-block: var(--space-lg) !important; }


/* ── 3. GAP — para grids y flexbox ─────────────────────────── */

.gap-xs  { gap: var(--space-xs)  !important; }
.gap-sm  { gap: var(--space-sm)  !important; }
.gap-md  { gap: var(--space-md)  !important; }
.gap-lg  { gap: var(--space-lg)  !important; }


/* ── 4. DISPLAY ─────────────────────────────────────────────── */

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


/* ── 5. FLEXBOX ─────────────────────────────────────────────── */

.flex-row     { flex-direction: row     !important; }
.flex-col     { flex-direction: column  !important; }
.flex-wrap    { flex-wrap: wrap         !important; }
.flex-nowrap  { flex-wrap: nowrap       !important; }

.items-start    { align-items: flex-start !important; }
.items-center   { align-items: center    !important; }
.items-end      { align-items: flex-end  !important; }
.items-stretch  { align-items: stretch   !important; }

.justify-start    { justify-content: flex-start   !important; }
.justify-center   { justify-content: center       !important; }
.justify-end      { justify-content: flex-end     !important; }
.justify-between  { justify-content: space-between !important; }
.justify-around   { justify-content: space-around  !important; }

.flex-center {
    display:         flex        !important;
    align-items:     center      !important;
    justify-content: center      !important;
}

.flex-1   { flex: 1 !important; }
.flex-0   { flex: 0 !important; }
.shrink-0 { flex-shrink: 0 !important; }


/* ── 6. TIPOGRAFÍA ──────────────────────────────────────────── */

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

/* Tamaños */
.text-xs   { font-size: var(--fs-xs)   !important; }
.text-sm   { font-size: var(--fs-sm)   !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg)   !important; }
.text-xl   { font-size: var(--fs-xl)   !important; }

/* Pesos */
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* Estilos */
.italic       { font-style: italic      !important; }
.not-italic   { font-style: normal      !important; }
.uppercase    { text-transform: uppercase  !important; }
.lowercase    { text-transform: lowercase  !important; }
.capitalize   { text-transform: capitalize !important; }
.no-underline { text-decoration: none    !important; }
.underline    { text-decoration: underline !important; }

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

/* Line-height */
.leading-tight  { line-height: 1.2 !important; }
.leading-normal { line-height: 1.6 !important; }
.leading-loose  { line-height: 1.9 !important; }


/* ── 7. ANCHOS Y ALTOS ──────────────────────────────────────── */

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

/* Max-widths para contenedores internos */
.mw-xs  { max-width: 380px  !important; margin-inline: auto !important; }
.mw-sm  { max-width: 540px  !important; margin-inline: auto !important; }
.mw-md  { max-width: 720px  !important; margin-inline: auto !important; }
.mw-lg  { max-width: 960px  !important; margin-inline: auto !important; }
.mw-xl  { max-width: 1200px !important; margin-inline: auto !important; }


/* ── 8. BORDES Y RADIOS ─────────────────────────────────────── */

.rounded-none { border-radius: 0                   !important; }
.rounded-sm   { border-radius: var(--radius-sm)    !important; }
.rounded-md   { border-radius: var(--radius-md)    !important; }
.rounded-lg   { border-radius: var(--radius-lg)    !important; }
.rounded-full { border-radius: var(--radius-round) !important; }

.border       { border: 1px solid var(--color-border) !important; }
.border-none  { border: none                          !important; }
.border-top   { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }


/* ── 9. SOMBRAS ─────────────────────────────────────────────── */

.shadow-none { box-shadow: none              !important; }
.shadow-sm   { box-shadow: var(--shadow-sm)  !important; }
.shadow-md   { box-shadow: var(--shadow-md)  !important; }
.shadow-lg   { box-shadow: var(--shadow-lg)  !important; }


/* ── 10. FONDOS ─────────────────────────────────────────────── */

.bg-white   { background-color: var(--color-bg)      !important; }
.bg-light   { background-color: var(--color-light)   !important; }
.bg-primary { background-color: var(--color-primary) !important; color: #fff !important; }
.bg-dark    { background-color: var(--color-dark)    !important; color: #fff !important; }
.bg-accent  { background-color: var(--color-accent)  !important; color: #fff !important; }


/* ── 11. POSICIÓN Y OVERFLOW ────────────────────────────────── */

.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed    !important; }
.sticky   { position: sticky   !important; }

.overflow-hidden { overflow: hidden   !important; }
.overflow-auto   { overflow: auto     !important; }
.overflow-x-hidden { overflow-x: hidden !important; }


/* ── 12. VISIBILIDAD ────────────────────────────────────────── */

/* Oculto visualmente pero accesible para screen readers */
.sr-only {
    position: absolute       !important;
    width: 1px               !important;
    height: 1px              !important;
    padding: 0               !important;
    margin: -1px             !important;
    overflow: hidden         !important;
    clip: rect(0, 0, 0, 0)  !important;
    white-space: nowrap      !important;
    border-width: 0          !important;
}

/* Invisible pero ocupa espacio */
.invisible { visibility: hidden  !important; }
.visible   { visibility: visible !important; }


/* ── 13. CURSOR ─────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }


/* ── 14. HELPERS RESPONSIVOS ────────────────────────────────── */

/* Ocultar en móvil (≤ 768px) */
@media (max-width: 768px) {
    .hide-mobile  { display: none !important; }
    .show-mobile  { display: block !important; }
}

/* Ocultar en desktop (≥ 769px) */
@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
    .show-desktop { display: block !important; }
}

/* Ocultar en tablet (entre 601px y 960px) */
@media (min-width: 601px) and (max-width: 960px) {
    .hide-tablet  { display: none !important; }
}

/* Texto centrado solo en móvil */
@media (max-width: 600px) {
    .text-center-mobile { text-align: center !important; }
    .w-100-mobile       { width: 100% !important; }
    .flex-col-mobile    { flex-direction: column !important; }
}