/**
 * ============================================
 * MSI STUDIO DESIGN SYSTEM - COMPONENTS
 * ============================================
 *
 * Este archivo contiene todos los componentes del design system:
 * - Buttons (variantes y tamaños)
 * - Cards
 * - Header Navigation
 * - Icons
 *
 * Debe importarse después de tokens.css y foundations.css
 */

/* ============================================
   BUTTONS
   ============================================ */

.button,
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  height: var(--gaia-control-height);
  padding: var(--gaia-control-padding-block) var(--spacing-20);
  font-size: var(--font-size-button-sm);
  font-weight: var(--font-weight-button-md);
  line-height: var(--gaia-control-line-height);
  text-transform: var(--text-transform-button-md);
  text-align: center;
  text-decoration: none;
  border: var(--gaia-control-border-width) solid transparent;
  border-radius: var(--gaia-control-radius);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

:where(.button, .btn) > i[class] {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  line-height: 1;
}

/* ------------ Button Primary ------------ */
.button-primary,
.btn-primary {
  background-color: var(--bg-fill-primary);
  color: var(--bg-buttons-text);
  border-color: var(--bg-fill-primary);
}

.button-primary:hover,
.btn-primary:hover {
  background-color: var(--bg-fill-primary-hover);
  border-color: var(--bg-fill-primary-hover);
  transform: translateY(calc(var(--spacing-2) * -1));
  box-shadow: var(--shadow-lg);
}

.button-primary:active,
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
  transition-duration: 0.1s;
}

/* ------------ Button Secondary ------------ */
.button-secondary,
.btn-secondary {
  background: var(--bg-fill-disabled, #D4CAB2);
  color: var(--neutral-900);
}

.button-secondary:hover,
.btn-secondary:hover {
  transform: translateY(calc(var(--spacing-2) * -1));
  box-shadow: var(--shadow-md);
}

/* ------------ Button Ghost/Outline ------------ */
.button-outline,
.btn-outline {
  border-radius: var(--radius-l, 8px);
  border: 1px solid var(--bg-invert);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.button-outline:hover,
.btn-outline:hover {
  transform: translateY(calc(var(--spacing-2) * -1));
  box-shadow: var(--shadow-md);
}

/* ------------ Button Success ------------ */
.button-success,
.btn-success {
  background-color: var(--success-green);
  color: var(--bg-buttons-text);
  border-color: var(--success-green);
}

.button-success:hover,
.btn-success:hover {
  background-color: var(--success-green-dark);
  border-color: var(--success-green-dark);
  transform: translateY(calc(var(--spacing-2) * -1));
  box-shadow: var(--shadow-md);
}

/* Button Error/Danger */
.button-error,
.btn-error,
.button-danger,
.btn-danger {
  background-color: var(--error-red);
  color: var(--bg-buttons-text);
  border-color: var(--error-red);
}

.button-error:hover,
.btn-error:hover,
.button-danger:hover,
.btn-danger:hover {
  background-color: var(--error-red-dark);
  border-color: var(--error-red-dark);
  transform: translateY(calc(var(--spacing-2) * -1));
  box-shadow: var(--shadow-md);
}

/* Button Warning */
.button-warning,
.btn-warning {
  background-color: var(--alert-yellow);
  color: var(--bg-buttons-text);
  border-color: var(--alert-yellow);
}

.button-warning:hover,
.btn-warning:hover {
  background-color: var(--alert-yellow-dark);
  border-color: var(--alert-yellow-dark);
  transform: translateY(calc(var(--spacing-2) * -1));
  box-shadow: var(--shadow-md);
}

/* Button Sizes */
.button-sm,
.btn-sm {
  height: var(--gaia-control-height);
  padding: var(--spacing-6) var(--spacing-14);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  min-height: 2.25rem;
}

.button-lg,
.btn-lg {
  height: var(--gaia-control-height-large);
  min-height: var(--gaia-control-height-large);
  padding: var(--spacing-16) var(--spacing-32);
  font-size: var(--font-size-body-lg);
}

@media (width >= 62rem) {
  .button-sm,
  .btn-sm {
    height: var(--gaia-control-height-compact);
    min-height: var(--gaia-control-height-compact);
  }
}

/* Button Full Width */
.button-block,
.btn-block {
  display: flex;
  width: 100%;
}

/* Button States */
.button:disabled,
.btn:disabled,
.button.disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.button.loading,
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.button.loading::after,
.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: var(--border-width-2) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-loading 0.6s linear infinite;
}

@keyframes button-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   CARDS - Override Bootstrap & Custom Styles
   ============================================ */

.card {
  --gaia-card-padding: var(--gaia-space-card);

  /* Reset Bootstrap */
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  word-wrap: break-word;
  
  /* MSI Studio Design System */
  background-color: var(--bg-card) !important;
  background-clip: border-box;
  border: var(--border-width-1) solid var(--border-primary) !important;
  border-radius: var(--gaia-radius-card) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--border-secondary) !important;
}

/* Card Header */
.card-header {
  padding: var(--gaia-card-padding) !important;
  margin-bottom: 0;
  background-color: transparent !important;
  border-bottom: var(--border-width-1) solid var(--bg-invert) !important;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-demi-bold);
  color: var(--text-primary) !important;
}

.card-header:first-child {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

/* Card Title */
.card-title {
  margin: 0 !important;
  margin-bottom: var(--spacing-8) !important;
  font-size: var(--font-size-heading-lg) !important;
  font-weight: var(--font-weight-heading-lg) !important;
  line-height: var(--line-height-heading-lg) !important;
  color: var(--text-primary) !important;
}

.card-header .card-title {
  margin-bottom: 0 !important;
}

/* Card Subtitle */
.card-subtitle {
  margin: var(--spacing-8) 0 0 !important;
  font-size: var(--font-size-body-sm) !important;
  font-weight: var(--font-weight-regular) !important;
  color: var(--text-secondary) !important;
}

/* Card Body */
.card-body {
  flex: 1 1 auto !important;
  padding: var(--gaia-card-padding) !important;
  color: var(--text-primary) !important;
}

.card-body > *:last-child {
  margin-bottom: 0 !important;
}

.card-body p {
  color: var(--text-primary) !important;
}

/* Card Text */
.card-text {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-md);
  color: var(--text-primary) !important;
  margin-bottom: var(--spacing-16);
}

.card-text:last-child {
  margin-bottom: 0;
}

/* Card Footer */
.card-footer {
  padding: var(--gaia-card-padding) !important;
  margin-top: auto;
  background-color: var(--bg-card-footer) !important;
  border-top: var(--border-width-1) solid var(--border-primary) !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-body-sm);
}

.card-footer:last-child {
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

/* Card Images */
.card-img,
.card-img-top,
.card-img-bottom,
.card-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}

.card-img,
.card-img-top,
.card-image-top {
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
}

.card-img-bottom,
.card-image-bottom {
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

.card-img-overlay {
  position: absolute;
  inset: 0;
  padding: var(--spacing-24);
  border-radius: calc(var(--radius-lg) - 1px);
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.7) 100%);
  color: var(--neutral-100) !important;
}

.card-img-overlay .card-title,
.card-img-overlay .card-text {
  color: var(--neutral-100) !important;
}

/* Card Link */
.card-link {
  color: var(--text-accent) !important;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-link:hover {
  color: var(--text-accent-hover) !important;
  text-decoration: underline;
}

.card-link + .card-link {
  margin-left: var(--spacing-16);
}

/* ============================================
   CARD VARIANTS
   ============================================ */

.card-compact {
  --gaia-card-padding: var(--gaia-space-card-compact);
}

/* Elevated Card */
.card-elevated {
  box-shadow: var(--shadow-lg) !important;
  border: none !important;
}

.card-elevated:hover {
  box-shadow: var(--shadow-xl) !important;
  transform: translateY(calc(var(--spacing-6) * -1));
}

/* Flat Card */
.card-flat {
  border: none !important;
  box-shadow: none !important;
}

.card-flat:hover {
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(calc(var(--spacing-2) * -1));
}

/* Outline Card */
.card-outline {
  background-color: transparent !important;
  box-shadow: none !important;
  border: var(--border-width-2) solid var(--border-secondary) !important;
}

.card-outline:hover {
  border-color: var(--border-info) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Bordered Card (Bootstrap override) */
.card-bordered {
  border: var(--border-width-1) solid var(--border-primary) !important;
}

/* ============================================
   CARD COLORS - Bootstrap Color Variants Override
   ============================================ */

.card-primary {
  background-color: var(--blue-100) !important;
  border-color: var(--blue-500) !important;
}

.card-primary .card-header {
  background-color: var(--blue-500) !important;
  color: var(--bg-buttons-text) !important;
  border-bottom-color: var(--blue-600) !important;
}

.card-primary p {
  color: var(--blue-900) !important;
}

.card-success {
  background-color: var(--success-green-light) !important;
  border-color: var(--success-green) !important;
}

.card-success .card-header {
  background-color: var(--success-green) !important;
  color: var(--bg-buttons-text) !important;
  border-bottom-color: var(--success-green-dark) !important;
}

.card-success p {
  color: var(--blue-900) !important;
}

.card-warning {
  background-color: var(--alert-yellow-light) !important;
  border-color: var(--alert-yellow) !important;
}

.card-warning .card-header {
  background-color: var(--alert-yellow) !important;
  color: var(--bg-buttons-text) !important;
  border-bottom-color: var(--alert-yellow-dark) !important;
}

.card-warning p {
  color: var(--blue-900) !important;
}

.card-danger,
.card-error {
  background-color: var(--error-red-light) !important;
  border-color: var(--error-red) !important;
}

.card-danger .card-header,
.card-error .card-header {
  background-color: var(--error-red) !important;
  color: var(--bg-buttons-text) !important;
  border-bottom-color: var(--error-red-dark) !important;
}

.card-danger p {
  color: var(--blue-900) !important;
}

.card-info {
  background-color: var(--blue-100) !important;
  border-color: var(--blue-500) !important;
}

.card-info .card-header {
  background-color: var(--blue-500) !important;
  color: var(--bg-buttons-text) !important;
  border-bottom-color: var(--blue-600) !important;
}

.card-info p {
  color: var(--blue-900) !important;
}

/* ============================================
   CARD SIZES
   ============================================ */

/* Small Card */
.card-sm .card-header,
.card-sm .card-body,
.card-sm .card-footer {
  padding: var(--spacing-16) !important;
}

.card-sm .card-title {
  font-size: var(--font-size-subtitle-sm) !important;
}

/* Large Card */
.card-lg .card-header,
.card-lg .card-body,
.card-lg .card-footer {
  padding: var(--spacing-32) !important;
}

.card-lg .card-title {
  font-size: var(--font-size-heading-2xl) !important;
}

/* ============================================
   CARD GROUPS - Bootstrap Override
   ============================================ */

.card-group {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gaia-space-group);
}

.card-group > .card {
  flex: 1 0 0%;
  margin-bottom: 0;
}

@media (max-width: 48rem) {  /* 767px convertido aproximadamente */
  .card-group {
    flex-direction: column;
  }
  
  .card-group > .card {
    flex: 1 0 100%;
    margin-bottom: var(--spacing-16);
  }
  
  .card-group > .card:last-child {
    margin-bottom: 0;
  }
}

/* ============================================
   CARD GRID
   ============================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));  /* 300px convertido a rem */
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-24);
}

.card-grid > .card {
  margin-bottom: 0;
}

@media (max-width: 48rem) {  /* 767px convertido aproximadamente */
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
  }
}

/* ============================================
   INTERACTIVE CARD
   ============================================ */

.card-interactive {
  cursor: pointer;
  user-select: none;
}

.card-interactive:active {
  transform: translateY(calc(var(--spacing-2) * -1));
  box-shadow: var(--shadow-md) !important;
}

/* ============================================
   CARD WITH ACTIONS
   ============================================ */

.card-actions {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-12) var(--spacing-24);
  border-top: var(--border-width-1) solid var(--border-primary);
  background-color: var(--bg-secondary);
}

.card-body + .card-actions {
  margin-top: auto;
}

/* ============================================
   HORIZONTAL CARD
   ============================================ */

.card-horizontal {
  flex-direction: row !important;
}

.card-horizontal .card-img,
.card-horizontal .card-img-top {
  width: auto;
  max-width: 40%;
  border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
}

.card-horizontal .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 48rem) {  /* 767px convertido aproximadamente */
  .card-horizontal {
    flex-direction: column !important;
  }
  
  .card-horizontal .card-img,
  .card-horizontal .card-img-top {
    width: 100%;
    max-width: 100%;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  }
}

/* ============================================
   ICON BACKGROUND CARD
   ============================================ */

.card-icon-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  padding: 10px;
  padding-left: 1rem;
  overflow: hidden;
  border-radius: var(--radius-lg) !important;
  transition: all 0.3s ease;
}

  .card-icon-background i {
    transition: all 0.3s ease;
  }

.card-interactive:hover .card-icon-background {
  padding: 0;
  padding-left: 1rem;
}

  .card-icon-background i {
    font-size: 5rem !important;
    color: rgb(0 0 0 / 0.4) !important;
  }

.card-interactive:hover .card-icon-background i {
  transform: scale(1.15) rotate(5deg);
}

/* ============================================
   HEADER NAVIGATION
   ============================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--bg-primary);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  box-shadow: var(--shadow-sm);
}

.navbar {
    box-sizing: border-box;
    align-items: center;
    height: var(--gaia-space-navbar-height);
    min-height: var(--gaia-space-navbar-height);
    padding: var(--gaia-navbar-padding-block) var(--gaia-space-content);
    width: 100%;
    margin: 0 auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-decoration: none;
}

.navbar-logo {
  height: 2.5rem;
  width: auto;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.nav-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.nav-link:focus {
  outline: var(--border-width-2) solid var(--border-info);
  outline-offset: var(--spacing-2);
}

.nav-link.active {
  color: var(--text-primary);
  font-weight: var(--font-weight-demi-bold);
  background-color: var(--bg-accent-secondary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--spacing-16);
  right: var(--spacing-16);
  height: var(--border-width-2);
  background-color: var(--bg-accent);
  border-radius: var(--radius-full);
}

/* Mobile Menu Toggle */
.navbar-toggle {
  display: none;
  padding: var(--spacing-8);
  background: none;
  border: none;
  cursor: pointer;
}

@media (max-width: 48rem) {  /* 767px convertido aproximadamente */
  .navbar-toggle {
    display: block;
  }

  .navbar-nav:not(.gaia-account-nav) {
    position: fixed;
    top: var(--gaia-space-navbar-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: var(--bg-primary);
    border-bottom: var(--border-width-1) solid var(--border-primary);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-16);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .navbar-nav:not(.gaia-account-nav).open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar-nav:not(.gaia-account-nav) .nav-item {
    width: 100%;
  }

  .navbar-nav:not(.gaia-account-nav) .nav-link {
    width: 100%;
    padding: var(--spacing-16);
  }
}

/* ============================================
   BADGES
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-12);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption-demi);
  line-height: var(--line-height-caption);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
    background-color: var(--blue-500) !important;
    color: var(--blue-100);
}

.badge-success {
    background-color: var(--bg-badge-green);
    color: var(--blue-900);
}

.badge-warning {
    background-color: var(--bg-badge-yellow);
    color: var(--blue-900);
}

.badge-error {
    background-color: var(--bg-error);
    color: var(--blue-900);
}

.badge-cream {
    background-color: var(--bg-badge-cream);
    color: var(--blue-900);
}

.badge-orange {
    background-color: var(--bg-badge-orange);
    color: var(--blue-900);
}

.badge-turquoise {
    background-color: var(--bg-badge-turquoise);
    color: var(--blue-900);
}

/* ============================================
   ICONS
   ============================================ */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Icon Sizes */
.icon-xs {
  width: 1rem;
  height: 1rem;
}

.icon-sm {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-md {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-lg {
  width: 2rem;
  height: 2rem;
}

.icon-xl {
  width: 2.5rem;
  height: 2.5rem;
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-16);
}

.alert-icon {
  flex-shrink: 0;
}

.alert-content {
  flex: 1;
}

.alert-content p {
  color: var(--blue-900);
}

.alert-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-4);
}

.alert-success {
  background-color: var(--success-green-light);
  border-color: var(--success-green);
  color: var(--success-green-dark);
}

.alert-error {
  background-color: var(--error-red-light);
  border-color: var(--error-red);
  color: var(--error-red-dark);
}

.alert-warning {
  background-color: var(--alert-yellow-light);
  border-color: var(--alert-yellow);
  color: var(--alert-yellow-dark);
}

.alert-info {
  background-color: var(--blue-100);
  border-color: var(--blue-500);
  color: var(--blue-900);
}


.offcanvas-footer {
    padding: var(--spacing-16);
    border-top: 1px solid var(--border-primary);
}