/* GLPS — Base compartilhada (Splash, Home, Onboarding, Peças-chave)
   Larguras em %/vw, espaçamento e tipografia em rem/em, clamp() onde precisa
   de fluidez real. Nada de pixel fixo — o wireframe (390px) é referência
   visual, não valor literal a portar. */

* {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 1rem = 16px, respeita config. de fonte do usuário */
}

body {
  margin: 0;
  font-family: var(--font-corpo);
  background: var(--surface-2);
  color: var(--text-primary);
  min-height: 100dvh;
}

.glps-app {
  width: 100%;
  max-width: 30rem; /* teto pra telas grandes, sem virar "app de desktop" */
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
}

/* Cabeçalho fixo do app — sempre escuro, não muda com o tema */
.header-app {
  flex-shrink: 0;
  background: #0b0b0c;
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 4vw, 1.5rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.header-app > a:first-child {
  grid-column: 1;
}
.header-app .logo-img {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.header-app .conta {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  color: #ffffff;
  text-decoration: none;
}
.header-app .conta i {
  font-size: 1.1875rem;
  color: #efe9db;
}
.header-app .conta .icone-conta {
  width: 0.9375rem;
  height: 0.9375rem;
}
.header-app .conta .icone-conta circle,
.header-app .conta .icone-conta path {
  stroke: #ffffff;
}
.header-app .conta .icone-conta g {
  fill: #ffffff;
}
.header-app .conta span {
  font-size: var(--tam-micro);
  letter-spacing: 0.02em;
}

.conteudo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 4vw, 1.375rem) clamp(1rem, 5vw, 1.5rem) 0;
}

.rolavel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.25rem;
  /* Respiro lateral pra sombra (--shadow-card-padrao) não ser cortada —
     overflow-y:auto força o eixo X a também virar auto/clip (regra do
     CSS), cortando qualquer coisa que vaze horizontalmente, inclusive a
     sombra do último card de cada linha (ex: Look 3/6 na grade). O
     padding-right abre o espaço; o margin-right negativo do mesmo valor
     cancela o deslocamento visual do conteúdo, então nada se move.
     Correção única, compartilhada por 100% do app (Home, Looks, Checklist,
     Praia, Festas), sem tocar tela por tela. Fácil reverter: remover as
     2 linhas abaixo. */
  padding-right: 1rem;
  margin-right: -1rem;
}

.rodape {
  flex-shrink: 0;
  padding: 0.625rem 0 clamp(1rem, 5vw, 1.5rem);
}

.btn-primario {
  width: 100%;
  background: var(--fill-accent);
  color: var(--on-accent);
  border: none;
  padding: clamp(0.875rem, 4vw, 1rem);
  border-radius: var(--radius);
  font-size: var(--tam-nome-item);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  display: block;
}
.btn-primario:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primario:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 0.1875rem solid var(--fill-accent);
  outline-offset: 0.125rem;
}

/* Botão "‹ Voltar" — ÚNICO em todo o app (sessão 13). Antes existia uma
   cópia idêntica duplicada em onboarding.css/pecas-chave.css/checklist.css/
   praia.css/festas.css/looks-base.css (via .btn-voltar-aula no Onboarding
   e .btn-voltar nas outras 5 telas) — centralizado aqui a pedido explícito
   do Neto: "o que muda em 1, muda em 100% do app" (cor, tamanho, fonte,
   ícone, tudo num lugar só). As cópias específicas foram removidas dos
   arquivos de cada tela. */
.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--tam-intro); /* 15px — era 0.875rem (14px) */
  font-weight: 600;
  text-decoration: none;
  padding: 0.375rem 0;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-family: inherit;
}
.btn-voltar i {
  font-size: 1.125rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--text-secondary); /* círculo simples, mesma cor
    do texto "Voltar" (var(--text-secondary)) */
}

/* Menu hamburguer — substitui a barra de pills (.nav-tabs, removida das 5
   CSS de tela), sessão 19. Vive dentro do .header-app (coluna central do
   grid, sempre escuro), a pedido do Neto — ícone claro pra ter contraste
   com o fundo #0b0b0c, mesmo padrão de cor já usado no ícone de conta ao
   lado (branco). O usuário sempre volta pelo Voltar; os atalhos pras
   outras 4 telas de conteúdo viram menu, não ficam mais sempre visíveis. */
.menu-secundario-wrap {
  position: relative;
  justify-self: center;
}
.btn-menu-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-size: 1.125rem;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.menu-secundario {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 9.5rem;
  background: var(--surface-card);
  border: var(--border-card-espessura) solid var(--border-card-padrao);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-padrao);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.menu-secundario[hidden] {
  display: none;
}
.menu-secundario-item {
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  font-size: var(--tam-nav);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.menu-secundario-item.active {
  background: var(--fill-accent);
  color: var(--on-accent);
}

/* Linha "‹ Voltar" + pílula com o nome da tela atual — sessão 19. Depois
   de tirar a barra de pills, o usuário perdia a noção de em qual tela
   estava; a pílula (mesmo padrão visual do .badge-biotipo do Checklist,
   mas em dourado de destaque) resolve isso sem reintroduzir os atalhos. */
.linha-nav-secundaria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.linha-nav-secundaria .btn-voltar {
  margin-bottom: 0;
}

.pilula-tela {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  color: var(--text-accent);
  border: var(--border-card-espessura) solid var(--text-accent);
  border-radius: 999px;
  padding: 0.375rem 0.9rem;
  font-size: calc(var(--tam-badge) * 1.2);
  font-weight: 700;
}
.pilula-tela i {
  font-size: 1.05rem;
}

.pilula-extra {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface-card);
  color: var(--text-primary);
  border: var(--border-card-espessura) solid var(--border-card-padrao);
  border-radius: 999px;
  padding: 0.375rem 0.9rem;
  font-size: calc(var(--tam-badge) * 1.2);
  font-weight: 700;
}
button.pilula-extra {
  font-family: inherit;
  cursor: pointer;
}
button.pilula-extra i {
  font-size: 0.875rem;
}

/* Wrapper do dropdown de troca de base quando embutido no pill do
   cabeçalho (looks-base-detalhe.ejs, via partials/pilula-base-dropdown) —
   mesmo mecanismo de posicionamento do .menu-base-wrap (looks-base.css,
   Tela 2), só sem o margin-bottom de bloco cheio, porque aqui vive dentro
   da linha do cabeçalho junto com Voltar/pílula da tela. */
.pilula-base-dropdown-wrap {
  position: relative;
}

.erro-selecao {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--tam-corpo);
  color: var(--text-danger);
  background: var(--bg-danger);
  border: 1px solid var(--border-danger);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  margin: 0 0 0.75rem;
}
.erro-selecao i {
  font-size: 0.9375rem;
  flex-shrink: 0;
}

/* Feedback de clique — todo botão/link/elemento clicável do app, pedido
   explícito do Neto pra deixar a experiência mais agradável. Leve
   escurecimento de fundo + deslocamento sutil na diagonal, sem cor nova
   inventada (usa filter, funciona sobre qualquer background existente). */
button:active,
a:active,
[role="button"]:active {
  filter: brightness(0.95);
  transform: translate(1px, 1px);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}