/* MODULOS PAGE */
.global-modulos-page {
  padding: var(--space-xl-24);
}

/* HEADER */
.global-modulos-header {
  margin-bottom: var(--space-xl-24);
}

.global-modulos-title {
  font-size: var(--font-3xl-28);
  font-weight: var(--font-bold-700);
  color: var(--color-text);
}

.global-modulos-subtitle {
  margin-top: 6px;
  font-size: var(--font-md-14);
  color: var(--color-text-secondary);
}

/* GRID */
.global-modulos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* CARD */
.global-modulos-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: var(--space-lg-16);
  cursor: pointer;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.global-modulos-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

/* PRIORIDAD */
.global-modulos-card.prioridad {
  border: 2px solid var(--color-primary);
}

/* ICON */
.global-modulos-card-icon {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-lg-16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-white);
  font-size: 24px;
}

/* BODY */
.global-modulos-card-body {
  flex: 1;
}

.global-modulos-card-title {
  font-size: 17px;
  font-weight: var(--font-bold-700);
  color: var(--color-text);
}

.global-modulos-card-desc {
  margin-top: var(--space-xs-04);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ARROW */
.global-modulos-card-arrow {
  color: var(--color-text-light);
  font-size: var(--font-xl-18);
}

/* BETA */
.global-modulos-card-beta {
  margin-top: var(--space-sm-08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-beta-light);
  color: var(--color-beta);
  border-radius: 999px;
  padding: var(--space-xs-04) var(--space-md-12);
  font-size: var(--font-xs-11);
  font-weight: var(--font-bold-700);
}

/* MOBILE */
@media (max-width: 768px) {
  .global-modulos-page {
    padding: var(--space-lg-16);
  }
  .global-modulos-grid {
    grid-template-columns: 1fr;
  }
}