/* Pirâmide das Telas — Guardião Digital
   app.css — seção 7 da especificação. Nenhuma cor fora da Tabela 15. */

/* ---------- 7.1 tokens ---------- */
:root {
  --ink:     #23244F;
  --deep:    #33346F;
  --brand:   #4A4BA6;
  --amarelo: #F5C518;
  --coral:   #E8403A;
  --ciano:   #1EC8CC;
  --verde:   #4CAF50;
  --rosa:    #E91E8C;
  --lilas:   #7B7CD4;
  --branco:  #FFFFFF;
  --suave:   rgba(255,255,255,.76);
  --tenue:   rgba(255,255,255,.54);
  --linha:   rgba(255,255,255,.16);

  --calha: 104px;
  --altura-faixa: 52px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M0 22 L15 8 L30 22' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.4'/%3E%3Cpath d='M0 8 L15 -6 L30 8' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--suave);
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 { color: var(--branco); margin: 0; }

/* ---------- 7.9 grade ---------- */
.envelope {
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 24px 64px;
}
.envelope--resultado { max-width: 940px; }

/* ---------- topo ---------- */
.topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.topo__logo { height: 30px; width: auto; display: block; }
.topo__logo--papel, .topo__nome--papel { display: none; }
.topo__nome {
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 700;
}

/* ---------- 7.8 barra de progresso ---------- */
.progresso {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 30px;
}
.progresso__seg {
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.15);
  transition: background 300ms ease;
}
.progresso__seg--feito { background: var(--amarelo); }

/* ---------- telas ---------- */
.tela { animation: none; }
.tela[hidden] { display: none; }

.pergunta {
  font-size: 31px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--branco);
  margin: 0 0 10px;
}
.apoio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tenue);
  margin: 0 0 26px;
  max-width: 58ch;
}

.abertura__titulo {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.06;
  color: var(--branco);
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.manuscrito {
  font-family: 'Schoolbell', 'Comic Sans MS', cursive;
  font-size: 23px;
  line-height: 1.2;
  color: var(--amarelo);
  margin: 22px 0 26px;
}

/* ---------- 7.8 campos ---------- */
.campo { margin-bottom: 24px; }
.campo__rotulo {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--branco);
  margin-bottom: 9px;
  line-height: 1.3;
}
.campo__texto {
  width: 100%;
  max-width: 340px;
  background: rgba(0,0,0,.20);
  border: 1px solid var(--linha);
  border-radius: 12px;
  color: var(--branco);
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  min-height: 48px;
}
.campo__texto::placeholder { color: rgba(255,255,255,.38); }
.campo__texto:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }

/* chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0;
  margin: 0;
  border: 0;
}
.chips--idade .chip { min-width: 88px; justify-content: center; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 17px;
  border-radius: 100px;
  border: 1px solid var(--linha);
  background: rgba(0,0,0,.20);
  color: var(--suave);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.chip:hover { border-color: rgba(255,255,255,.34); }
.chip:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--ink);
  font-weight: 700;
}

/* blocos de atividade por aparelho */
.bloco { margin-bottom: 22px; }
.bloco__rotulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--branco);
  margin: 0 0 10px;
  line-height: 1.3;
}
.bloco__nota {
  font-size: 13px;
  color: var(--tenue);
  margin: 0 0 10px;
}

/* ---------- 7.8 controle deslizante ---------- */
.leitura {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--amarelo);
  margin: 4px 0 20px;
}
.deslizante { padding: 4px 0 0; }
.deslizante input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.deslizante input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(to right, var(--amarelo) var(--preenchido, 20%), rgba(255,255,255,.15) var(--preenchido, 20%));
}
.deslizante input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.15);
}
.deslizante input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 6px;
  background: var(--amarelo);
}
.deslizante input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--branco);
  border: 3px solid var(--amarelo);
  margin-top: -9px;
}
.deslizante input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid var(--amarelo);
  border-radius: 50%;
  background: var(--branco);
}
.deslizante input[type="range"]:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 6px; }
.marcacoes {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--tenue);
  margin-top: 10px;
}

/* ---------- 7.8 botões ---------- */
.acoes-tela {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 100px;
  padding: 14px 30px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
}
.botao--primario { background: var(--amarelo); color: var(--ink); }
.botao--secundario { background: transparent; color: var(--tenue); padding: 14px 18px; font-weight: 400; }
.botao--contorno {
  background: transparent;
  color: var(--branco);
  border: 1px solid var(--linha);
}
.botao:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.botao[disabled] { opacity: .35; cursor: not-allowed; }
.botao--secundario:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }

.aviso-limite {
  font-size: 13.5px;
  color: var(--amarelo);
  margin: 12px 0 0;
  min-height: 20px;
}
.privacidade {
  font-size: 12.5px;
  color: var(--tenue);
  margin: 14px 0 0;
  line-height: 1.6;
}

/* ---------- estado calculando ---------- */
.calculando {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 46vh;
  text-align: center;
}
.calculando__texto { font-size: 15px; color: var(--tenue); }
.girador {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--amarelo);
  animation: girar 900ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- resultado ---------- */
.resultado__bloco { margin-bottom: 34px; }
.rotulo-bloco {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--branco);
  text-transform: none;
  margin: 0 0 14px;
}
.resultado__cabecalho { margin-bottom: 28px; }
.resultado__titulo {
  font-size: 31px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--branco);
  margin: 0 0 12px;
}
.veredito {
  font-size: 16px;
  line-height: 1.55;
  color: var(--suave);
  margin: 0;
  max-width: 62ch;
}
.corpo { font-size: 16px; line-height: 1.55; color: var(--suave); margin: 0; max-width: 62ch; }

/* ---------- 7.3 / 7.4 pirâmide ---------- */
.piramide { margin: 0; }
.linha {
  display: grid;
  grid-template-columns: var(--calha) minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-bottom: 4px;
}
.linha__rotulo {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tenue);
}
/* O teto de horas fica na calha, e não dentro do trapézio: sobre coral, rosa e
   lilás nenhum texto alcança 4,5:1, e na ponta não haveria largura para ele. */
.linha__valor {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--suave);
}
.faixa {
  position: relative;
  height: var(--altura-faixa);
  opacity: .30;
}
.faixa__halo {
  position: absolute;
  inset: -3px;
  background: var(--branco);
  clip-path: var(--clip);
  display: none;
}
.faixa__forma {
  position: absolute;
  inset: 0;
  background: var(--c);
  clip-path: var(--clip);
}
.linha--ativa .faixa { opacity: 1; }
.linha--ativa .faixa__halo { display: block; }
.linha--ativa .linha__rotulo { color: var(--branco); font-weight: 700; }
.linha--ativa .linha__valor { color: var(--branco); }

.legenda-piramide {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--suave);
}

/* 7.5 entrada em cena */
.piramide--anima .linha {
  opacity: 0;
  transform: translateY(-10px);
  animation: entrarFaixa 420ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes entrarFaixa { to { opacity: 1; transform: none; } }

/* ---------- 7.6 barras comparativas ---------- */
.painel {
  background: var(--deep);
  border-radius: 16px;
  padding: 24px;
}
.barra { margin-bottom: 18px; }
.barra:last-of-type { margin-bottom: 0; }
.barra__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  margin-bottom: 7px;
}
.barra__rotulo { color: var(--suave); }
.barra__valor { color: var(--branco); font-weight: 700; white-space: nowrap; }
.barra__trilho {
  height: 14px;
  border-radius: 8px;
  background: rgba(0,0,0,.24);
  overflow: hidden;
}
.barra__preenchimento {
  height: 100%;
  border-radius: 8px;
  background: var(--c);
  width: 0;
  transition: width 700ms cubic-bezier(.2,.7,.3,1);
}
.deslocamento {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--suave);
  border-top: 1px solid var(--linha);
  padding-top: 16px;
}

/* ---------- 7.7 cartões ---------- */
.cartoes { display: flex; flex-direction: column; gap: 11px; }
.cartao {
  background: var(--deep);
  border-radius: 14px;
  padding: 17px 20px;
  border-left: 4px solid var(--c);
}
.cartao__titulo {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--branco);
  margin: 0 0 6px;
}
.cartao__texto {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--suave);
  margin: 0;
  max-width: 56ch;
}
.cartao--p1 { --c: var(--coral); }
.cartao--p2 { --c: var(--amarelo); }
.cartao--p3 { --c: var(--ciano); }
.cartao--positivo { --c: var(--verde); }

/* ações numeradas */
.acao {
  background: var(--deep);
  border-radius: 14px;
  padding: 17px 20px;
  border-left: 4px solid var(--amarelo);
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}
.acao__numero {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* fecho */
.fecho {
  background: var(--deep);
  border-radius: 16px;
  padding: 26px 28px;
  border: 1px solid var(--linha);
}
.fecho__frase {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--branco);
  margin: 0;
}

/* rodapé */
.rodape {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tenue);
  border-top: 1px solid var(--linha);
  padding-top: 20px;
  margin-top: 8px;
}
.rodape p { margin: 0 0 10px; }
.rodape p:last-child { margin: 0; }

/* ---------- utilitários ---------- */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 7.10 responsivo ---------- */
@media (max-width: 879px) {
  :root { --calha: 88px; --altura-faixa: 48px; }
  .envelope { padding: 20px 20px 56px; }
}

@media (max-width: 639px) {
  :root { --calha: 76px; --altura-faixa: 44px; }
  body { font-size: 15px; }
  .envelope { padding: 18px 18px 52px; }
  .abertura__titulo { font-size: 30px; }
  .pergunta, .resultado__titulo { font-size: 23px; }
  .apoio { font-size: 14px; }
  .corpo, .veredito { font-size: 15px; }
  .manuscrito { font-size: 19px; }
  .leitura { font-size: 36px; }
  .linha__rotulo { font-size: 11.5px; }
  .linha__valor { font-size: 12px; }
  .cartao__titulo { font-size: 15px; }
  .rotulo-bloco { font-size: 13px; }
  .fecho__frase { font-size: 18px; }
  .botao { width: 100%; }
  .acoes-tela { flex-direction: column-reverse; align-items: stretch; }
  .painel { padding: 20px 18px; }
  .linha { gap: 10px; }
}

@media (max-width: 359px) {
  .abertura__titulo { font-size: 26px; }
  .leitura { font-size: 32px; }
}

/* ---------- 7.11 movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .piramide--anima .linha { opacity: 1; transform: none; animation: none; }
  .barra__preenchimento { transition: none; }
  .girador { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- 9.4 impressão ---------- */
@media print {
  @page { margin: 14mm; }
  body {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #000000;
    font-size: 11pt;
  }
  .progresso, .acoes-tela, .botao, .topo__logo, .topo__nome, .nao-imprimir { display: none !important; }
  .topo__logo--papel { display: block !important; }
  .topo__nome--papel { display: inline !important; color: #23244F !important; }
  .envelope, .envelope--resultado { max-width: none; padding: 0; }
  h1, h2, h3, .cartao__titulo, .resultado__titulo, .rotulo-bloco, .fecho__frase { color: #000000 !important; }
  .corpo, .veredito, .cartao__texto, .barra__rotulo, .deslocamento { color: #1a1a1a !important; }
  .barra__valor { color: #000000 !important; }
  .barra__preenchimento { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .faixa__halo { background: #23244F !important; }
  .acao__numero { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .painel, .cartao, .acao, .fecho {
    background: #FFFFFF !important;
    border: 1px solid #cccccc;
    border-left-width: 4px;
    border-left-style: solid;
    break-inside: avoid;
  }
  .acao__numero { background: #23244F !important; color: #FFFFFF !important; }
  .barra__trilho { background: #eeeeee !important; }
  .linha__rotulo, .linha__valor { color: #444444 !important; }
  .linha--ativa .linha__rotulo, .linha--ativa .linha__valor { color: #000000 !important; }
  .faixa { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .faixa__forma { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rodape { color: #555555 !important; border-top-color: #cccccc; }
  .cabecalho-impresso { display: block !important; }
  .piramide--anima .linha { opacity: 1 !important; transform: none !important; animation: none !important; }
}
.cabecalho-impresso { display: none; }