/*
 * Estrutura de navegação do aplicativo: cabeçalho + busca + abas,
 * trilhos horizontais na Home e grade de categorias em Explorar.
 */

/* Tons pastéis reutilizados por categorias e cards */
.dua-tone-0 { --dua-tone: #e8deff; }
.dua-tone-1 { --dua-tone: #ffe0e7; }
.dua-tone-2 { --dua-tone: #dcefff; }
.dua-tone-3 { --dua-tone: #ddf8e6; }
.dua-tone-4 { --dua-tone: #fff0bd; }
.dua-tone-5 { --dua-tone: #ffe5d2; }

/* ---------- Cabeçalho do aplicativo ---------- */

.dua-header--app {
  background: linear-gradient(180deg, #fff6dd 0%, rgb(255 255 255 / 96%) 82%);
}

.dua-header__nav {
  align-items: center;
  gap: .55rem;
}

.dua-header__link {
  color: var(--dua-color-ink);
  font-weight: 800;
  text-decoration: none;
}

.dua-header__account-action {
  display: none;
}

@media (min-width: 760px) {
  .dua-header__account-action {
    display: inline-flex;
    min-height: 42px;
    border-radius: 12px;
  }

  .dua-header__account-action .dua-icon {
    width: 18px;
    height: 18px;
  }

  .dua-header__account-action--logout {
    border-color: var(--dua-color-line);
    background: #fff;
    color: var(--dua-color-ink);
  }

  .dua-header__account-action--logout:hover {
    border-color: var(--dua-color-primary);
    background: var(--dua-color-primary-soft);
    color: var(--dua-color-ink);
  }
}

.dua-avatar--header {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.05rem;
}

.dua-appbar {
  padding-bottom: .1rem;
}

.dua-appbar__inner {
  padding-block: .1rem .6rem;
}

/* Lupa do cabeçalho: abre a barra de busca recolhida. */
.dua-header__search {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--dua-color-line);
  border-radius: 50%;
  background: var(--dua-color-surface);
  color: var(--dua-color-ink);
  text-decoration: none;
}

.dua-header__search .dua-icon {
  width: 21px;
  height: 21px;
}

.dua-header__search:hover {
  border-color: var(--dua-color-primary);
  background: var(--dua-color-primary-soft);
  color: var(--dua-color-primary-dark);
}

.dua-header__search[aria-expanded="true"] {
  border-color: var(--dua-color-primary);
  background: var(--dua-color-primary);
  color: #fff;
}

/* ---------- Barra de busca ---------- */

.dua-app-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
}

.dua-app-search__icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 1.05rem;
  display: grid;
  color: var(--dua-color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.dua-app-search__icon .dua-icon {
  width: 21px;
  height: 21px;
}

.dua-app-search__field {
  min-height: 52px;
  padding: .7rem 1.1rem .7rem 2.95rem;
  border-color: transparent;
  border-radius: 999px;
  background: var(--dua-color-primary-soft);
}

.dua-app-search__field:focus {
  border-color: var(--dua-color-primary);
  background: #fff;
}

.dua-app-search__submit {
  display: grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dua-color-accent);
  color: var(--dua-color-ink);
}

.dua-app-search__submit:hover {
  background: #ffb400;
}

/* ---------- Abas de formato (chips estilo app, não sublinhado de site) ---------- */

.dua-app-tabs {
  border-bottom: 0;
  padding-bottom: .2rem;
}

.dua-app-tabs__track {
  display: flex;
  overflow-x: auto;
  gap: .5rem;
  /* Alinha o primeiro chip com a borda do .dua-container. */
  padding: .1rem max(1rem, calc((100% - 980px) / 2 + 1rem)) .6rem;
  scrollbar-width: none;
}

.dua-app-tabs__track::-webkit-scrollbar {
  display: none;
}

.dua-app-tabs__item {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  padding: .55rem .95rem .55rem .7rem;
  border: 1px solid var(--dua-color-line);
  border-radius: 999px;
  background: #fff;
  color: var(--dua-color-ink);
  font-size: .84rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.dua-app-tabs__item:active {
  transform: scale(.96);
}

.dua-app-tabs__icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--dua-color-muted);
}

.dua-app-tabs__icon .dua-icon {
  width: 100%;
  height: 100%;
}

.dua-app-tabs__item.is-active {
  border-color: var(--dua-color-primary);
  background: var(--dua-color-primary);
  box-shadow: 0 8px 18px rgb(7 140 244 / 32%);
  color: #fff;
}

.dua-app-tabs__item.is-active .dua-app-tabs__icon {
  color: #fff;
}

/* ---------- Banner da Home ---------- */

.dua-hero-banner {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.15rem, 4vw, 2rem);
  border-radius: 26px;
  background: linear-gradient(135deg, #2aa7ff, var(--dua-color-primary));
  box-shadow: 0 18px 38px rgb(7 86 159 / 22%);
  color: #fff;
}

.dua-hero-banner::after {
  position: absolute;
  top: -80px;
  right: -60px;
  width: 190px;
  height: 190px;
  border: 30px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  content: "";
}

.dua-hero-banner__copy,
.dua-hero-banner__art {
  position: relative;
  z-index: 1;
}

.dua-hero-banner .dua-eyebrow {
  color: rgb(255 255 255 / 88%);
}

.dua-hero-banner__title {
  margin-bottom: .5rem;
  color: #fff;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
}

.dua-hero-banner__text {
  margin-bottom: 1.1rem;
  color: rgb(255 255 255 / 92%);
}

.dua-hero-banner__actions {
  margin-bottom: 0;
}

.dua-hero-banner .dua-button--outline {
  border-color: rgb(255 255 255 / 70%);
  color: #fff;
}

.dua-hero-banner .dua-button--outline:hover {
  background: rgb(255 255 255 / 16%);
  color: #fff;
}

.dua-hero-banner__image {
  width: clamp(80px, 24vw, 150px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgb(6 36 84 / 22%));
}

/* ---------- Banner ilustrado (imagem com CTA incorporada) ---------- */

.dua-banner-image {
  display: block;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 18px 38px rgb(7 86 159 / 22%);
}

.dua-banner-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Escolha de perfil, agora abaixo do banner ---------- */

.dua-role-section {
  margin-top: 1.9rem;
  text-align: center;
}

.dua-role-section__lead {
  max-width: 46ch;
  margin: .3rem auto 1.5rem;
  color: var(--dua-color-muted);
}

.dua-role-section .dua-role-choice-grid {
  margin-inline: auto;
  text-align: left;
}

/* ---------- Trilhos horizontais ---------- */

.dua-rail,
.dua-explore-section {
  margin-top: 1.9rem;
}

.dua-rail__heading {
  align-items: center;
  margin-bottom: .85rem;
}

.dua-rail__heading h2,
.dua-explore-section .dua-section-heading h2,
.dua-explore-section .dua-section-heading h1 {
  font-size: clamp(1.2rem, 4.5vw, 1.6rem);
}

.dua-explore-section__heading {
  align-items: center;
  margin-bottom: .85rem;
}

.dua-explore-section__heading h1,
.dua-explore-section__heading h2 {
  margin-bottom: .2rem;
}

.dua-explore-section__heading p {
  margin: 0;
  color: var(--dua-color-muted);
  font-size: .96rem;
}

.dua-rail__more {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .2rem;
  color: var(--dua-color-primary-dark);
  font-size: .86rem;
  font-weight: 850;
  text-decoration: none;
}

.dua-rail__more .dua-icon {
  width: 17px;
  height: 17px;
}

.dua-rail__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  gap: .8rem;
  margin-inline: 0;
  padding: .25rem 0 .75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.dua-rail__track > * {
  flex: 0 0 clamp(120px, 34vw, 156px);
  min-width: 0;
  scroll-snap-align: start;
}

/* ---------- Card compacto usado nos trilhos ---------- */

.dua-activity-card--compact {
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dua-activity-card--compact:hover {
  box-shadow: none;
  transform: translateY(-2px);
}

.dua-activity-card--compact .dua-activity-card__visual {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgb(6 36 84 / 8%);
  border-radius: 20px;
  box-shadow: 0 12px 26px rgb(6 36 84 / 18%);
}

.dua-activity-card--compact .dua-activity-card__body {
  padding: .6rem .15rem 0;
}

.dua-activity-card--compact .dua-activity-card__topline {
  min-height: 0;
}

.dua-activity-card--compact .dua-activity-card__topline .dua-eyebrow {
  overflow: hidden;
  max-width: 100%;
  margin: 0;
  font-size: .6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dua-activity-card--compact .dua-activity-card__title {
  margin: .2rem 0 .15rem;
  font-size: .93rem;
}

.dua-activity-card--compact .dua-meta-list {
  margin-top: .3rem;
  font-size: .68rem;
}

.dua-activity-card__overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 20px;
}

/* ---------- Categorias ---------- */

.dua-category-rail__track > * {
  flex: 0 0 auto;
}

.dua-category-chip {
  display: grid;
  width: 96px;
  justify-items: center;
  gap: .45rem;
  color: var(--dua-color-ink);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.dua-category-chip__art {
  position: relative;
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(6 36 84 / 8%);
  border-radius: 24px;
  background: var(--dua-tone, var(--dua-color-primary-soft));
  box-shadow: 0 10px 22px rgb(6 36 84 / 22%);
}

.dua-category-chip__art::before {
  position: absolute;
  top: -18%;
  left: -18%;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: rgb(255 255 255 / 35%);
  content: "";
}

.dua-category-chip__image {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.dua-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.dua-category-tile {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem .5rem .85rem 1rem;
  border: 0;
  border-radius: 18px;
  background: var(--dua-tone, var(--dua-color-primary-soft));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--dua-tone, var(--dua-color-primary)) 45%, transparent);
  transition: transform .18s ease, box-shadow .2s ease;
}

.dua-category-tile::before {
  position: absolute;
  top: -30%;
  left: -12%;
  width: 45%;
  height: 90%;
  border-radius: 50%;
  background: rgb(255 255 255 / 20%);
  content: "";
}

.dua-category-tile:hover {
  box-shadow: 0 12px 26px color-mix(in srgb, var(--dua-tone, var(--dua-color-primary)) 55%, transparent);
  color: #fff;
  transform: translateY(-2px);
}

.dua-category-tile__label {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-size: .95rem;
  font-weight: 850;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgb(0 0 0 / 18%);
}

.dua-category-tile__art {
  position: relative;
  z-index: 1;
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  place-items: center;
}

.dua-category-tile__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Faixa de atalho ---------- */

.dua-highlight-strip {
  display: grid;
  margin-top: 1.9rem;
  grid-template-columns: 54px minmax(0, 1fr) 34px;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid rgb(6 36 84 / 8%);
  border-radius: 20px;
  background: var(--dua-color-accent-soft);
  color: var(--dua-color-ink);
  text-decoration: none;
  box-shadow: 0 6px 16px rgb(6 36 84 / 8%);
}

.dua-highlight-strip:hover {
  color: var(--dua-color-ink);
  box-shadow: 0 12px 26px rgb(6 36 84 / 14%);
}

.dua-highlight-strip__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: #fff;
  color: #c08800;
}

.dua-highlight-strip__icon .dua-icon {
  width: 28px;
  height: 28px;
}

.dua-highlight-strip__copy strong,
.dua-highlight-strip__copy small {
  display: block;
}

.dua-highlight-strip__copy strong {
  font-size: 1.05rem;
}

.dua-highlight-strip__copy small {
  color: var(--dua-color-muted);
}

.dua-highlight-strip__arrow {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(6 36 84 / 16%);
  border-radius: 50%;
}

/* ---------- Títulos das telas de aplicativo ---------- */

.dua-home .dua-dashboard-heading,
.dua-explore .dua-page-heading {
  margin-bottom: 1.1rem;
}

.dua-home .dua-dashboard-heading h1,
.dua-explore .dua-page-heading h1 {
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
}

.dua-explore .dua-page-heading p {
  font-size: .98rem;
}

/* ---------- Cabeçalho de página com ação ao lado (ex.: filtrar) ---------- */

.dua-page-heading--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.dua-page-heading--with-action > div {
  min-width: 0;
}

/* Formulário de filtro compacto: some no fluxo, mostra só o botão de ícone. */
.dua-filter--compact {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.dua-filter--compact .dua-filter__advanced {
  position: relative;
  width: auto;
  max-width: none;
  margin-top: 0;
}

.dua-filter__advanced--icon > summary {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  background: var(--dua-color-surface);
  box-shadow: var(--dua-shadow-sm);
}

.dua-filter__advanced--icon > summary span {
  display: none;
}

.dua-filter__advanced--icon > summary .dua-filter__count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
}

.dua-filter__advanced--icon[open] > summary {
  background: var(--dua-color-primary);
  color: #fff;
}

/* O painel só existe quando aberto, e abre como um cartão flutuante,
   sem empurrar o cabeçalho nem alterar a largura do botão de ícone. */
.dua-filter__advanced--icon:not([open]) .dua-filter__fields {
  display: none;
}

.dua-filter__advanced--icon[open] .dua-filter__fields {
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  width: min(calc(100% - 2rem), 620px);
  max-height: calc(100vh - 2rem);
  margin: 0;
  grid-template-columns: 1fr;
  overflow-y: auto;
  transform: translate(-50%, -50%);
}

.dua-filter__advanced--icon[open]::before {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgb(6 36 84 / 62%);
  backdrop-filter: blur(3px);
  content: "";
}

.dua-filter__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -1rem -1rem .2rem;
  padding: 1rem;
  border-bottom: 1px solid var(--dua-color-line);
}

.dua-filter__modal-head h2 { margin: 0; font-size: 1.35rem; }
.dua-filter-modal-open { overflow: hidden; }

@media (min-width: 460px) {
  .dua-filter__advanced--icon[open] .dua-filter__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dua-filter__advanced--icon[open] .dua-filter__modal-head {
    grid-column: 1 / -1;
  }

  .dua-filter__advanced--icon[open] .dua-filter__fields .dua-button {
    grid-column: 1 / -1;
  }
}

/* ---------- Navegação inferior sempre presente ---------- */

.dua-bottom-nav {
  display: grid;
}

/* Cada aba tem sua própria cor de destaque quando ativa. */
.dua-bottom-nav__item--blue.is-active {
  background: var(--dua-color-primary-soft);
  color: var(--dua-color-primary-dark);
}

.dua-bottom-nav__item--blue.is-active::before {
  background: var(--dua-color-primary);
}

.dua-bottom-nav__item--yellow.is-active {
  background: var(--dua-color-accent-soft);
  color: var(--dua-color-accent-dark);
}

.dua-bottom-nav__item--yellow.is-active::before {
  background: var(--dua-color-accent);
}

.dua-bottom-nav__item--green.is-active {
  background: var(--dua-color-success-soft);
  color: var(--dua-color-success-dark);
}

.dua-bottom-nav__item--green.is-active::before {
  background: var(--dua-color-success);
}

.dua-bottom-nav__item--pink.is-active {
  background: var(--dua-color-pink-soft);
  color: var(--dua-color-pink-dark);
}

.dua-bottom-nav__item--pink.is-active::before {
  background: var(--dua-color-pink);
}

.dua-bottom-nav__item--purple.is-active {
  background: var(--dua-color-purple-soft);
  color: var(--dua-color-purple-dark);
}

.dua-bottom-nav__item--purple.is-active::before {
  background: var(--dua-color-purple);
}

/* O afastamento da barra inferior fica no último bloco visível da página. */
.dua-footer {
  padding-bottom: calc(var(--dua-bottom-nav-height) + var(--dua-space-5) + env(safe-area-inset-bottom));
}

body.logged-in .dua-main {
  padding-bottom: calc(var(--dua-bottom-nav-height) + 1.25rem + env(safe-area-inset-bottom));
}

@media (max-width: 559px) {
  body.logged-in .dua-header__nav {
    display: flex;
  }

  .dua-header__link {
    display: none;
  }

  .dua-category-chip {
    width: 84px;
    font-size: .74rem;
  }

  .dua-category-chip__art {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .dua-hero-banner {
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: .6rem;
  }
}

@media (min-width: 680px) {
  .dua-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dua-category-tile,
  .dua-activity-card--compact {
    transition: none;
  }
}