/* Mistério de Hoje — estilo das telas do app, compartilhado.
   Vale dentro de .tela-app: no app (body.tela-app) e na mini VSL do quiz (.demo-tela.tela-app).

   Design (teste de Luis Henrique, 2026-10-18): inspirado no padrão dos apps de banco digitais
   (bloco de cor no topo, cards arredondados com sombra suave, muito espaço, títulos grandes,
   atalhos simples, botões grandes), SEM copiar nenhum deles. Cores: a paleta do site
   misteriodehoje.online (azul-marinho, ouro e creme), para o funil ficar coerente.
   Para quem vai rezar, avós inclusive: base de 20 px, contraste AA conferido por conta
   (ferramentas/conferir-contraste.mjs), áreas de toque de 48 px ou mais, fontes do sistema. */

.tela-app {
  --marca: #1b2a5c; /* azul do site */
  --marca-escura: #14204a;
  --marca-media: #2f4a8f;
  --ouro: #e8b630;
  --ouro-claro: #f6d77a;
  --fundo: #fbf7ee; /* creme do site */
  --fundo-2: #f3ecdc;
  --cartao: #ffffff;
  --texto: #1a1f33;
  --texto-suave: #5b6177;
  --texto-no-topo: #f3ecdc;
  --linha: #e6dfcc;
  --foco: #14204a;
  --foco-no-topo: #f6d77a;
  --raio: 20px;
  --sombra: 0 10px 30px rgba(20, 32, 74, 0.1);
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem; /* 20 px */
  line-height: 1.6;
}

.tela-app,
.tela-app *,
.tela-app *::before,
.tela-app *::after {
  box-sizing: border-box;
}

/* ---- Topo: a faixa de cor da marca com o nome do app ---- */
.tela-app .topo {
  padding: 0 max(1rem, calc((100% - 38rem) / 2));
  background: var(--marca);
}

.tela-app .marca {
  display: inline-block;
  min-height: 3rem;
  padding: 0.75rem 0 0.25rem;
  color: var(--texto-no-topo);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.tela-app .conteudo-app {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* ---- Bloco de cor no topo de cada tela, com o título em destaque ---- */
.tela-app .bloco-topo {
  margin: 0 -1rem 1.5rem;
  padding: 0.75rem 1.25rem 1.75rem;
  border-radius: 0 0 28px 28px;
  background: var(--marca);
  color: #ffffff;
}

@media (min-width: 42rem) {
  .tela-app .bloco-topo {
    margin: 0 0 1.5rem;
  }
}

.tela-app h1 {
  margin: 0;
  color: inherit; /* do bloco de cor; não herda regra de título de outra página (ex.: o quiz) */
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tela-app h1:focus {
  outline: none;
}

.tela-app h1 .data {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ouro-claro);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
}

.tela-app h1 .grupo,
.tela-app h1 .nome {
  display: block;
}

.tela-app h1 .ordem {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ouro-claro);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
}

.tela-app .bloco-topo .introducao {
  margin: 1rem 0 0;
  color: var(--texto-no-topo);
  font-size: 1.15rem;
}

.tela-app h2 {
  margin: 0 0 0.5rem;
  color: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
}

.tela-app p,
.tela-app li {
  margin: 0 0 1rem;
}

.tela-app ul,
.tela-app ol {
  padding-left: 1.5rem;
}

/* ---- Cards ---- */
.tela-app .card {
  display: block;
  margin: 0 0 1rem;
  padding: 1.25rem 1.25rem 0.5rem;
  border-radius: var(--raio);
  background: var(--cartao);
  box-shadow: var(--sombra);
}

.tela-app .parte h2.rotulo {
  margin-bottom: 0.35rem;
  color: var(--marca-media);
  font-size: 1.15rem;
}

.tela-app .parte p {
  line-height: 1.65;
}

/* Cards que são botões (mistérios do dia, atalhos) */
.tela-app .card-link {
  position: relative;
  min-height: 3.5rem;
  padding: 1rem 3rem 1rem 1.25rem;
  color: var(--texto);
  line-height: 1.35;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tela-app .card-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.3rem;
  border-top: 3px solid var(--marca-media);
  border-right: 3px solid var(--marca-media);
  transform: rotate(45deg);
}

.tela-app .card-link:active {
  transform: scale(0.985);
  box-shadow: 0 4px 14px rgba(20, 32, 74, 0.12);
}

.tela-app .lista-misterios,
.tela-app .atalhos ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.tela-app .lista-misterios li,
.tela-app .atalhos li {
  margin: 0 0 0.85rem;
}

.tela-app .botao-misterio .ordem {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--marca-media);
  font-size: 1rem;
  font-weight: 700;
}

.tela-app .botao-misterio .nome {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
}

.tela-app .atalho {
  color: var(--marca);
  font-weight: 700;
}

.tela-app .atalhos.grupos .atalho {
  background: var(--fundo-2);
  box-shadow: none;
}

/* ---- Passo a passo dentro do mistério e orações fechadas ---- */
.tela-app .etapa h2 {
  color: var(--marca);
}

.tela-app .passos {
  padding-left: 1.6rem;
}

.tela-app .passos > li {
  padding-left: 0.25rem;
}

.tela-app .passos > li::marker {
  color: var(--marca-media);
  font-weight: 800;
}

.tela-app .passos > li > p {
  margin-bottom: 0.6rem;
}

.tela-app .oracao {
  margin: 0 0 0.75rem;
  border-radius: 14px;
  background: var(--fundo-2);
}

/* O nome da oração numa linha e a ação ("Ver a oração" / "Fechar") embaixo, para o nome
   não quebrar ao lado da ação em 375 px (revisão do José, 2026-10-18). */
.tela-app .oracao summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1rem;
  min-height: 3.5rem;
  padding: 0.6rem 2.75rem 0.6rem 1rem;
  position: relative;
  border-radius: 14px;
  cursor: pointer;
  list-style: none;
}

.tela-app .oracao summary::-webkit-details-marker {
  display: none;
}

.tela-app .oracao summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.4rem;
  border-right: 3px solid var(--marca-media);
  border-bottom: 3px solid var(--marca-media);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.tela-app .oracao[open] summary::after {
  margin-top: -0.1rem;
  transform: rotate(-135deg);
}

.tela-app .oracao-nome {
  font-weight: 700;
}

.tela-app .oracao-acao {
  color: var(--marca-media);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.tela-app .oracao .se-aberta,
.tela-app .oracao[open] .se-fechada {
  display: none;
}

.tela-app .oracao[open] .se-aberta {
  display: inline;
}

.tela-app .oracao-texto {
  margin: 0;
  padding: 0.25rem 1rem 1rem;
  line-height: 1.65;
}

/* ---- Botões de navegação ---- */
.tela-app .navegacao {
  margin-top: 1.5rem;
}

.tela-app .botao {
  display: block;
  min-height: 3.5rem;
  margin-bottom: 0.85rem;
  padding: 0.9rem 1.25rem;
  border: 2px solid var(--marca);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--marca);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.tela-app .botao:active {
  transform: scale(0.985);
}

.tela-app .botao-principal {
  border-color: var(--ouro);
  border-radius: var(--raio);
  background: var(--ouro);
  color: var(--marca-escura);
  text-align: left;
}

.tela-app .botao .rotulo-botao {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.tela-app .botao .nome {
  display: block;
  font-size: 1.15rem;
}

/* ---- Foco do teclado ---- */
.tela-app a:focus-visible,
.tela-app summary:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.tela-app .topo a:focus-visible,
.tela-app .bloco-topo a:focus-visible {
  outline-color: var(--foco-no-topo);
}

/* ---- Tabela e texto corrido ---- */
.tela-app table {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
}

.tela-app th,
.tela-app td {
  padding: 0.6rem 0.5rem 0.6rem 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}

.tela-app .fonte {
  color: var(--texto-suave);
  font-size: 1.05rem;
}

/* ---- Transição suave ao trocar de tela ---- */
.tela-app .conteudo-app > * {
  animation: tela-app-entrar 0.25s ease-out both;
}

/* O bloco de cor fica parado, colado na faixa do topo; só os cards deslizam */
.tela-app .conteudo-app > .bloco-topo {
  animation: none;
}

/* Só o deslocamento: se a animação não rodar (aba em segundo plano, navegador econômico),
   a tela aparece inteira, nunca apagada (revisão do José, 2026-10-18). */
@keyframes tela-app-entrar {
  from {
    transform: translateY(10px);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tela-app *,
  .tela-app *::before,
  .tela-app *::after {
    animation: none !important;
    transition: none !important;
  }
}