/* ============================================================
   A PROVA DE INTENCAO — sistema visual
   Escuro, cinematografico, sem rosa de banca de revista.
   ============================================================ */

:root {
  --tinta: #07080b;
  --tinta-2: #0d1015;
  --painel: #12161d;
  --painel-alto: #1a1f28;
  --linha: #262d38;
  --linha-viva: #3a4453;

  --texto: #eef1f5;
  --texto-2: #a8b2c0;
  --texto-3: #6f7b8b;

  --ambar: #e5a55c;
  --ambar-claro: #f5c98d;
  --ambar-fundo: rgba(229, 165, 92, 0.12);
  --rosa: #c97b7b;
  --verde: #7fb08a;
  --cinza-selo: #7a8698;

  --frio: #6d8ba8;
  --morno: #c9a05c;
  --quente: #d9a066;

  --raio: 16px;
  --raio-p: 10px;
  --sombra: 0 20px 60px -20px rgba(0, 0, 0, 0.8);
  --sombra-alta: 0 30px 90px -25px rgba(0, 0, 0, 0.95);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --mola: cubic-bezier(0.22, 1, 0.36, 1);
  --suave: cubic-bezier(0.4, 0, 0.2, 1);

  --larg: min(660px, 100% - 2.5rem);
}

* { box-sizing: border-box; }

html {
  background: var(--tinta);
}

/* O body NAO pode ter fundo proprio quando ha camadas de z-index negativo. */
html, body {
  margin: 0;
  padding: 0;
  color: var(--texto);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

body {
  min-height: 100svh;
  min-height: 100dvh;
}

#palco {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  isolation: isolate;
}

/* Nenhuma foto atras do texto: legibilidade vem antes de atmosfera. O clima
   fica por conta de um brilho ambar estatico; as fotos vivem na .faixa. */
#ambiente {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -12%, rgba(229, 165, 92, 0.13), transparent 70%),
    radial-gradient(75% 50% at 100% 100%, rgba(109, 139, 168, 0.10), transparent 70%);
}

/* ---------------- a faixa de imagem ---------------- */

.faixa {
  position: relative;
  height: clamp(140px, 24svh, 230px);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}

.faixa i {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* as fotos saem do Gemini com luminancia media de ~14%: precisam ser levantadas */
  filter: brightness(1.75) saturate(1.15);
  opacity: 0;
  animation: faixaEntra 0.9s var(--suave) forwards, kenburns 20s ease-out forwards;
  will-change: opacity, transform;
}

@keyframes faixaEntra { to { opacity: 1; } }

@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(0, -1.6%, 0); }
}

/* Funde a base da foto no fundo da pagina, para nao virar retangulo colado. */
.faixa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.08) 0%, rgba(7, 8, 11, 0.3) 55%, rgba(7, 8, 11, 0.8) 100%);
}

/* Grao de filme, em SVG inline para nao custar requisicao. */
#grao {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- telas ---------------- */

.tela {
  display: none;
  width: var(--larg);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) 0 5rem;
  min-height: 100svh;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: center;
}

.tela.ativa { display: flex; }

/* ---------------- tipografia ---------------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }

h1 { font-size: clamp(2rem, 7.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 5.2vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 3.6vw, 1.35rem); }

p { line-height: 1.65; margin: 0 0 1.1em; color: var(--texto-2); }

.sobrelinha {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 1rem;
}

.voz {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3.9vw, 1.35rem);
  line-height: 1.6;
  color: var(--texto);
  font-style: italic;
  border-left: 2px solid var(--ambar);
  padding-left: 1.25rem;
}

/* ---------------- botoes ---------------- */

.btn {
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  padding: 1.05rem 2rem;
  background: linear-gradient(135deg, var(--ambar-claro), var(--ambar));
  color: #1a1206;
  transition: transform 0.25s var(--mola), box-shadow 0.25s var(--suave), filter 0.2s;
  box-shadow: 0 12px 34px -12px rgba(229, 165, 92, 0.7);
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Brilho que varre o botao, chamando o toque. */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  animation: varredura 4.5s ease-in-out infinite;
}

@keyframes varredura {
  0%, 62% { left: -120%; }
  85%, 100% { left: 140%; }
}

.btn-fantasma {
  background: transparent;
  color: var(--texto-2);
  box-shadow: none;
  border: 1px solid var(--linha);
  padding: 0.85rem 1.6rem;
}
.btn-fantasma::after { display: none; }
.btn-fantasma:hover { color: var(--texto); border-color: var(--linha-viva); background: rgba(255, 255, 255, 0.03); }

/* ---------------- login ---------------- */

.cartao {
  background: linear-gradient(160deg, rgba(26, 31, 40, 0.92), rgba(13, 16, 21, 0.96));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.6rem, 5vw, 2.6rem);
  box-shadow: var(--sombra-alta);
  backdrop-filter: blur(14px);
}

.selo-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ambar);
  border: 1px solid var(--ambar-fundo);
  background: var(--ambar-fundo);
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
}

.campo {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 1rem 1.1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.campo::placeholder { color: var(--texto-3); }
.campo:focus {
  outline: none;
  border-color: var(--ambar);
  box-shadow: 0 0 0 4px var(--ambar-fundo);
}

.erro {
  color: var(--rosa);
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
  min-height: 1.2em;
}

/* ---------------- progresso: as 4 moedas ---------------- */

#progresso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem clamp(1rem, 4vw, 1.5rem);
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.92), rgba(7, 8, 11, 0));
  backdrop-filter: blur(6px);
}

#progresso.visivel { display: flex; }

.trilha {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  overflow: hidden;
}

.trilha i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-claro));
  transition: width 0.65s var(--mola);
}

.trilha.completa i { background: var(--verde); }

#contador {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  min-width: 3.4em;
  text-align: right;
}

/* ---------------- pergunta ---------------- */

.cabeca-pergunta {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.n-pergunta {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ambar);
  opacity: 0.5;
}

.rotulo-moeda {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.enunciado {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5.2vw, 1.95rem);
  line-height: 1.28;
  margin: 0 0 1.6rem;
  color: var(--texto);
}

/* Revelacao palavra a palavra. */
.enunciado .pal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: subirPalavra 0.5s var(--mola) forwards;
}

@keyframes subirPalavra {
  to { opacity: 1; transform: translateY(0); }
}

.opcoes { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }

.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: rgba(18, 22, 29, 0.82);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 1rem 1.1rem;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(14px);
  animation: entrarOpcao 0.5s var(--mola) forwards;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--mola);
  touch-action: manipulation;
}

@keyframes entrarOpcao {
  to { opacity: 1; transform: translateY(0); }
}

.opcao:hover {
  border-color: var(--linha-viva);
  background: rgba(26, 31, 40, 0.95);
  transform: translateX(3px);
}

.opcao .letra {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linha-viva);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-3);
  transition: all 0.25s var(--mola);
}

.opcao .txt { line-height: 1.45; font-size: 0.97rem; }

/* Estado escolhido: preenchimento que varre da esquerda. */
.opcao.escolhida {
  border-color: var(--ambar);
  color: #1a1206;
}

.opcao.escolhida .letra {
  background: #1a1206;
  color: var(--ambar-claro);
  border-color: transparent;
  transform: scale(1.1);
}

.opcao .preenche {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--ambar-claro), var(--ambar));
  transform: scaleX(0);
  transform-origin: left;
}

.opcao.escolhida .preenche {
  animation: varrerPreenchimento 0.42s var(--mola) forwards;
}

@keyframes varrerPreenchimento {
  to { transform: scaleX(1); }
}

.nota-pergunta {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--texto-3);
  border-left: 2px solid var(--linha-viva);
  padding-left: 0.9rem;
  font-style: italic;
}

.rodape-pergunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.6rem;
  gap: 1rem;
}

.dica-teclado { font-size: 0.75rem; color: var(--texto-3); }
@media (hover: none) { .dica-teclado { display: none; } }

/* ---------------- interstitial de moeda ---------------- */

.moeda-intro { text-align: center; }

.disco {
  width: clamp(140px, 42vw, 200px);
  aspect-ratio: 1;
  margin: 0 auto 2rem;
  border-radius: 50%;
  position: relative;
  background-size: cover;
  background-position: center;
  filter: brightness(1.65) saturate(1.15);
  border: 1px solid rgba(229, 165, 92, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 24px 70px -18px rgba(229, 165, 92, 0.42);
  animation: girarDisco 1.1s var(--mola) forwards;
  transform-style: preserve-3d;
}

@keyframes girarDisco {
  from { transform: rotateY(-180deg) scale(0.6); opacity: 0; }
  to   { transform: rotateY(0) scale(1); opacity: 1; }
}

.disco::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28), transparent 55%);
}

.numero-moeda {
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 0.8rem;
}

/* ---------------- apuracao ---------------- */

.apurando { text-align: center; }

.colunas { display: grid; gap: 1rem; margin: 2.5rem 0; }

.coluna-linha { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.85rem; }

.coluna-nome { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); text-align: right; }

.coluna-barra { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }

.coluna-barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 1.4s var(--mola);
}

.coluna-linha[data-col="p"] i { background: linear-gradient(90deg, #4a5a6d, var(--frio)); }
.coluna-linha[data-col="c"] i { background: linear-gradient(90deg, #8a7440, var(--morno)); }
.coluna-linha[data-col="k"] i { background: linear-gradient(90deg, var(--ambar), var(--ambar-claro)); }

.coluna-valor { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; min-width: 2.2em; text-align: right; }

.pulso {
  width: 54px;
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--ambar);
  animation: pulsar 1.4s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { transform: scale(0.85); opacity: 0.35; }
  50% { transform: scale(1.1); opacity: 1; }
}

.status-apuracao { color: var(--texto-3); font-size: 0.9rem; min-height: 1.4em; }

/* ---------------- resultado ---------------- */

.veredito-capa {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--linha);
  margin-bottom: 1.8rem;
  box-shadow: var(--sombra-alta);
}

.veredito-capa img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

.veredito-tampa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.2rem, 4vw, 2rem);
  background: linear-gradient(0deg, rgba(7, 8, 11, 0.96) 12%, rgba(7, 8, 11, 0.45) 55%, transparent 100%);
}

.veredito-nome {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  line-height: 1;
  margin: 0.3rem 0 0;
}

/* Cada letra sobe de tras de uma mascara. */
.veredito-nome .ltr {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em) rotate(4deg);
  animation: subirLetra 0.6s var(--mola) forwards;
}

@keyframes subirLetra {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

[data-tom="frio"]   .veredito-nome { color: var(--frio); }
[data-tom="morno"]  .veredito-nome { color: var(--morno); }
[data-tom="quente"] .veredito-nome { color: var(--ambar-claro); }
[data-tom="neutro"] .veredito-nome { color: var(--texto); }

.resumo-veredito {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.6vw, 1.2rem);
  color: var(--texto-2);
  margin: 0.8rem 0 0;
  font-style: italic;
}

/* --- quadro das 4 moedas: o print que ela manda pra amiga --- */

.quadro-moedas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin: 1.8rem 0;
}

.moeda-card {
  position: relative;
  border-radius: var(--raio-p);
  border: 1px solid var(--linha);
  padding: 1rem;
  background: rgba(18, 22, 29, 0.9);
  overflow: hidden;
  opacity: 0;
  transform: rotateX(-70deg);
  transform-origin: top;
  animation: virarMoeda 0.75s var(--mola) forwards;
}

@keyframes virarMoeda {
  to { opacity: 1; transform: rotateX(0); }
}

.moeda-card[data-selo="paga"]  { border-color: rgba(127, 176, 138, 0.45); }
.moeda-card[data-selo="falta"] { border-color: rgba(201, 123, 123, 0.35); }

.moeda-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-size: cover;
  background-position: center;
  background-image: var(--face);
}

.moeda-card > * { position: relative; }

.moeda-titulo { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 0.5rem; }

.moeda-selo {
  font-family: var(--serif);
  font-size: 1.22rem;
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.moeda-card[data-selo="paga"]  .moeda-selo { color: var(--verde); }
.moeda-card[data-selo="falta"] .moeda-selo { color: var(--rosa); }

.moeda-pontos { font-size: 0.7rem; color: var(--texto-3); margin-top: 0.45rem; font-variant-numeric: tabular-nums; }

/* --- corpo do diagnostico --- */

.diagnostico { margin-top: 2rem; }

.diagnostico p { font-size: 1.02rem; }

.diagnostico p:first-of-type {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 4.2vw, 1.45rem);
  color: var(--texto);
  line-height: 1.45;
}

.bloco-rota {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ambar);
  border-radius: var(--raio-p);
  background: rgba(18, 22, 29, 0.7);
  padding: 1.3rem clamp(1.1rem, 4vw, 1.6rem);
  margin: 2rem 0;
}

.bloco-nota {
  border: 1px solid rgba(201, 123, 123, 0.35);
  background: rgba(201, 123, 123, 0.07);
  border-radius: var(--raio-p);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
}

.bloco-nota h3 { color: var(--rosa); margin-bottom: 0.6rem; }

.travas-lista { display: grid; gap: 0.6rem; margin: 1.4rem 0; }

.trava-item {
  display: flex;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--texto-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 0.85rem 1rem;
  line-height: 1.5;
}

.trava-item b { color: var(--ambar); font-weight: 600; }

.protocolo { display: grid; gap: 0.55rem; margin: 1.2rem 0 0; }

.protocolo-linha {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--linha);
  font-size: 0.92rem;
}

.protocolo-linha b { color: var(--ambar); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.15em; }

.retorno {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px dashed var(--linha-viva);
  border-radius: var(--raio-p);
  padding: 1.05rem 1.2rem;
  margin: 1.8rem 0;
  font-size: 0.92rem;
  color: var(--texto-2);
}

.rodape-fixo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--texto-3);
  line-height: 1.6;
  border-top: 1px solid var(--linha);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 2rem 0 0;
}

.acoes .btn { flex: 1 1 auto; }

/* ---------------- historico ---------------- */

.historico-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 1rem 1.15rem;
  margin-bottom: 0.6rem;
  background: rgba(18, 22, 29, 0.7);
}

.historico-apelido { font-family: var(--serif); font-size: 1.1rem; }
.historico-data { font-size: 0.78rem; color: var(--texto-3); margin-top: 0.2rem; }

.pastilha {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.pastilha[data-v="passatempo"]  { color: var(--frio); }
.pastilha[data-v="confortavel"] { color: var(--morno); }
.pastilha[data-v="candidato"]   { color: var(--ambar); }
.pastilha[data-v="cinzenta"]    { color: var(--cinza-selo); }
.pastilha[data-v="amostra"]     { color: var(--cinza-selo); }

/* ---------------- topo fixo ---------------- */

#barra-topo {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 45;
  display: none;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
}

#barra-topo.visivel { display: flex; }

.mini {
  appearance: none;
  border: 1px solid var(--linha);
  background: rgba(13, 16, 21, 0.85);
  color: var(--texto-3);
  border-radius: 999px;
  font: inherit;
  font-size: 0.74rem;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 0.2s, border-color 0.2s;
}

.mini:hover { color: var(--texto); border-color: var(--linha-viva); }

/* ---------------- utilitarios ---------------- */

.pilha > * + * { margin-top: 1.2rem; }
.centro { text-align: center; }
.oculto { display: none !important; }

/* Classes no lugar de atributos style: o CSP desta area e estrito
   (style-src 'self', sem 'unsafe-inline'), entao atributo style nao aplica.
   O que precisa ser dinamico (atrasos e imagens) e setado via CSSOM em
   aplicarEstilos(), que o CSP permite. */
.m0 { margin: 0; }
.esp-topo { margin-top: 1.6rem; }
.esp-topo-g { margin-top: 2.2rem; }
.esp-base { margin-bottom: 1rem; }
.esp-base-p { margin-bottom: 0.9rem; }
.esp-base-g { margin-bottom: 1.4rem; }
.titulo-login { margin: 1.2rem 0 0.8rem; }
.btn-bloco { width: 100%; margin-top: 0.4rem; }
.nota-login { font-size: 0.82rem; color: var(--texto-3); margin: 1.3rem 0 0; }
.sub-abertura { font-size: 0.84rem; color: var(--texto-3); }
.ajuda-triagem { margin: -0.8rem 0 1.4rem; font-size: 0.9rem; color: var(--texto-3); }
.texto-moeda { max-width: 34rem; margin-inline: auto; }
.legenda { font-size: 0.9rem; margin-top: 0.4rem; }
.fecho-dx { font-family: var(--serif); font-size: 1.1rem; color: var(--texto); }
.destaque { color: var(--texto); }
.icone-retorno { font-size: 1.3rem; }

.aparece {
  opacity: 0;
  transform: translateY(18px);
  animation: aparecer 0.7s var(--mola) forwards;
}

@keyframes aparecer {
  to { opacity: 1; transform: translateY(0); }
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- telas estreitas ---------------- */

/* Em ~360px de largura util os dois cards de moeda ficam com ~170px cada e
   "Moeda paga" comeca a quebrar. Aperta a tipografia antes de quebrar. */
@media (max-width: 400px) {
  .moeda-card { padding: 0.8rem; }
  .moeda-selo { font-size: 1.02rem; gap: 0.3rem; }
  .moeda-titulo { font-size: 0.62rem; letter-spacing: 0.1em; }
  .moeda-pontos { font-size: 0.65rem; }
  .acoes .btn { flex-basis: 100%; }
  .protocolo-linha { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---------------- respeito a acessibilidade ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .faixa i { animation: none; opacity: 1; }
  .btn::after { display: none; }
}

/* ---------------- impressao: vira o PDF do diagnostico ---------------- */

@media print {
  @page { margin: 16mm 14mm; }

  /* A .faixa e fundo CSS: nao imprime de forma confiavel, entao sai do papel. */
  #ambiente, #grao, .faixa, #progresso, #barra-topo, .acoes, .dica-teclado { display: none !important; }

  html, body { background: #fff; color: #14181f; }
  .tela { display: none !important; }
  .tela#tela-resultado { display: block !important; min-height: 0; width: 100%; padding: 0; }

  p, .diagnostico p { color: #2f3742; font-size: 10.5pt; line-height: 1.55; }

  /* Estes usam var(--texto), que e quase branco: no papel sumiriam. */
  .diagnostico p:first-of-type,
  .fecho-dx,
  .destaque,
  .retorno { color: #14181f; }
  .diagnostico p:first-of-type { font-size: 13pt; }

  /* A capa vira cabecalho tipografico. A foto e escura demais para papel e
     depende de "imprimir grafico de fundo", que vem desligado no Chrome. */
  .veredito-capa img { display: none !important; }
  .veredito-capa {
    position: static;
    border: 0;
    border-bottom: 2pt solid #14181f;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: 6mm;
    margin-bottom: 6mm;
    break-inside: avoid;
    break-after: avoid;
  }
  .veredito-tampa { position: static; padding: 0; background: none; display: block; }
  .veredito-nome { color: #14181f !important; font-size: 30pt; margin: 2mm 0 0; }
  .veredito-nome .ltr { opacity: 1 !important; transform: none !important; }
  .sobrelinha { color: #6b7480 !important; font-size: 7.5pt; }
  .resumo-veredito { color: #14181f; font-size: 12pt; margin-bottom: 5mm; }

  /* As quatro moedas sao o resumo do diagnostico: nunca partir entre paginas. */
  .quadro-moedas { break-inside: avoid; page-break-inside: avoid; gap: 3mm; }
  .moeda-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    background: #fff;
    border: 1pt solid #b9c0ca;
    break-inside: avoid;
  }
  .moeda-card::before { display: none; }
  .moeda-titulo { color: #6b7480; }
  .moeda-card[data-selo="paga"]  { border-color: #4f7a5b; }
  .moeda-card[data-selo="falta"] { border-color: #a75f5f; }
  .moeda-card[data-selo="paga"]  .moeda-selo { color: #35603f !important; }
  .moeda-card[data-selo="falta"] .moeda-selo { color: #8d4646 !important; }

  .cartao, .bloco-rota, .trava-item, .retorno, .bloco-nota { background: #fff; border-color: #b9c0ca; }
  .bloco-rota { border-left: 3pt solid #14181f; break-inside: avoid; }
  .bloco-nota h3 { color: #8d4646 !important; }
  .protocolo-linha b, .trava-item b { color: #14181f !important; }
  .protocolo-linha, .retorno { break-inside: avoid; }
  .rodape-fixo { color: #6b7480; border-color: #b9c0ca; break-inside: avoid; }

  /* Nada de elementos entrando com animacao num meio impresso. */
  .aparece, .pal, .ltr { opacity: 1 !important; transform: none !important; animation: none !important; }
}