/* =================================
   APRENDER SUBNAV
================================= */

.aprender-subnav {

  background: var(--cor-clara);

  border-bottom: 1px solid var(--color-border);

}

.aprender-subnav__nav {

  display: flex;

  align-items: center;

  gap: 12px;

  overflow-x: auto;

  padding: 16px 0;

  scrollbar-width: none;

}

.aprender-subnav__nav::-webkit-scrollbar {
  display: none;
}

/* =================================
   ITEM
================================= */

.aprender-subnav__item {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 18px;

  border-radius: 999px;

  background: #f8fafc;

  border: 1px solid var(--color-border);

  font-size: 0.95rem;

  font-weight: 600;

  color: var(--cor-primaria);

  white-space: nowrap;

  transition: var(--transition);

}

.aprender-subnav__item:hover {

  border-color: rgba(67,170,139,0.25);

  background: rgba(67,170,139,0.08);

}

/* =================================
   ITEM ATIVO
================================= */

.aprender-subnav__item--active {

  background: rgba(67,170,139,0.12);

  border-color: rgba(67,170,139,0.30);

  color: var(--cor-secundaria);

}

.aprender-subnav__item--active:hover {

  background: rgba(67,170,139,0.16);

}

/* =================================
   DISABLED
================================= */

.aprender-subnav__item--disabled {

  opacity: .75;

}

.aprender-subnav__item--disabled:hover {

  background: #f8fafc;

  border-color: var(--color-border);

}

.aprender-subnav__item--disabled {

  opacity: .75;

  cursor: not-allowed;

  pointer-events: none;

}

/* =================================
   BADGE
================================= */

.aprender-subnav__badge {

  font-size: 11px;

  font-weight: 600;

  padding: 3px 8px;

  border-radius: 999px;

  background: rgba(245,158,11,0.12);

  color: var(--accent-warning-dark);

}

/* =================================
   MOBILE
================================= */

@media (max-width: 768px) {

  .aprender-subnav__nav {

    gap: 10px;

    padding: 14px 0;

  }

  .aprender-subnav__item {

    font-size: 0.9rem;

    padding: 10px 16px;

  }

}