/* ================================================
   VORTICE CSS — Utilities
   v1.0
   ================================================
   Clases de una sola responsabilidad.
   Todos los valores de spacing vienen de tokens.css.
   Nunca hardcodear valores acá.

   ÍNDICE:
   1.  Display
   2.  Visibilidad
   3.  Overflow
   4.  Posición
   5.  Z-index
   6.  Padding
   7.  Margin
   8.  Width / Height
   9.  Tipografía — tamaño
   10. Tipografía — peso
   11. Tipografía — alineación
   12. Tipografía — color
   13. Border radius
   14. Sombra
   15. Cursor
   16. Responsive (md · lg)
   ================================================ */


/* ------------------------------------------------
   1. DISPLAY
   ------------------------------------------------ */

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


/* ------------------------------------------------
   2. VISIBILIDAD
   ------------------------------------------------ */

.visible   { visibility: visible; }
.invisible { visibility: hidden; }

/* Accesible — oculto visualmente pero legible por lectores */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  border:   0;
}


/* ------------------------------------------------
   3. OVERFLOW
   ------------------------------------------------ */

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto   { overflow-y: auto; }


/* ------------------------------------------------
   4. POSICIÓN
   ------------------------------------------------ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

.inset-0 { inset: 0; }

.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }


/* ------------------------------------------------
   5. Z-INDEX
   Escala semántica — no usar números directos.
   ------------------------------------------------ */

.z-base  { z-index: 0; }
.z-above { z-index: 10; }
.z-modal { z-index: 100; }
.z-top   { z-index: 1000; }


/* ------------------------------------------------
   6. PADDING
   Vinculado a tokens.css — si cambia el token,
   cambia la utilidad sin tocar este archivo.
   ------------------------------------------------ */

/* Todos los lados */
.p-xs  { padding: var(--space-xs); }
.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }

/* Horizontal (inline) */
.px-xs  { padding-inline: var(--space-xs); }
.px-sm  { padding-inline: var(--space-sm); }
.px-md  { padding-inline: var(--space-md); }
.px-lg  { padding-inline: var(--space-lg); }
.px-xl  { padding-inline: var(--space-xl); }

/* Vertical (block) */
.py-xs  { padding-block: var(--space-xs); }
.py-sm  { padding-block: var(--space-sm); }
.py-md  { padding-block: var(--space-md); }
.py-lg  { padding-block: var(--space-lg); }
.py-xl  { padding-block: var(--space-xl); }
.py-section { padding-block: var(--space-section); }

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

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


/* ------------------------------------------------
   7. MARGIN
   Mantener reducido — preferir gap y stack.
   ------------------------------------------------ */

.m-auto   { margin: auto; }
.mx-auto  { margin-inline: auto; }
.ml-auto  { margin-left: auto; }
.mr-auto  { margin-right: auto; }

.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }

.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }


/* ------------------------------------------------
   8. WIDTH / HEIGHT
   ------------------------------------------------ */

.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-fit     { width: fit-content; }
.w-screen  { width: 100vw; }

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


/* ------------------------------------------------
   9. TIPOGRAFÍA — TAMAÑO
   ------------------------------------------------ */

.text-xs   { font-size: var(--_size-xs); }
.text-sm   { font-size: var(--size-small); }
.text-base { font-size: var(--size-body); }
.text-md   { font-size: var(--_size-md); }
.text-lg   { font-size: var(--size-h4); }
.text-xl   { font-size: var(--size-h3); }
.text-2xl  { font-size: var(--size-h2); }
.text-3xl  { font-size: var(--size-h1); }


/* ------------------------------------------------
   10. TIPOGRAFÍA — PESO
   ------------------------------------------------ */

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


/* ------------------------------------------------
   11. TIPOGRAFÍA — ALINEACIÓN / DECORACIÓN
   ------------------------------------------------ */

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

.uppercase    { text-transform: uppercase; }
.lowercase    { text-transform: lowercase; }
.capitalize   { text-transform: capitalize; }

.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }

.leading-tight  { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-loose  { line-height: var(--leading-loose); }

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


/* ------------------------------------------------
   12. TIPOGRAFÍA — COLOR
   ------------------------------------------------ */

.text-default { color: var(--color-text); }
.text-muted   { color: var(--color-text-muted); }
.text-invert  { color: var(--color-text-invert); }


/* ------------------------------------------------
   13. BORDER RADIUS
   ------------------------------------------------ */

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


/* ------------------------------------------------
   14. SOMBRA
   ------------------------------------------------ */

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


/* ------------------------------------------------
   15. CURSOR
   ------------------------------------------------ */

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


/* ------------------------------------------------
   16. RESPONSIVE
   Solo las utilidades que tienen sentido
   cambiar por breakpoint.
   ------------------------------------------------ */

@media (min-width: 768px) {
  .md-block  { display: block; }
  .md-flex   { display: flex; }
  .md-grid   { display: grid; }
  .md-none   { display: none; }

  .md-text-left   { text-align: left; }
  .md-text-center { text-align: center; }
  .md-text-right  { text-align: right; }

  .md-w-full  { width: 100%; }
  .md-w-auto  { width: auto; }
}

@media (min-width: 1024px) {
  .lg-block  { display: block; }
  .lg-flex   { display: flex; }
  .lg-grid   { display: grid; }
  .lg-none   { display: none; }

  .lg-text-left   { text-align: left; }
  .lg-text-center { text-align: center; }
  .lg-text-right  { text-align: right; }
}