/* ============================
   Display Utilities
============================ */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }
.d-none { display: none; }

/* ============================
   Flexbox Utilities
============================ */
/* Scroll */
.no-scroll { overflow: hidden; }

/* Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Alignment (justify-content + align-items) */
.flex-center { justify-content: center; align-items: center; }
.flex-start { justify-content: flex-start; align-items: flex-start; }
.flex-end { justify-content: flex-end; align-items: flex-end; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-around { justify-content: space-around; align-items: center; }
.flex-evenly { justify-content: space-evenly; align-items: center; }

/* Gap (general) */
.flex-gap-xxs { gap: 0.125rem; } /* 2px */
.flex-gap-xs { gap: 0.25rem; }   /* 4px */
.flex-gap-sm { gap: 0.5rem; }    /* 8px */
.flex-gap-lsm { gap: 0.75rem; }  /* 12px */
.flex-gap-md { gap: 1rem; }      /* 16px */
.flex-gap-md2 { gap: 1.5rem; }   /* 24px */
.flex-gap-lg { gap: 2rem; }      /* 32px */
.flex-gap-xlg { gap: 3rem; }     /* 48px */

/* Row-gap específico */
.flex-row-gap-xxs { row-gap: 0.125rem; }
.flex-row-gap-xs { row-gap: 0.25rem; }
.flex-row-gap-sm { row-gap: 0.5rem; }
.flex-row-gap-lsm { row-gap: 0.75rem; }
.flex-row-gap-md { row-gap: 1rem; }
.flex-row-gap-md2 { row-gap: 1.5rem; }
.flex-row-gap-lg { row-gap: 2rem; }
.flex-row-gap-xlg { row-gap: 3rem; }

/* Column-gap específico */
.flex-col-gap-xxs { column-gap: 0.125rem; }
.flex-col-gap-xs { column-gap: 0.25rem; }
.flex-col-gap-sm { column-gap: 0.5rem; }
.flex-col-gap-lsm { column-gap: 0.75rem; }
.flex-col-gap-md { column-gap: 1rem; }
.flex-col-gap-md2 { column-gap: 1.5rem; }
.flex-col-gap-lg { column-gap: 2rem; }
.flex-col-gap-xlg { column-gap: 3rem; }

/* Flex shorthand (grow shrink basis) */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Flex grow */
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }

/* Flex shrink */
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ============================
   Alignment Helpers
============================ */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

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

/* ============================
   Grid Utilities
============================ */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid-rows-1 { grid-template-rows: repeat(1, 1fr); }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
.grid-rows-3 { grid-template-rows: repeat(3, 1fr); }
.grid-rows-4 { grid-template-rows: repeat(4, 1fr); }

.grid-gap-xs { gap: 0.25rem; }
.grid-gap-sm { gap: 0.5rem; }
.grid-gap-md { gap: 1rem; }
.grid-gap-lg { gap: 2rem; }

/* ============================
   Position Utilities
============================ */

/* Tipos de posicionamiento */
.pos-static   { position: static; }
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-fixed    { position: fixed; }
.pos-sticky   { position: sticky; }

/* Top (px/rem/%) */
.top-0         { top: 0; }
.top-50        { top: 50%; }
.top-100       { top: 100%; }
.top-0-25rem   { top: 0.25rem; }
.top-0-5rem    { top: 0.5rem; }
.top-1rem      { top: 1rem; }
.top-2rem      { top: 2rem; }

/* Right (px/rem/%) */
.right-0       { right: 0; }
.right-50      { right: 50%; }
.right-100     { right: 100%; }
.right-0-25rem { right: 0.25rem; }
.right-0-5rem  { right: 0.5rem; }
.right-1rem    { right: 1rem; }
.right-2rem    { right: 2rem; }

/* Bottom (px/rem/%) */
.bottom-0       { bottom: 0; }
.bottom-50      { bottom: 50%; }
.bottom-100     { bottom: 100%; }
.bottom-0-25rem { bottom: 0.25rem; }
.bottom-0-5rem  { bottom: 0.5rem; }
.bottom-1rem    { bottom: 1rem; }
.bottom-2rem    { bottom: 2rem; }

/* Left (px/rem/%) */
.left-0       { left: 0; }
.left-50      { left: 50%; }
.left-100     { left: 100%; }
.left-0-25rem { left: 0.25rem; }
.left-0-5rem  { left: 0.5rem; }
.left-1rem    { left: 1rem; }
.left-2rem    { left: 2rem; }

/* Centering helpers */
.pos-center-xy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.pos-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================
   Width Utilities (anchos relativos)
============================ */

/* Anchos porcentuales */
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33.3333%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66.6667%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

/* Anchos basados en rem */
.w-0-5rem  { width: 0.5rem; }
.w-1rem    { width: 1rem; }
.w-1-5rem  { width: 1.5rem; }
.w-2rem    { width: 2rem; }
.w-2-5rem  { width: 2.5rem; }
.w-3rem    { width: 3rem; }
.w-3-5rem  { width: 3.5rem; }
.w-4rem    { width: 4rem; }

/* Anchos automáticos y máximos */
.w-auto { width: auto; }
.w-max { width: max-content; }
.w-min { width: min-content; }
.w-full { width: 100%; } /* alias para w-100 */

/* ============================
Height Utilities (altos relativos)
============================ */

/* Altos porcentuales */
.h-10 { height: 10%; }
.h-20 { height: 20%; }
.h-25 { height: 25%; }
.h-30 { height: 30%; }
.h-33 { height: 33.3333%; }
.h-40 { height: 40%; }
.h-50 { height: 50%; }
.h-60 { height: 60%; }
.h-66 { height: 66.6667%; }
.h-70 { height: 70%; }
.h-75 { height: 75%; }
.h-80 { height: 80%; }
.h-90 { height: 90%; }
.h-100 { height: 100%; }

/* Altos basados en rem */
.h-0-5rem  { height: 0.5rem; }
.h-1rem    { height: 1rem; }
.h-1-5rem  { height: 1.5rem; }
.h-2rem    { height: 2rem; }
.h-2-5rem  { height: 2.5rem; }
.h-3rem    { height: 3rem; }
.h-3-5rem  { height: 3.5rem; }
.h-4rem    { height: 4rem; }

/* Altos automáticos y máximos */
.h-auto { height: auto; }
.h-fit { height: fit-content; }
.h-max { height: max-content; }
.h-min { height: min-content; }
.h-full { height: 100%; } /* alias para h-100 */

/* ============================
   Border Radius Utilities
============================ */

/* Radios pequeños a grandes */
.round-xs { border-radius: 0.125rem; }  /* 2px */
.round-sm { border-radius: 0.25rem; }   /* 4px */
.round-md { border-radius: 0.5rem; }    /* 8px */
.round-lg { border-radius: 1rem; }      /* 16px */
.round-xl { border-radius: 2rem; }      /* 32px */
.round-full { border-radius: 9999px; }  /* círculo completo */

/* Radios específicos por esquina */
.round-top-left { border-top-left-radius: 0.5rem; }
.round-top-right { border-top-right-radius: 0.5rem; }
.round-bottom-left { border-bottom-left-radius: 0.5rem; }
.round-bottom-right { border-bottom-right-radius: 0.5rem; }

/* ============================
   Padding Utilities (relativos)
============================ */

/* Padding general */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }  /* 4px aprox */
.p-2 { padding: 0.5rem; }   /* 8px */
.p-3 { padding: 1rem; }     /* 16px */
.p-4 { padding: 1.5rem; }   /* 24px */
.p-5 { padding: 2rem; }     /* 32px */

/* Padding por eje */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 2rem; padding-right: 2rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 2rem; padding-bottom: 2rem; }

/* Padding por lado individual */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 2rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 2rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 2rem; }

/* ============================
   Margin Utilities (relativos)
============================ */

/* Margin general */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }  /* 4px aprox */
.m-2 { margin: 0.5rem; }   /* 8px */
.m-3 { margin: 1rem; }     /* 16px */
.m-4 { margin: 1.5rem; }   /* 24px */
.m-5 { margin: 2rem; }     /* 32px */

/* Margin por eje */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 2rem; margin-right: 2rem; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 2rem; margin-bottom: 2rem; }

/* Margin por lado individual */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 2rem; }

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

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 2rem; }


/* ============================
   Background Utilities
============================ */

.bg-default { background-color: var(--bg-default); }
.bg-link    { background-color: var(--bg-link); }

/* ============================
   Cursor Utilities
============================ */

.pointer { cursor: pointer; }

/* ============================
Typography Utilities
============================ */

/* Font size (rem) */
.text-xs { font-size: 0.75rem; }   /* 12px */
.text-sm { font-size: 0.875rem; }  /* 14px */
.text-base { font-size: 1rem; }    /* 16px */
.text-lg { font-size: 1.125rem; }  /* 18px */
.text-xl { font-size: 1.25rem; }   /* 20px */
.text-2xl { font-size: 1.5rem; }   /* 24px */
.text-3xl { font-size: 1.875rem; } /* 30px */
.text-4xl { font-size: 2.25rem; }  /* 36px */
.text-5xl { font-size: 3rem; }     /* 48px */

/* Font weight */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* Font style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Line height */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

.leading-3xs { line-height: 0.75rem; }   /* 12px aprox */
.leading-2xs { line-height: 0.875rem; }  /* 14px aprox */
.leading-xs  { line-height: 1rem; }      /* 16px */
.leading-sm  { line-height: 1.125em; }  /* 18px */
.leading-md  { line-height: 1.25em; }   /* 20px */
.leading-lg  { line-height: 1.375em; }  /* 22px */
.leading-xl  { line-height: 1.5em; }    /* 24px */
.leading-2xl { line-height: 1.625em; }  /* 26px aprox */
.leading-3xl { line-height: 1.75em; }   /* 28px aprox */
.leading-4xl { line-height: 2em; }      /* 32px */
.leading-5xl { line-height: 2.25em; }   /* 36px */
.leading-6xl { line-height: 2.5em; }    /* 40px */

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Letter spacing */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text decoration */
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text decoration style */
.decoration-solid { text-decoration-style: solid; }
.decoration-double { text-decoration-style: double; }
.decoration-dotted { text-decoration-style: dotted; }
.decoration-dashed { text-decoration-style: dashed; }
.decoration-wavy { text-decoration-style: wavy; }

/* Text decoration thickness */
.decoration-auto { text-decoration-thickness: auto; }
.decoration-from-font { text-decoration-thickness: from-font; }
.decoration-1 { text-decoration-thickness: 1px; }
.decoration-2 { text-decoration-thickness: 2px; }
.decoration-4 { text-decoration-thickness: 4px; }

/* Text decoration color */
.decoration-current { text-decoration-color: currentColor; }
.decoration-default { text-decoration-color: var(--text-default); }
.decoration-secondary { text-decoration-color: var(--text-secondary); }
.decoration-tertiary { text-decoration-color: var(--text-tertiary); }

/* ============================
   Color Utilities (textos)
============================ */
.text-default   { color: var(--text-default); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }