/*
 * GALAPPXY — Cards
 * .gx-card + stat tiles
 */

/* ─── BASE CARD ──────────────────────────────────────────── */
.gx-card {
  background: var(--gx-bg-surface);
  border-radius: var(--gx-card-radius);
  border: 1px solid var(--gx-border-light);
  box-shadow: var(--gx-shadow-xs);
  transition: box-shadow var(--gx-duration-base) var(--gx-ease-default);
  overflow: hidden;
}

.gx-card:hover {
  box-shadow: var(--gx-shadow-sm);
}

.gx-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gx-sp-4) var(--gx-sp-4) var(--gx-sp-3);
}

.gx-card__title {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
}

.gx-card__subtitle {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
  margin-top: 2px;
}

.gx-card__body {
  padding: var(--gx-sp-4);
}

.gx-card__header + .gx-card__body {
  padding-top: 0;
}

.gx-card__footer {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  border-top: 1px solid var(--gx-border-light);
}

/* Card sin borde */
.gx-card--flat {
  border: none;
  box-shadow: var(--gx-shadow-sm);
}

/* Card clickable */
.gx-card--clickable {
  cursor: pointer;
}
.gx-card--clickable:hover {
  box-shadow: var(--gx-shadow-md);
  border-color: var(--gx-border-strong);
}


/* ─── STAT TILE (Dashboard KPI Cards) ────────────────────── */
.gx-stat {
  background: var(--gx-bg-surface);
  border-radius: var(--gx-card-radius);
  border: 1px solid var(--gx-border-light);
  box-shadow: var(--gx-shadow-xs);
  padding: var(--gx-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--gx-sp-3);
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  position: relative;
  overflow: hidden;
}

.gx-stat:hover {
  box-shadow: var(--gx-shadow-md);
  transform: translateY(-2px);
}

/* Accent bar en la parte superior */
.gx-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gx-stat-color, var(--gx-primary));
  border-radius: var(--gx-card-radius) var(--gx-card-radius) 0 0;
}

.gx-stat__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.gx-stat__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--gx-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gx-primary-rgb), 0.1);
  color: var(--gx-primary);
  font-size: 20px;
  flex-shrink: 0;
}

.gx-stat--secondary .gx-stat__icon {
  background: rgba(var(--gx-secondary-rgb), 0.1);
  color: var(--gx-secondary);
}

.gx-stat--secondary::before {
  --gx-stat-color: var(--gx-secondary);
}

.gx-stat__label {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-secondary);
}

.gx-stat__value {
  font-size: var(--gx-text-2xl);
  font-weight: var(--gx-weight-bold);
  color: var(--gx-text-primary);
  letter-spacing: var(--gx-tracking-tight);
  line-height: 1.2;
}

.gx-stat__desc {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
}

.gx-stat__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--gx-sp-2);
  border-top: 1px solid var(--gx-border-light);
}

.gx-stat__link {
  font-size: var(--gx-text-xs);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--gx-sp-1);
  transition: color var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-stat__link:hover { color: var(--gx-primary-hover); }

.gx-stat--secondary .gx-stat__link { color: var(--gx-secondary); }
.gx-stat--secondary .gx-stat__link:hover { color: var(--gx-secondary-hover); }


/* ─── STAT GRID ──────────────────────────────────────────── */
.gx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gx-sp-4);
}

@media (min-width: 1200px) {
  .gx-stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
}