/* ============================================================
   INNOVA MÖBILI — Utilities: Clases reutilizables
   ============================================================ */

/* ─── VISIBILIDAD ──────────────────────────────────────────── */
.u-hidden { display: none !important; }
.u-visible { display: block !important; }
.u-visible-flex { display: flex !important; }
.u-visible-grid { display: grid !important; }
.u-invisible { visibility: hidden; }

/* ─── POSICIONAMIENTO ──────────────────────────────────────── */
.u-fixed { position: fixed; }
.u-absolute { position: absolute; }
.u-relative { position: relative; }
.u-sticky { position: sticky; }

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

.u-z-top { z-index: 9999; }
.u-z-modal { z-index: 9000; }
.u-z-dropdown { z-index: 1000; }
.u-z-overlay { z-index: 50; }

/* ─── OVERFLOW ────────────────────────────────────────────── */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow: auto; }
.u-overflow-y-auto { overflow-y: auto; }
.u-overflow-x-hidden { overflow-x: hidden; }

/* ─── DIMENSIONES ──────────────────────────────────────────── */
.u-w-100 { width: 100%; }
.u-h-100 { height: 100%; }
.u-wh-100 { width: 100%; height: 100%; }
.u-max-w-100 { max-width: 100%; }

/* ─── FLEXBOX ──────────────────────────────────────────────── */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-start { display: flex; align-items: flex-start; }
.u-flex-end { display: flex; align-items: flex-end; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }

.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-start { justify-content: flex-start; }
.u-justify-end { justify-content: flex-end; }

/* ─── GAP / SPACING ────────────────────────────────────────── */
.u-gap-1 { gap: 4px; }
.u-gap-2 { gap: 8px; }
.u-gap-3 { gap: 12px; }
.u-gap-4 { gap: 16px; }
.u-gap-5 { gap: 20px; }
.u-gap-6 { gap: 24px; }

.u-p-0 { padding: 0; }
.u-p-1 { padding: 4px; }
.u-p-2 { padding: 8px; }
.u-p-3 { padding: 12px; }
.u-p-4 { padding: 16px; }
.u-p-5 { padding: 20px; }

.u-px-2 { padding-left: 8px; padding-right: 8px; }
.u-px-3 { padding-left: 12px; padding-right: 12px; }
.u-px-4 { padding-left: 16px; padding-right: 16px; }
.u-py-2 { padding-top: 8px; padding-bottom: 8px; }
.u-py-3 { padding-top: 12px; padding-bottom: 12px; }

.u-m-0 { margin: 0; }
.u-m-1 { margin: 4px; }
.u-m-2 { margin: 8px; }
.u-m-3 { margin: 12px; }
.u-m-4 { margin: 16px; }
.u-m-5 { margin: 20px; }

.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: 4px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 16px; }
.u-mb-5 { margin-bottom: 20px; }

.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: 4px; }
.u-mt-2 { margin-top: 8px; }
.u-mt-3 { margin-top: 12px; }
.u-mt-4 { margin-top: 16px; }
.u-mt-5 { margin-top: 20px; }

.u-mr-1 { margin-right: 4px; }
.u-mr-2 { margin-right: 8px; }
.u-mr-3 { margin-right: 12px; }

/* ─── GRID ────────────────────────────────────────────────── */
.u-grid { display: grid; }
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.u-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ─── BORDER RADIUS ────────────────────────────────────────── */
.u-rounded-0 { border-radius: 0; }
.u-rounded-sm { border-radius: 4px; }
.u-rounded { border-radius: 8px; }
.u-rounded-lg { border-radius: 12px; }
.u-rounded-xl { border-radius: 16px; }
.u-rounded-full { border-radius: 9999px; }

/* ─── BORDES ────────────────────────────────────────────────– */
.u-border-none { border: none; }
.u-border { border: 1px solid var(--border); }
.u-border-dark { border: 1px solid var(--border-dark); }
.u-border-dashed { border: 1px dashed #cbd5e1; }
.u-border-dashed-2 { border: 2px dashed #cbd5e1; }
.u-border-accent { border: 1px solid var(--accent); }
.u-border-t { border-top: 1px solid var(--border); }
.u-border-b { border-bottom: 1px solid var(--border); }

.u-border-left-accent { border-left: 3px solid var(--accent); }
.u-border-left-primary { border-left: 3px solid var(--primary); }
.u-border-bottom-primary { border-bottom: 2px solid var(--primary); }

/* ─── COLORES DE FONDO ────────────────────────────────────– */
.u-bg-primary { background: var(--primary); }
.u-bg-accent { background: var(--accent); }
.u-bg-accent-lt { background: var(--accent-lt); }
.u-bg-cream { background: var(--cream); }
.u-bg-sand { background: var(--sand); }
.u-bg-white { background: var(--white); }
.u-bg-bg { background: var(--bg); }

.u-bg-gray-50 { background: var(--gray-50); }
.u-bg-gray-100 { background: var(--gray-100); }
.u-bg-gray-200 { background: var(--gray-200); }

.u-bg-success { background: rgba(90, 158, 114, 0.12); }
.u-bg-danger { background: rgba(192, 57, 43, 0.12); }
.u-bg-warning { background: rgba(201, 168, 76, 0.12); }

.u-bg-slate-800 { background: #1e293b; }
.u-bg-slate-100 { background: #f1f5f9; }
.u-bg-amber-100 { background: #fef3c7; }
.u-bg-purple-50 { background: #f8fafc; }

/* Fondos transparentes */
.u-bg-overlay-dark { background: rgba(0, 0, 0, 0.6); }
.u-bg-overlay-light { background: rgba(255, 255, 255, 0.8); }
.u-bg-transparent { background: transparent; }

/* ─── COLORES DE TEXTO ────────────────────────────────────– */
.u-text-primary { color: var(--primary); }
.u-text-accent { color: var(--accent); }
.u-text-caramel { color: var(--caramel); }
.u-text-success { color: var(--success); }
.u-text-danger { color: var(--danger); }
.u-text-warning { color: var(--warning); }
.u-text-white { color: var(--white); }
.u-text-muted { color: var(--text-muted); }
.u-text-gray-400 { color: var(--gray-400); }
.u-text-gray-600 { color: var(--gray-600); }

.u-text-amber-950 { color: #78350f; }
.u-text-amber-800 { color: #92400e; }
.u-text-amber-600 { color: #d97706; }
.u-text-red-600 { color: #dc2626; }

/* ─── TIPOGRAFÍA ────────────────────────────────────────────– */
.u-font-serif { font-family: var(--font-serif); }
.u-font-ui { font-family: var(--font-ui); }

.u-text-xs { font-size: 10px; }
.u-text-sm { font-size: 11px; }
.u-text-base { font-size: 13px; }
.u-text-lg { font-size: 16px; }
.u-text-xl { font-size: 20px; }
.u-text-2xl { font-size: 24px; }

.u-font-bold { font-weight: 700; }
.u-font-semibold { font-weight: 600; }
.u-font-medium { font-weight: 500; }
.u-font-normal { font-weight: 400; }
.u-font-light { font-weight: 300; }

.u-uppercase { text-transform: uppercase; }
.u-capitalize { text-transform: capitalize; }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.u-leading-tight { line-height: 1; }
.u-leading-normal { line-height: 1.5; }

/* ─── CURSOR ────────────────────────────────────────────────– */
.u-cursor-pointer { cursor: pointer; }
.u-cursor-default { cursor: default; }
.u-cursor-not-allowed { cursor: not-allowed; }

/* ─── TRANSICIONES ────────────────────────────────────────── */
.u-transition { transition: all 0.3s ease; }
.u-transition-colors { transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.u-transition-fast { transition: all 0.15s ease; }

/* ─── SOMBRAS ──────────────────────────────────────────────– */
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }
.u-shadow-none { box-shadow: none; }

/* ─── ESPECIALES ────────────────────────────────────────────– */
.u-pointer-events-none { pointer-events: none; }
.u-user-select-none { user-select: none; }
.u-opacity-50 { opacity: 0.5; }
.u-opacity-75 { opacity: 0.75; }

/* ─── ALINEACIÓN DE CONTENIDO ──────────────────────────────– */
.u-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

/* ─── RESPONSIVE HELPERS ───────────────────────────────────– */
@media (max-width: 768px) {
  .u-mobile-hidden { display: none; }
  .u-mobile-block { display: block; }
  .u-mobile-flex { display: flex; }
}

@media (min-width: 769px) {
  .u-desktop-hidden { display: none; }
}