/* componentes.css: componentes visuais. Etapas 1, 2, 4, 5, 8, 11 e 12: topo, ícones, barra inferior de abas, telas placeholder, aviso de erro, cartões, chips, selos, Biblioteca, "Como fazer", banner de atualização, botões, Backup, Hoje (calendário da semana, rotina, treino do dia) e modal. */

/* ---------- Ícones (SVG inline, traço) ---------- */
.icone {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: calc(var(--altura-topo) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--gutter) - 10px) 0 var(--gutter);
  background: var(--cor-fundo);
}

.topo-titulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: 50%;
  color: var(--cor-texto-2);
}

.botao-icone:hover,
.botao-icone:active {
  color: var(--cor-texto);
  background: var(--cor-cartao);
}

/* ---------- Conteúdo ---------- */
#app {
  padding: 0 var(--gutter) calc(var(--altura-abas) + env(safe-area-inset-bottom) + var(--gutter));
}

/* Telas sem topo (o roteador esconde o .topo): o conteúdo cuida da área segura do topo. */
.topo[hidden] + #app {
  padding-top: env(safe-area-inset-top);
}

/* Telas placeholder (etapa 2): título e, nas telas com parâmetro, o id recebido. */
.tela-titulo {
  margin-top: 8px;
}

.tela-id {
  margin-top: 4px;
  color: var(--cor-texto-2);
  font-size: 0.875rem;
}

/* ---------- Barra inferior de abas ---------- */
.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--altura-abas) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--cor-cartao);
  border-top: 1px solid var(--cor-borda);
}

.aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: var(--toque-min);
  padding: 6px 2px;
  color: var(--cor-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.aba-rotulo {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aba[aria-current="page"] {
  color: var(--cor-destaque);
}

/* ---------- Aviso de erro fatal (etapa 4: "Dados do app inválidos") ---------- */
.aviso-erro {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--cor-destaque);
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
}

.aviso-erro h2 {
  color: var(--cor-destaque);
}

.aviso-erro p {
  margin-top: 8px;
}

.aviso-erro-detalhe {
  margin-top: 12px;
  color: var(--cor-texto-2);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* ---------- Cartões, chips e selos (etapa 5) ---------- */
.cartao {
  display: block;
  padding: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-cartao);
}

.cartao-titulo {
  margin-bottom: 12px;
  font-size: 1.375rem;
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Uma linha só, rolando para o lado; as bordas encostam na tela (gutter compensado). */
.chips-rolaveis {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 2px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.chips-rolaveis::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  min-height: var(--toque-min);
  padding: 0 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-botao);
  background: var(--cor-cartao);
  color: var(--cor-texto);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}

.chip[aria-pressed="true"] {
  border-color: var(--cor-destaque);
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
}

.selo {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-botao);
  color: var(--cor-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.selo-dificuldade {
  border-color: transparent;
  background: var(--cor-aviso-fundo);
  color: var(--cor-destaque);
}

/* ---------- Biblioteca ---------- */
.biblioteca-filtros {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}

.busca {
  position: relative;
}

.busca-icone {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--cor-texto-2);
  pointer-events: none;
}

.campo-busca {
  width: 100%;
  min-height: 48px;
  padding: 0 16px 0 44px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-botao);
  background: var(--cor-cartao);
  font-size: 1rem;
}

.campo-busca::placeholder {
  color: var(--cor-texto-2);
}

.campo-busca:focus {
  outline: none;
  border-color: var(--cor-destaque);
}

.filtro {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.filtro-rotulo {
  color: var(--cor-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.biblioteca-contagem {
  margin: 16px 0 8px;
  color: var(--cor-texto-2);
  font-size: 0.875rem;
}

.lista-exercicios {
  display: grid;
  gap: 8px;
}

.item-exercicio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: var(--toque-min);
  padding: 14px 16px;
}

.item-exercicio:active {
  border-color: var(--cor-destaque);
}

.item-exercicio-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.item-exercicio-selos,
.detalhe-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lista-vazia {
  padding: 24px 16px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto-2);
  text-align: center;
}

/* ---------- Detalhe do exercício ---------- */
.link-voltar {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  color: var(--cor-texto-2);
  font-weight: 700;
}

.detalhe-nome {
  font-size: 2rem;
  overflow-wrap: anywhere;
}

.detalhe-selos {
  margin: 10px 0 16px;
}

.detalhe-aviso {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
  color: var(--cor-destaque);
}

#app > .cartao + .cartao {
  margin-top: 12px;
}

.cartao-trilha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  border-color: var(--cor-destaque);
}

.cartao-trilha-rotulo {
  grid-column: 1 / -1;
  color: var(--cor-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cartao-trilha-nome {
  min-width: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
}

.cartao-trilha-posicao {
  color: var(--cor-destaque);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

.como-fazer-imagem {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
}

.como-fazer-imagem-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto-2);
  font-size: 0.875rem;
}

.como-fazer-passos {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.como-fazer-passos li {
  display: flex;
  gap: 12px;
}

.como-fazer-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.como-fazer-erro {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cor-aviso-fundo);
}

.como-fazer-erro strong {
  color: var(--cor-destaque);
  font-size: 0.875rem;
}

.como-fazer-erro p {
  margin-top: 2px;
}

.ficha {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ficha-linha {
  display: grid;
  gap: 2px;
}

.ficha dt {
  color: var(--cor-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ficha dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.nao-encontrado {
  margin-top: 16px;
}

.nao-encontrado p {
  margin: 8px 0 4px;
  color: var(--cor-texto-2);
}

.link-destaque {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  color: var(--cor-destaque);
  font-weight: 700;
}

/* ---------- Banner de atualização (etapa 8) ---------- */
/* Fixo logo acima da barra de abas; some só com o recarregar depois do toque em "Atualizar". */
.banner-atualizacao {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--altura-abas) + env(safe-area-inset-bottom) + 12px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--cor-destaque);
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Na tela de erro fatal as abas ficam escondidas: o banner desce para o pé da tela. */
.abas[hidden] ~ .banner-atualizacao {
  bottom: calc(env(safe-area-inset-bottom) + 12px);
}

.banner-atualizacao-texto {
  min-width: 0;
  font-weight: 700;
}

.banner-atualizacao-botao {
  flex: none;
  min-height: var(--toque-min);
  padding: 0 20px;
  border: 0;
  border-radius: var(--raio-botao);
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  font-weight: 700;
}

.banner-atualizacao-botao:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Botões de texto e cartão Backup em Ajustes (etapa 11) ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-min);
  padding: 0 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--cor-texto);
  font-weight: 700;
}

.botao-destaque {
  border-color: var(--cor-destaque);
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
}

.botao-perigo {
  border-color: var(--cor-destaque);
  color: var(--cor-destaque);
}

.botao:disabled {
  opacity: 0.6;
  cursor: default;
}

.backup {
  margin-top: 8px; /* sem título no conteúdo (fica no topo), como a Biblioteca */
}

.backup-texto,
.backup-previa-aviso {
  color: var(--cor-texto-2);
}

.backup-ultimo {
  margin: 12px 0 16px;
}

.backup-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.backup-previa:not(:empty) {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
}

.backup-previa-texto {
  font-weight: 700;
}

.backup-previa-aviso {
  margin: 4px 0 12px;
}

.backup-mensagem:not(:empty) {
  margin-top: 12px;
  overflow-wrap: anywhere;
}

.backup-mensagem.ok {
  color: var(--cor-texto);
}

.backup-mensagem.erro {
  color: var(--cor-destaque);
}

/* ---------- Hoje (etapa 12) ---------- */
.hoje {
  display: grid;
  gap: 12px;
  padding-top: 8px; /* sem título no conteúdo (fica no topo), como Ajustes */
}

/* Calendário da semana: 7 colunas; hoje com contorno, dia treinado em laranja. */
.semana-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.semana-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 0;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-cartao);
  color: var(--cor-texto-2);
}

.semana-rotulo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.semana-numero {
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.semana-dia.hoje {
  border-color: var(--cor-destaque);
}

.semana-dia.treinado {
  border-color: var(--cor-destaque);
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
}

.semana-dia.treinado .semana-numero {
  color: var(--cor-sobre-destaque);
}

.hoje-rotulo {
  color: var(--cor-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hoje-aviso {
  margin: 4px 0 12px;
  color: var(--cor-texto-2);
}

.hoje-rotina-atual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hoje-rotina-texto {
  min-width: 0;
}

.hoje-rotina-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.hoje-treino {
  border-color: var(--cor-destaque);
}

.hoje-treino-nome {
  margin: 2px 0 12px;
  font-size: 1.75rem;
}

.hoje-itens {
  display: grid;
  margin-bottom: 16px;
}

.hoje-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--cor-borda);
}

.hoje-item-texto {
  display: grid;
  min-width: 0;
}

.hoje-item-nome {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.hoje-item-trilha {
  color: var(--cor-texto-2);
  font-size: 0.8125rem;
}

.hoje-item-alvo {
  flex: none;
  color: var(--cor-destaque);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Botão grande de ação principal ("Começar treino"). */
.botao-grande {
  width: 100%;
  min-height: 56px;
  font-size: 1.125rem;
}

/* ---------- Modal (etapa 12) ---------- */
/* <dialog> nativo: ocupa a tela no celular (até 560 px de largura), com rolagem interna. */
.modal {
  width: min(560px, 100% - 2 * var(--gutter));
  max-height: calc(100dvh - 2 * var(--gutter));
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-cartao);
  color: var(--cor-texto);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.modal-quadro {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2 * var(--gutter));
}

.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.modal-corpo {
  overflow-y: auto;
  padding: 16px;
  overscroll-behavior: contain;
}

/* Escolha da rotina: Casa primeiro, depois Academia; cada local agrupado por objetivo. */
.escolha-local + .escolha-local {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
}

.escolha-local-nome {
  margin-bottom: 8px;
  font-size: 1.375rem;
  font-weight: 700;
}

.escolha-objetivo + .escolha-objetivo {
  margin-top: 12px;
}

.escolha-objetivo-nome {
  margin-bottom: 6px;
  color: var(--cor-texto-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.escolha-opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.escolha-rotina {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo);
  font-weight: 700;
  text-align: left;
}

.escolha-rotina[aria-pressed="true"] {
  border-color: var(--cor-destaque);
  background: var(--cor-aviso-fundo);
}

.escolha-atual {
  color: var(--cor-destaque);
  font-size: 0.75rem;
}

.escolha-rotina:disabled {
  opacity: 0.6;
  cursor: default;
}