/* tela-resultado-v1.css - a tela de resultado da Calculadora de Economia Tributária, tela cheia escura (direção A de PROPOSTA-TELA-RESULTADO-v1.md, aprovada pelo Rogério em 03/11/2026).
 *
 * Tudo aparece, legível e em ordem, mesmo se o programa da tela (js/tela-resultado-v1.js) não carregar: o que o programa acrescenta são só as medidas dos números e a segunda tela presa.
 * Só transparência e posição se animam; cada entrada dura de 0,4 a 0,5 segundo; nada pulsa e nenhum número conta subindo. Com "reduzir movimento" só a transparência muda.
 * Cores do projeto: azul-marinho #0c1b3a, azul forte #123a82, roxo #5b3fd6, dourado #c9933a (botão e traço; nunca texto sobre o degradê), bege #efeee9 nos rótulos e branco. Letra DM Sans. */

/* ------------------------------------------------------------------ a tela deixa de ter cartão branco */
body:has(#app.resultado-cheio:not([hidden])) .topo { position: absolute; top: 0; left: 0; right: 0; border-bottom: 0; }
body:has(#app.resultado-cheio:not([hidden])) .fundo { display: none; }
.resultado-cheio { padding-bottom: 0; }
.resultado-cheio .progresso { display: none; }
.resultado-cheio .caixa { max-width: none; margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.resultado-cheio .tela { min-height: 0; }
.resultado-cheio #tela > * { animation: none; }
.resultado-cheio :focus-visible { outline-color: #ffffff; }

.res-pista { position: relative; z-index: 1; }
.res-palco { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; overflow: clip; isolation: isolate; background-color: var(--marinho); color: #ffffff; }
.res-in { position: relative; z-index: 2; width: 100%; max-width: 1152px; margin: 0 auto; padding: 88px 16px 32px; }
.res-in > * + * { margin-top: 24px; }

/* Camada escura por trás do texto e por cima das manchas: o mesmo desenho e as mesmas contas da abertura (RELATORIO-PAGINA-NOVA-v2.md). */
.res-t1 .res-in::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: -200px; bottom: -200px; left: calc(50% - 50vw); width: 100vw;
  background: linear-gradient(180deg, rgba(12, 27, 58, .62) 0, rgba(12, 27, 58, .62) 340px, rgba(12, 27, 58, .42) 460px, rgba(12, 27, 58, .42) 100%);
}

/* ------------------------------------------------------------------ frase do Rogério */
.res-frase { font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: #ffffff; margin-bottom: 0; max-width: 760px; }
.res-frase:focus { outline: none; }   /* o foco vai para a frase para o leitor de tela, mas o contorno não aparece quando é o programa que põe o foco */
.res-frase-erro { font-size: 22px; }

/* ------------------------------------------------------------------ valores */
.res-valores { display: flex; flex-direction: column; gap: 16px; }
.res-numero { font-family: var(--sans); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #ffffff; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* nowrap só em valor em dinheiro curto */
.res-unidade { display: block; white-space: normal; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; margin-top: 6px; overflow-wrap: break-word; }
.res-rotulo { font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--bege); margin-top: 8px; }
/* Ressalva da redução da construção (COPY-RESSALVA-REDUCAO-v1.md, 05/11/2026): texto auxiliar abaixo do valor da economia, 16px, sem serifa, quebra dentro da caixa. */
.res-ressalva { font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--bege); max-width: 760px; overflow-wrap: break-word; }   /* sem margin própria: o espaço entre blocos vem de .res-in > * + * */
/* A palavra "Aproximadamente" (ordem do Rogério, 05/11/2026): antes de cada valor aproximado mostrado sozinho. Mesmo tamanho do rótulo, nunca abaixo de 14px. */
.res-aprox { font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--bege); margin: 0 0 6px; letter-spacing: 0; }
.res-aprox-linha { font-size: 14px; margin: 0; }
.res-din { white-space: nowrap; }
.res-v1-n { font-size: var(--n1, 56px); }
.res-v5-n { font-size: var(--n5, 32px); }
.res-v5 { padding-left: 0; }
.res-v27-n { font-size: min(48px, 10.6vw); }   /* o valor com centavos é mais largo que "R$253 mil": no celular acompanha a largura da tela */
.res-v28-n { font-size: min(36px, 8.6vw); }
.res-mei-n { font-size: 44px; line-height: 1.05; }
.res-v27 .res-rotulo, .res-v28 .res-rotulo, .res-mei .res-rotulo { margin: 0 0 8px; }
.res-v28 { margin-top: 24px; }
.res-traco { display: block; width: 48px; height: 2px; background: var(--ouro); }
.res-estrategia { color: #ffffff; max-width: 760px; margin-bottom: 0; }
.res-convite { color: #ffffff; max-width: 760px; margin-bottom: 0; }

/* O círculo com o sinal de certo saiu de todas as telas (ordem do Rogério, 04/11/2026). */

/* ------------------------------------------------------------------ "A conta da sua empresa" (projeto v13, 0000): linhas com fio fino, sem cartão branco */
.res-conta { max-width: 760px; }
.res-conta-titulo { font-family: var(--sans); font-size: 20px; font-weight: 700; line-height: 1.25; color: #ffffff; margin: 0 0 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .35); }
.res-conta-regime, .res-conta-nota { font-size: 16px; line-height: 1.4; color: #ffffff; margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); max-width: none; }
.res-conta-nota { color: var(--bege); border-bottom: 0; }
.res-conta-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.res-conta-rotulo { font-size: 16px; line-height: 1.35; color: var(--bege); overflow-wrap: break-word; }
.res-conta-valor { font-size: 18px; font-weight: 700; line-height: 1.25; color: #ffffff; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.res-conta-economia { border-top: 2px solid var(--ouro); border-bottom: 0; margin-top: 8px; padding-top: 14px; }
.res-conta-economia .res-conta-rotulo { color: #ffffff; font-weight: 600; }
.res-conta-economia .res-conta-valor { font-size: 28px; }
/* As duas barras: o comprimento vem dos dois valores (a variável --p vai de 0 a 1); entram só por transform em meio segundo. */
.res-barra { display: block; height: 10px; margin-top: 8px; background: rgba(255, 255, 255, .14); border-radius: 5px; overflow: hidden; grid-column: 1 / -1; }
.res-barra i { display: block; height: 100%; width: 100%; border-radius: 5px; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.res-barra.ficar i { background: rgba(255, 255, 255, .72); }
.res-barra.com i { background: var(--ouro); }
.res-barra i { transition: transform .5s var(--curva-entrada, ease-out); }
/* barra recém-montada: parte de zero; a classe "inicio" sai duas voltas de quadro depois (js/app.js) */
.res-barra.inicio i { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .res-barra i { transition: none; }
  .res-barra.inicio i { transform: scaleX(var(--p, 1)); }
}
/* Com o bloco, a primeira tela pode passar da altura da janela: o botão do WhatsApp fica preso embaixo, à vista, em qualquer largura. */
.res-t1.tem-conta .bloco-whatsapp { position: sticky; bottom: 0; z-index: 6; margin-left: -16px; margin-right: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--marinho); border-top: 1px solid rgba(255, 255, 255, .18); }
.res-t1.tem-conta .res-wa-erro .bloco-whatsapp { position: static; margin: 0; padding: 0; border-top: 0; background: transparent; }
@media (min-width: 560px) {
  .res-t1.tem-conta .bloco-whatsapp { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .res-conta-titulo { font-size: 22px; }
  .res-conta-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; }
  .res-conta-valor { text-align: right; }
  .res-conta-economia .res-conta-valor { font-size: 32px; }
}

/* ------------------------------------------------------------------ WhatsApp e botões */
.res-palco .bloco-whatsapp .paragrafo { color: #ffffff; font-size: 16px; margin-bottom: 12px; max-width: 60ch; }
.res-palco .btn { min-height: 52px; font-size: 16px; }
.res-palco .btn-ouro { width: 100%; font-weight: 700; transition: background-color .15s ease, transform .15s ease; }
.res-palco .btn-ouro:hover { transform: translateY(-2px); }
.res-palco .btn-fantasma { background: transparent; color: #ffffff; border: 2px solid #ffffff; width: 100%; }
.res-palco .btn-fantasma:hover { color: var(--ouro-claro); border-color: var(--ouro-claro); }
.res-botoes { display: flex; flex-direction: column; gap: 8px; }
.res-wa-erro .paragrafo { color: #ffffff; margin-bottom: 12px; font-size: 16px; max-width: 60ch; }

/* Celular: o WhatsApp fica preso na parte de baixo quando sairia da tela, igual à barra de AVANÇAR e VOLTAR das outras telas. */
@media (max-width: 899px) {
  .res-palco .bloco-whatsapp {
    position: sticky; bottom: 0; z-index: 6; margin-left: -16px; margin-right: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--marinho); border-top: 1px solid rgba(255, 255, 255, .18);
  }
}

/* ------------------------------------------------------------------ segunda tela (2027 e 2028) */
.res-t2 .bloco-whatsapp { position: static; margin-left: 0; margin-right: 0; padding: 0; background: transparent; border-top: 0; }   /* na segunda tela o botão fica no fim do texto: preso embaixo ele cobriria o início da tela quando ela está subindo */
.res-t2 { z-index: 3; background-color: var(--marinho); border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(4, 10, 28, .5); }
.res-t2 .res-in { padding-top: 72px; padding-bottom: 40px; }

/* Entrada: cada parte sobe 16 px e aparece em 0,4 a 0,5 segundo, uma depois da outra (o atraso vem de --atraso). */
@keyframes res-sobe { from { opacity: 0; transform: translateY(var(--sobe, 16px)); } to { opacity: 1; transform: none; } }
@keyframes res-aparece { from { opacity: 0; } to { opacity: 1; } }
.res-e { animation: res-sobe .4s var(--curva-entrada) both; animation-delay: var(--atraso, 0s); }
.res-frase { --sobe: 12px; }
.res-valor { animation-duration: .5s; }
html.js-res:not(.revelar-tudo):not(.sem-entrada) .res-t2 .res-e:not(.visivel) { animation: none; opacity: 0; transform: translateY(16px); }
html.js-res .res-t2 .res-e.visivel { animation: res-sobe .4s var(--curva-entrada) both; animation-delay: var(--atraso, 0s); }

/* ------------------------------------------------------------------ alturas baixas */
@media (max-height: 700px) {
  .res-in { padding-top: 76px; padding-bottom: 16px; }
  .res-in > * + * { margin-top: 16px; }
}

/* ------------------------------------------------------------------ tablet */
@media (min-width: 560px) {
  .res-in { padding-left: 24px; padding-right: 24px; padding-top: 112px; padding-bottom: 56px; }
  .res-frase, .res-frase-erro { font-size: 26px; }
  .res-v1-n { font-size: var(--n1, 80px); }
  .res-v5-n { font-size: var(--n5, 40px); }
  .res-v27-n { font-size: 64px; }
  .res-v28-n { font-size: 44px; }
  .res-mei-n { font-size: 56px; }
  .res-palco .bloco-whatsapp .paragrafo { font-size: 18px; }
  .res-palco .btn { min-height: 56px; }
  .res-palco .btn-ouro { width: auto; min-width: 280px; max-width: 420px; }
  .res-palco .btn-fantasma { width: auto; min-width: 220px; }
  .res-botoes { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .res-botoes .botao-tentar { order: 1; }
  .res-botoes .btn-ouro { order: 2; }
}
@media (min-width: 560px) and (max-width: 899px) and (max-height: 700px) {
  .res-in { padding-top: 88px; padding-bottom: 16px; }
}
@media (min-width: 560px) and (max-width: 899px) {
  /* Tablet e celular deitado: a frase fica ao lado do botão, e a barra presa embaixo ocupa menos altura. */
  .res-t1 .bloco-whatsapp { display: flex; align-items: center; gap: 16px; }
  .res-t1 .bloco-whatsapp .paragrafo { margin: 0; flex: 1 1 auto; }
  .res-t1 .bloco-whatsapp .btn-ouro { width: auto; flex: 0 0 auto; min-width: 280px; max-width: 420px; }
}

/* ------------------------------------------------------------------ computador */
@media (min-width: 900px) {
  .res-in { padding-top: 112px; padding-bottom: 56px; }
  .res-in > * + * { margin-top: 40px; }
  .res-frase { font-size: 32px; line-height: 1.2; }
  .res-frase-erro { font-size: 28px; }
  .res-valores { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .res-valores.empilhar, .res-t1.empilhar .res-valores { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .res-v1-n { font-size: var(--n1, 128px); }
  .res-v5-n { font-size: var(--n5, 72px); }
  .res-unidade { font-size: 20px; }
  .res-rotulo { font-size: 20px; }
  .res-aprox { font-size: 20px; }
  .res-aprox-linha { font-size: 16px; }
  .res-v27-n { font-size: 96px; }
  .res-v28-n { font-size: 56px; }
  .res-mei-n { font-size: 72px; }
  .res-v28 { margin-top: 32px; }
  .res-palco .bloco-whatsapp .btn-ouro { width: auto; }
  .res-palco .bloco-whatsapp { position: static; }
  .res-t2 .res-in { padding-top: 96px; padding-bottom: 72px; }
  .res-estrategia, .res-convite { font-size: 18px; }
  /* A primeira tela fica presa no lugar enquanto a segunda sobe por cima dela (só quando a primeira cabe na altura da janela: o programa mede e põe a classe "preso"). */
  .res-pista.preso .res-t1 { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  .res-pista.preso .res-t2 { margin-top: 0; }
}
@media (min-width: 900px) and (max-height: 700px) {   /* notebook com a janela baixa: menos espaço em cima e embaixo para a frase, o número e o botão ficarem à vista */
  .res-in { padding-top: 88px; padding-bottom: 16px; }
  .res-in > * + * { margin-top: 24px; }
}
@media (min-width: 1728px) {
  .res-frase { font-size: 36px; }
  .res-v1-n { font-size: var(--n1, 160px); }
  .res-v5-n { font-size: var(--n5, 88px); }
  .res-v27-n { font-size: 112px; }
  .res-v28-n { font-size: 64px; }
}

/* ------------------------------------------------------------------ "reduzir movimento" ligado no aparelho */
@media (prefers-reduced-motion: reduce) {
  .res-e { animation-name: res-aparece; }
  html.js-res .res-t2 .res-e.visivel { animation-name: res-aparece; }
  html.js-res:not(.revelar-tudo):not(.sem-entrada) .res-t2 .res-e:not(.visivel) { transform: none; }
  .res-palco .btn-ouro:hover { transform: none; }
}

/* ------------------------------------------------------------------ aviso de quem pulou pergunta de detalhe (METODO-DE-CALCULO-v21.md, seção 2.7; COPY-PULAR-PERGUNTA-v3.md, Parte 4) */
/* Texto de 16px, quebra dentro da caixa, nenhum nowrap em linha de texto. O espaço entre blocos vem de .res-in > * + *. */
.res-aviso { max-width: 760px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .35); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.res-aviso-titulo { font-family: var(--sans); font-size: 20px; font-weight: 700; line-height: 1.25; color: #ffffff; margin: 0 0 8px; overflow-wrap: break-word; }
.res-aviso-texto, .res-aviso-exemplo { font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.4; color: #ffffff; margin: 0 0 8px; max-width: 60ch; overflow-wrap: break-word; }
.res-aviso-exemplo { color: var(--bege); }
.res-aviso-subtitulo { font-family: var(--sans); font-size: 18px; font-weight: 700; line-height: 1.25; color: #ffffff; margin: 8px 0; overflow-wrap: break-word; }
.res-aviso .res-aviso-botao { margin-top: 8px; width: 100%; white-space: normal; }
@media (min-width: 560px) {
  .res-aviso-titulo { font-size: 22px; }
  .res-aviso .res-aviso-botao { width: auto; min-width: 320px; }
}