/* Componentes Juntart. Só usam var(--cor-*), var(--espaco-*), var(--raio-*) e classes .t-*.
   Cor fora de token é erro: o exportador para Figma (npm run figma) aponta e falha. */
@font-face { font-family: 'Manrope'; font-weight: 600; src: url(../assets/fontes/Manrope-SemiBold.ttf); }
@font-face { font-family: 'Manrope'; font-weight: 800; src: url(../assets/fontes/Manrope-ExtraBold.ttf); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; src: url(../assets/fontes/SourceSans3-Regular.ttf); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; src: url(../assets/fontes/SourceSans3-SemiBold.ttf); }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--cor-outline); color: var(--cor-on-surface); font-family: var(--fonte-texto); -webkit-font-smoothing: antialiased; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ic { flex: none; display: block; }

/* ---------- Tela ---------- */
/* padding-top 59px: respiro da câmera do iPhone (achado AH-12 da análise heurística). */
.tela {
  position: relative; width: 390px; height: 844px; overflow: hidden; padding-top: 59px;
  background: var(--cor-background); color: var(--cor-on-surface);
  display: flex; flex-direction: column;
}
.tela__corpo { flex: 1; overflow: hidden; padding: var(--espaco-xl); display: flex; flex-direction: column; gap: var(--espaco-xl); }
.tela__corpo--sem-topo { padding-top: var(--espaco-lg); }
.secao { display: flex; flex-direction: column; gap: var(--espaco-lg); }
.pilha-xs { display: flex; flex-direction: column; gap: var(--espaco-xs); }
.pilha-sm { display: flex; flex-direction: column; gap: var(--espaco-sm); }
.pilha-md { display: flex; flex-direction: column; gap: var(--espaco-md); }
.linha { display: flex; align-items: center; gap: var(--espaco-sm); }
.linha--entre { justify-content: space-between; }
.cresce { flex: 1; min-width: 0; }
.secundario { color: var(--cor-secondary); }
.primario { color: var(--cor-primary); }

/* ---------- Header ---------- */
.header { flex: none; height: 64px; display: flex; align-items: center; gap: var(--espaco-md); padding: 0 var(--espaco-xl); background: var(--cor-background); border-bottom: 1px solid var(--cor-outline); }
.header--raiz { justify-content: space-between; }
.header__marca { display: flex; align-items: center; gap: var(--espaco-md); }
.header__simbolo { width: 32px; height: 34px; object-fit: contain; }
.header__modo { display: flex; flex-direction: column; }
.header__titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header__acao { width: 48px; height: 48px; margin: 0 -12px; display: grid; place-items: center; color: var(--cor-on-surface); }

/* ---------- Navbar (barra inferior, 5 destinos) ---------- */
.navbar { flex: none; height: 72px; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--cor-surface); border-top: 1px solid var(--cor-outline); padding: var(--espaco-sm) var(--espaco-sm); }
.navbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-xs); border-radius: var(--raio-control); color: var(--cor-secondary); text-align: center; }
.navbar__item--ativo { background: var(--cor-background); color: var(--cor-primary); }

/* ---------- Botões ---------- */
.btn { height: 48px; padding: 0 var(--espaco-lg); border-radius: var(--raio-control); display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-sm); white-space: nowrap; }
.btn--primario { background: var(--cor-primary); color: var(--cor-surface); }
.btn--secundario { background: var(--cor-surface); color: var(--cor-primary); border: 1px solid var(--cor-primary); }
.btn--texto { color: var(--cor-primary); padding: 0 var(--espaco-md); }
.btn--desabilitado { background: var(--cor-outline); color: var(--cor-on-surface); }
.btn--bloco { width: 100%; }

/* ---------- Cards ---------- */
.card { background: var(--cor-surface); border-radius: var(--raio-card); padding: var(--espaco-xl); border: 1px solid var(--cor-outline); display: flex; flex-direction: column; gap: var(--espaco-lg); }
.card--denso { padding: 20px; }
.card--selecionado { border: 2px solid var(--cor-primary); }
.card--secundario { background: var(--cor-outline); border-color: var(--cor-outline); }
.divisoria { height: 1px; background: var(--cor-outline); flex: none; }

.caixa-icone { width: 48px; height: 48px; flex: none; border-radius: var(--raio-control); background: var(--cor-background); color: var(--cor-primary); display: grid; place-items: center; }
.caixa-icone--grande { width: 56px; height: 56px; }

/* ---------- Etiquetas, chips e status ---------- */
.tag { display: inline-flex; align-items: center; gap: var(--espaco-xs); align-self: flex-start; padding: var(--espaco-xs) var(--espaco-sm); border-radius: var(--raio-small); background: var(--cor-highlight); color: var(--cor-on-surface); }
.tag--neutra { background: var(--cor-background); }
.status { display: inline-flex; align-items: center; gap: var(--espaco-xs); color: var(--cor-secondary); }
/* Chips quebram linha em vez de cortar na lateral (achado AH-11). */
.chips { display: flex; flex-wrap: wrap; gap: var(--espaco-sm); }
.chip { flex: none; height: 40px; padding: 0 var(--espaco-lg); border-radius: var(--raio-control); display: inline-flex; align-items: center; gap: var(--espaco-xs); background: var(--cor-surface); border: 1px solid var(--cor-outline); color: var(--cor-on-surface); }
.chip--ativo { background: var(--cor-primary); border-color: var(--cor-primary); color: var(--cor-surface); }
.contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--cor-primary); color: var(--cor-surface); display: inline-grid; place-items: center; }
.chip--ativo .contador { background: var(--cor-surface); color: var(--cor-primary); }

/* ---------- Metadados ---------- */
.meta { display: flex; align-items: center; gap: var(--espaco-sm); color: var(--cor-secondary); }
.meta .ic { color: var(--cor-secondary); }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: var(--espaco-sm); }
.campo__entrada { height: 52px; padding: 0 var(--espaco-lg); border-radius: var(--raio-control); background: var(--cor-surface); border: 1px solid var(--cor-primary); display: flex; align-items: center; gap: var(--espaco-md); color: var(--cor-on-surface); }
.campo__entrada--area { height: auto; min-height: 120px; padding: var(--espaco-md) var(--espaco-lg); align-items: flex-start; }
.campo__entrada .placeholder { color: var(--cor-secondary); }
.campo__ajuda { color: var(--cor-secondary); }
.busca { height: 52px; padding: 0 var(--espaco-sm) 0 var(--espaco-lg); border-radius: var(--raio-control); background: var(--cor-surface); border: 1px solid var(--cor-primary); display: flex; align-items: center; gap: var(--espaco-md); color: var(--cor-secondary); }
.busca__filtro { width: 40px; height: 40px; border-radius: var(--raio-small); background: var(--cor-background); color: var(--cor-primary); display: grid; place-items: center; margin-left: auto; }
.marcador { width: 24px; height: 24px; flex: none; border-radius: var(--raio-small); border: 1.5px solid var(--cor-primary); display: grid; place-items: center; background: var(--cor-surface); }
.marcador--on { background: var(--cor-primary); color: var(--cor-surface); }
.radio { width: 24px; height: 24px; flex: none; border-radius: 12px; border: 1.5px solid var(--cor-secondary); display: grid; place-items: center; }
.radio--on { border-color: var(--cor-primary); background: var(--cor-primary); color: var(--cor-surface); }

/* ---------- Progresso ---------- */
.progresso { height: 4px; border-radius: 2px; background: var(--cor-outline); overflow: hidden; }
.progresso__barra { height: 100%; border-radius: 2px; background: var(--cor-primary); }

/* ---------- Avatar e foto ---------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--cor-outline); }
.avatar--md { width: 56px; height: 56px; }
.avatar--lg { width: 112px; height: 112px; }
.avatar--texto { display: grid; place-items: center; color: var(--cor-primary); background: var(--cor-background); border: 1px solid var(--cor-outline); }
.foto { width: 100%; object-fit: cover; border-radius: var(--raio-card); }

/* ---------- Aviso / feedback ---------- */
.aviso { display: flex; gap: var(--espaco-md); padding: var(--espaco-lg); border-radius: var(--raio-control); background: var(--cor-surface); border: 1px solid var(--cor-outline); color: var(--cor-on-surface); }
.aviso--destaque { background: var(--cor-highlight); border-color: var(--cor-highlight); }

/* ---------- CTA fixo ---------- */
.rodape-cta { flex: none; padding: var(--espaco-lg) var(--espaco-xl) var(--espaco-xl); background: var(--cor-background); border-top: 1px solid var(--cor-outline); display: flex; flex-direction: column; gap: var(--espaco-sm); }

/* ---------- Galeria (index.html) ---------- */
.galeria { display: flex; flex-wrap: wrap; gap: 48px; padding: 48px; align-items: flex-start; }
.galeria figure { display: flex; flex-direction: column; gap: var(--espaco-md); }
.galeria iframe { width: 390px; height: 844px; border: 0; border-radius: var(--raio-card); background: var(--cor-background); }
.galeria figcaption { color: var(--cor-on-surface); }