/**
 * Sistema de Diseño - Utilidades CSS
 * App Closers - Clases utilitarias para uso común
 * Complementa Bootstrap 5 con utilidades adicionales
 */

/* ============================================
   LAYOUT & CONTAINERS - Complementos a Bootstrap
   ============================================ */

/* Bootstrap ya tiene .container, solo agregamos variantes adicionales */
.container-narrow {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-wide {
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* ============================================
   DISPLAY - Bootstrap ya tiene estas clases
   ============================================ */

/* Bootstrap ya tiene d-none, d-block, d-flex, etc. */

/* ============================================
   FLEXBOX - Bootstrap ya tiene estas clases
   ============================================ */

/* Bootstrap ya tiene flex-row, flex-column, align-items-*, justify-content-*, gap-* */

/* ============================================
   GRID - Usar Bootstrap Grid System
   ============================================ */

/* Bootstrap usa row/col-* en lugar de grid-cols-*, usar Bootstrap Grid */

/* ============================================
   SPACING - Padding
   ============================================ */

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.pt-0 { padding-top: 0; }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }

.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }

/* ============================================
   SPACING - Margin
   ============================================ */

.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.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); }

.mr-2 { margin-right: var(--space-2); }
.mr-4 { margin-right: var(--space-4); }

.ml-2 { margin-left: var(--space-2); }
.ml-4 { margin-left: var(--space-4); }

/* Margen negativo */
.-mt-4 { margin-top: calc(var(--space-4) * -1); }
.-mt-8 { margin-top: calc(var(--space-8) * -1); }

/* ============================================
   WIDTH & HEIGHT
   ============================================ */

.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

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

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

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }

/* ============================================
   TYPOGRAPHY
   ============================================ */

.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); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

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

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

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

.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;
}

/* Text colors - Bootstrap ya tiene text-primary, text-success, etc. */
/* Agregamos utilidades adicionales para colores específicos */
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }
.text-primary-600 { color: var(--color-primary-600) !important; }
.text-primary-700 { color: var(--color-primary-700) !important; }

/* ============================================
   BACKGROUND COLORS - Complementos a Bootstrap
   ============================================ */

/* Bootstrap ya tiene bg-primary, bg-success, etc. */
/* Agregamos utilidades adicionales para tonos específicos */
.bg-primary-50 { background-color: var(--color-primary-50) !important; }
.bg-primary-100 { background-color: var(--color-primary-100) !important; }
.bg-gray-50 { background-color: var(--color-gray-50) !important; }
.bg-gray-100 { background-color: var(--color-gray-100) !important; }
.bg-gray-200 { background-color: var(--color-gray-200) !important; }
.bg-success-50 { background-color: var(--color-success-50) !important; }
.bg-warning-50 { background-color: var(--color-warning-50) !important; }
.bg-danger-50 { background-color: var(--color-danger-50) !important; }

/* ============================================
   BORDERS - Complementos a Bootstrap
   ============================================ */

/* Bootstrap ya tiene border, border-0, border-top, etc. */
/* Agregamos utilidades adicionales */
.border-gray-200 { border-color: var(--color-gray-200) !important; }
.border-gray-300 { border-color: var(--color-gray-300) !important; }
.border-primary-200 { border-color: var(--color-primary-200) !important; }

/* ============================================
   SHADOWS - Complementos a Bootstrap
   ============================================ */

/* Bootstrap ya tiene shadow-sm, shadow, shadow-lg */
/* Agregamos sombras adicionales si es necesario */
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* ============================================
   OPACITY
   ============================================ */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ============================================
   POSITION - Bootstrap ya tiene estas clases
   ============================================ */

/* Bootstrap ya tiene position-* */

/* ============================================
   Z-INDEX - Bootstrap ya tiene estas clases
   ============================================ */

/* Bootstrap ya tiene z-index utilities */

/* ============================================
   OVERFLOW - Bootstrap ya tiene estas clases
   ============================================ */

/* Bootstrap ya tiene overflow-* */

/* ============================================
   CURSOR
   ============================================ */

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

/* ============================================
   USER SELECT
   ============================================ */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ============================================
   POINTER EVENTS
   ============================================ */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ============================================
   VISIBILITY
   ============================================ */

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

/* ============================================
   TRANSITIONS
   ============================================ */

.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
.transition-none { transition: none; }

/* ============================================
   TRANSFORMS - Utilidades adicionales
   ============================================ */

/* Utilidades para rotación (usadas con Alpine.js) */
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* ============================================
   HOVER STATES - Utilidades adicionales
   ============================================ */

/* Bootstrap tiene algunas hover states, agregamos las que faltan */
.hover\:bg-gray-100:hover { background-color: var(--color-gray-100) !important; }
.hover\:bg-primary-50:hover { background-color: var(--color-primary-50) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg) !important; }

/* ============================================
   FOCUS STATES
   ============================================ */

.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring:focus { box-shadow: 0 0 0 3px var(--color-primary-100); }

/* ============================================
   RESPONSIVE - Bootstrap ya tiene breakpoints
   ============================================ */

/* Bootstrap usa sm, md, lg, xl, xxl breakpoints */
/* Usar clases responsive de Bootstrap: d-sm-block, d-md-flex, etc. */