/* ═══════════════════════════════════════════════════════
   EVOQIA DESIGN SYSTEM — UTILITIES
   v1.0 · Clases de utilidad para reemplazar estilos inline
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   BACKGROUNDS - Colores de fondo
   ══════════════════════════════════════════════════════ */

.bg-primary-brand {
  background-color: var(--ev-brand-primary) !important;
}

.bg-primary-light {
  background-color: var(--ev-brand-light) !important;
}

.bg-primary-dark {
  background-color: var(--ev-brand-dark) !important;
}

.bg-primary-subtle {
  background-color: var(--ev-brand-subtle) !important;
}

.bg-surface {
  background-color: var(--ev-bg-surface) !important;
}

.bg-raised {
  background-color: var(--ev-bg-raised) !important;
}

.bg-overlay {
  background-color: var(--ev-bg-overlay) !important;
}

.bg-hover {
  background-color: var(--ev-bg-hover) !important;
}

/* Backgrounds semánticos */
.bg-success-subtle {
  background-color: var(--ev-success-subtle) !important;
}

.bg-warning-subtle {
  background-color: var(--ev-warning-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--ev-danger-subtle) !important;
}

.bg-info-subtle {
  background-color: var(--ev-info-subtle) !important;
}

/* ══════════════════════════════════════════════════════
   TEXT - Colores de texto
   ══════════════════════════════════════════════════════ */

/* Texto principal - se adapta automáticamente al tema */
.text-primary-ev {
  color: var(--ev-text-primary) !important;
}

.text-primary-brand {
  color: var(--ev-brand-primary) !important;
}

.text-primary-light {
  color: var(--ev-brand-light) !important;
}

.text-primary-dark {
  color: var(--ev-brand-dark) !important;
}

.text-secondary-ev {
  color: var(--ev-text-secondary) !important;
}

.text-muted-ev {
  color: var(--ev-text-muted) !important;
}

.text-disabled {
  color: var(--ev-text-disabled) !important;
}

/* ══════════════════════════════════════════════════════
   BORDERS - Bordes
   ══════════════════════════════════════════════════════ */

.border-primary-brand {
  border-color: var(--ev-brand-primary) !important;
}

.border-subtle {
  border-color: var(--ev-border-subtle) !important;
}

.border-default {
  border-color: var(--ev-border-default) !important;
}

.border-strong {
  border-color: var(--ev-border-strong) !important;
}

/* Border top/bottom/left/right específicos */
.border-top-primary {
  border-top: 3px solid var(--ev-brand-primary) !important;
}

.border-bottom-primary {
  border-bottom: 3px solid var(--ev-brand-primary) !important;
}

.border-left-primary {
  border-left: 4px solid var(--ev-brand-primary) !important;
}

.border-right-primary {
  border-right: 4px solid var(--ev-brand-primary) !important;
}

/* Bordes semánticos */
.border-top-success {
  border-top: 3px solid var(--ev-success) !important;
}

.border-left-success {
  border-left: 4px solid var(--ev-success) !important;
}

.border-top-warning {
  border-top: 3px solid var(--ev-warning) !important;
}

.border-left-warning {
  border-left: 4px solid var(--ev-warning) !important;
}

.border-top-danger {
  border-top: 3px solid var(--ev-danger) !important;
}

.border-left-danger {
  border-left: 4px solid var(--ev-danger) !important;
}

/* ══════════════════════════════════════════════════════
   SPACING - Espaciado del Design System
   ══════════════════════════════════════════════════════ */

/* Padding */
.p-ev-1 { padding: var(--ev-space-1) !important; }
.p-ev-2 { padding: var(--ev-space-2) !important; }
.p-ev-3 { padding: var(--ev-space-3) !important; }
.p-ev-4 { padding: var(--ev-space-4) !important; }
.p-ev-5 { padding: var(--ev-space-5) !important; }
.p-ev-6 { padding: var(--ev-space-6) !important; }

/* Padding horizontal */
.px-ev-3 { padding-left: var(--ev-space-3) !important; padding-right: var(--ev-space-3) !important; }
.px-ev-4 { padding-left: var(--ev-space-4) !important; padding-right: var(--ev-space-4) !important; }
.px-ev-5 { padding-left: var(--ev-space-5) !important; padding-right: var(--ev-space-5) !important; }

/* Padding vertical */
.py-ev-3 { padding-top: var(--ev-space-3) !important; padding-bottom: var(--ev-space-3) !important; }
.py-ev-4 { padding-top: var(--ev-space-4) !important; padding-bottom: var(--ev-space-4) !important; }
.py-ev-5 { padding-top: var(--ev-space-5) !important; padding-bottom: var(--ev-space-5) !important; }

/* Margin */
.m-ev-1 { margin: var(--ev-space-1) !important; }
.m-ev-2 { margin: var(--ev-space-2) !important; }
.m-ev-3 { margin: var(--ev-space-3) !important; }
.m-ev-4 { margin: var(--ev-space-4) !important; }
.m-ev-5 { margin: var(--ev-space-5) !important; }

/* Margin top */
.mt-ev-3 { margin-top: var(--ev-space-3) !important; }
.mt-ev-4 { margin-top: var(--ev-space-4) !important; }
.mt-ev-5 { margin-top: var(--ev-space-5) !important; }
.mt-ev-6 { margin-top: var(--ev-space-6) !important; }

/* Margin bottom */
.mb-ev-3 { margin-bottom: var(--ev-space-3) !important; }
.mb-ev-4 { margin-bottom: var(--ev-space-4) !important; }
.mb-ev-5 { margin-bottom: var(--ev-space-5) !important; }

/* Gap (para flexbox/grid) */
.gap-ev-2 { gap: var(--ev-space-2) !important; }
.gap-ev-3 { gap: var(--ev-space-3) !important; }
.gap-ev-4 { gap: var(--ev-space-4) !important; }

/* ══════════════════════════════════════════════════════
   BORDER RADIUS - Bordes redondeados
   ══════════════════════════════════════════════════════ */

.rounded-ev-sm {
  border-radius: var(--ev-radius-sm) !important;
}

.rounded-ev-md {
  border-radius: var(--ev-radius-md) !important;
}

.rounded-ev-lg {
  border-radius: var(--ev-radius-lg) !important;
}

.rounded-ev-xl {
  border-radius: var(--ev-radius-xl) !important;
}

.rounded-ev-full {
  border-radius: var(--ev-radius-full) !important;
}

/* ══════════════════════════════════════════════════════
   SHADOWS - Sombras
   ══════════════════════════════════════════════════════ */

.shadow-ev-sm {
  box-shadow: var(--ev-shadow-sm) !important;
}

.shadow-ev-md {
  box-shadow: var(--ev-shadow-md) !important;
}

.shadow-ev-lg {
  box-shadow: var(--ev-shadow-lg) !important;
}

.shadow-glow-brand {
  box-shadow: var(--ev-shadow-glow-brand) !important;
}

.shadow-glow-danger {
  box-shadow: var(--ev-shadow-glow-danger) !important;
}

/* ══════════════════════════════════════════════════════
   FLEX UTILITIES - Utilidades Flexbox
   ══════════════════════════════════════════════════════ */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════
   FONT WEIGHTS
   ══════════════════════════════════════════════════════ */

.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════
   TRANSITIONS
   ══════════════════════════════════════════════════════ */

.transition-fast {
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

.transition-normal {
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.transition-slow {
  transition: all var(--ev-duration-slow) var(--ev-ease-default);
}

/* ══════════════════════════════════════════════════════
   OPACITY
   ══════════════════════════════════════════════════════ */

.opacity-90 { opacity: 0.9 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-50 { opacity: 0.5 !important; }

/* ══════════════════════════════════════════════════════
   CURSOR
   ══════════════════════════════════════════════════════ */

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════
   OVERFLOW
   ══════════════════════════════════════════════════════ */

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

/* ══════════════════════════════════════════════════════
   WIDTH & HEIGHT
   ══════════════════════════════════════════════════════ */

.w-fit {
  width: fit-content !important;
}

.h-fit {
  height: fit-content !important;
}

/* ══════════════════════════════════════════════════════
   POSITION
   ══════════════════════════════════════════════════════ */

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ══════════════════════════════════════════════════════
   Z-INDEX
   ══════════════════════════════════════════════════════ */

.z-1 { z-index: 1 !important; }
.z-10 { z-index: 10 !important; }
.z-100 { z-index: 100 !important; }
.z-1000 { z-index: 1000 !important; }

/* ══════════════════════════════════════════════════════
   HOVER EFFECTS
   ══════════════════════════════════════════════════════ */

.hover-lift {
  transition: transform var(--ev-duration-normal) var(--ev-ease-default);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-shadow:hover {
  box-shadow: var(--ev-shadow-md);
}

.hover-opacity:hover {
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════════
   CHANNEL COLORS (para badges, tags, etc)
   ══════════════════════════════════════════════════════ */

.text-channel-ml {
  color: var(--ev-channel-ml) !important;
}

.bg-channel-ml {
  background-color: var(--ev-channel-ml-bg) !important;
}

.text-channel-tn {
  color: var(--ev-channel-tn) !important;
}

.bg-channel-tn {
  background-color: var(--ev-channel-tn-bg) !important;
}

.text-channel-pv {
  color: var(--ev-channel-pv) !important;
}

.bg-channel-pv {
  background-color: var(--ev-channel-pv-bg) !important;
}

.text-channel-web {
  color: var(--ev-channel-web) !important;
}

.bg-channel-web {
  background-color: var(--ev-channel-web-bg) !important;
}

.text-channel-fq {
  color: var(--ev-channel-fq) !important;
}

.bg-channel-fq {
  background-color: var(--ev-channel-fq-bg) !important;
}

/* ══════════════════════════════════════════════════════
   WHITE SPACE
   ══════════════════════════════════════════════════════ */

.whitespace-nowrap {
  white-space: nowrap !important;
}

.whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

/* ══════════════════════════════════════════════════════
   LINE HEIGHT
   ══════════════════════════════════════════════════════ */

.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 1.75 !important; }

/* ══════════════════════════════════════════════════════
   LETTER SPACING
   ══════════════════════════════════════════════════════ */

.ls-tight { letter-spacing: -0.025em !important; }
.ls-normal { letter-spacing: 0 !important; }
.ls-wide { letter-spacing: 0.025em !important; }
.ls-wider { letter-spacing: 0.05em !important; }

/* ══════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDES — Dark/Light Mode Adaptativo
   ══════════════════════════════════════════════════════ */

/* Override Bootstrap .text-muted para que use las variables del design system
   Esto hace que todos los textos "muted" se adapten automáticamente a dark/light mode
   Sin este override, Bootstrap usa color fijo #6c757d que no se ve en dark mode */
.text-muted {
  color: var(--ev-text-muted) !important;
}

/* Override Bootstrap .text-secondary para consistencia con el design system
   Bootstrap usa rgba(33, 37, 41, 0.75) en light mode que tampoco se adapta bien */
.text-secondary {
  color: var(--ev-text-secondary) !important;
}

/* Override Bootstrap .form-text para form helpers
   Asegura que los textos de ayuda en formularios también se adapten al tema */
.form-text {
  color: var(--ev-text-muted) !important;
}

/* Override Bootstrap .blockquote-footer
   El footer de blockquotes también usa color fijo que no se adapta */
.blockquote-footer {
  color: var(--ev-text-muted) !important;
}