/* ============================================================
   UTILITIES — clases atómicas de uso general
   Usar para ajustes puntuales; no reemplazar componentes.
   ============================================================ */

/* --- Visibilidad responsive --- */
.hidden           { display: none !important; }
.visible          { display: block !important; }

/* Mostrar/ocultar por breakpoint */
.hide-mobile  { display: block; }
.show-mobile  { display: none; }

@media (max-width: 767px) {
  .hide-mobile  { display: none !important; }
  .show-mobile  { display: block !important; }
}

@media (min-width: 768px) {
  .hide-tablet  { display: none !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* --- Texto --- */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

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

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

.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-light   { color: var(--color-text-light); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-white   { color: var(--color-white); }

.text-nowrap { white-space: nowrap; }

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

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Spacing --- */
.m-0  { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mr-2 { margin-right: var(--space-2); }
.mr-4 { margin-right: var(--space-4); }
.ml-auto { margin-left: auto; }

/* --- Background --- */
.bg-white    { background-color: var(--color-white); }
.bg-surface  { background-color: var(--color-surface); }
.bg-primary  { background-color: var(--color-primary); }
.bg-light    { background-color: var(--color-bg); }

/* --- Bordes --- */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.border       { border: 1px solid var(--color-border); }
.border-0     { border: none; }

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

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* --- Width / Height --- */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* --- Cursor --- */
.cursor-pointer { cursor: pointer; }

/* --- Opacity --- */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* --- Posición --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }