/* LAB DE FLUÊNCIA — CAMADA "TUTOR" (remodelação visual, 21/10/2026).
   Aplica o Sistema Visual v1 (congelado em 06/10/2026: prototipos/sistema-visual/) às telas do ADULTO, e SÓ no modo
   final (html[data-final="1"]). Sem ?final=1 nada aqui vale: o LAB antigo fica idêntico.
   Usa só os tokens canônicos (--mp-*, vendor/sistema-visual-tokens.css). Nenhuma cor, fonte ou tamanho novo.
   Não toca: vendor/styles.css (cópia da produção), app/, lógica, textos da criança, seletores da verificação.
   Áreas da criança (letra bastão, cena, frase, palavra, história): a caixa volta a ser a de antes (ver B1 no relatório). */

/* ── B1 · FUNDAÇÃO ─────────────────────────────────────────────────────────────────────────────────────────── */
html[data-final="1"] body {
  background: var(--mp-color-surface-page);
  color: var(--mp-color-text-primary);
  font-family: var(--mp-type-body-family);
  text-transform: none; /* o adulto lê em caixa normal (a produção põe tudo em maiúscula no body) */
}
/* A criança continua lendo exatamente como antes. Só voltam à maiúscula as áreas da criança que a HERDAVAM do body da
   produção (a grade de palavras e o texto do instrumento, e a tela cheia, que fica direto no body). As pílulas e a folha
   impressa já tinham a caixa definida pelo próprio LAB e não são tocadas. Conferido por caixa-texto (relatório do B1). */
html[data-final="1"] #lab-cartao,
html[data-final="1"] .fl-grid,
html[data-final="1"] .fl-line,
html[data-final="1"] .fl-texto { text-transform: uppercase; }

html[data-final="1"] :focus-visible { outline: var(--mp-border-focus) solid var(--mp-color-focus-ring); outline-offset: 2px; }

/* Botões do adulto: pílula plana. Primário = azul cheio; secundário = contorno azul. Sem 3D. */
html[data-final="1"] .btn-primary {
  width: auto; min-height: var(--mp-size-target-adult); margin-top: 0; padding: 12px 24px;
  border: 0; border-radius: var(--mp-radius-pill); box-shadow: none;
  background: var(--mp-color-action-primary); color: var(--mp-color-action-on-primary);
  font: var(--mp-type-button-weight) 16px/var(--mp-type-button-line) var(--mp-type-button-family); letter-spacing: 0;
}
html[data-final="1"] .btn-primary:hover { background: var(--mp-color-action-primary-hover); }
html[data-final="1"] .btn-primary:active { transform: none; box-shadow: none; }
html[data-final="1"] .btn-ghost {
  min-height: var(--mp-size-target-adult); padding: 10px 18px;
  border: var(--mp-border-control) solid var(--mp-color-action-secondary-border); border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface-card); color: var(--mp-color-action-primary); box-shadow: none;
  font: var(--mp-type-button-weight) var(--mp-type-button-size)/var(--mp-type-button-line) var(--mp-type-button-family);
}
html[data-final="1"] .btn-ghost:hover { background: var(--mp-color-surface-brand-soft); }
html[data-final="1"] .fl-controls { gap: var(--mp-space-3); }

/* Casca das páginas do instrumento: sem "cartão da página inteira" (um nível de cartão só). */
html[data-final="1"] body.lab-modo-refino .fl-wrap,
html[data-final="1"] .fl-wrap { max-width: var(--mp-size-content-reading); background: transparent; border: 0; box-shadow: none; border-radius: 0; margin: 0 auto; padding: var(--mp-space-6) var(--mp-space-4) var(--mp-space-12); }
html[data-final="1"] .fl-kicker { font: var(--mp-type-label-weight) 13px/var(--mp-type-label-line) var(--mp-type-label-family); letter-spacing: var(--mp-type-label-tracking); text-transform: var(--mp-type-label-transform); color: var(--mp-color-text-tertiary); }
html[data-final="1"] .fl-etapa { font: var(--mp-type-adult-h1-weight) var(--mp-type-adult-h1-size)/var(--mp-type-adult-h1-line) var(--mp-type-adult-h1-family); letter-spacing: var(--mp-type-adult-h1-tracking); color: var(--mp-color-text-brand); text-transform: none; margin-top: 2px; }
html[data-final="1"] .fl-radio-pergunta { font: var(--mp-type-adult-h3-weight) var(--mp-type-adult-h3-size)/var(--mp-type-adult-h3-line) var(--mp-type-adult-h3-family); color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-nota { color: var(--mp-color-text-secondary); }

/* ── B2 · EXECUÇÃO DAS PÍLULAS ─────────────────────────────────────────────────────────────────────────────── */
/* Os títulos repetidos somem durante a pílula: fica a linha "pílula · aluno · grupo · nível" (pilTopo). */
html[data-final="1"] #lab-main.lab-em-pilula .fl-top { display: none; }
html[data-final="1"] .lab-pil { color: var(--mp-color-text-primary); font-family: var(--mp-type-body-family); }
html[data-final="1"] .lab-pil-topo { gap: var(--mp-space-2) var(--mp-space-3); margin: 0 0 var(--mp-space-4); padding-bottom: var(--mp-space-3); border-bottom: 1px solid var(--mp-color-border-decorative); }
html[data-final="1"] .lab-pil-tag { font: var(--mp-type-adult-h2-weight) var(--mp-type-adult-h2-size)/var(--mp-type-adult-h2-line) var(--mp-type-adult-h2-family); color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-pil-aluno { background: var(--mp-color-surface-brand-soft); color: var(--mp-color-text-brand); font: var(--mp-type-label-weight) 14px/1.2 var(--mp-type-label-family); padding: 6px 12px; }
html[data-final="1"] .lab-pil-leitura { background: var(--mp-color-state-uncertain-bg); color: var(--mp-color-state-uncertain-fg); font: var(--mp-type-label-weight) 14px/1.2 var(--mp-type-label-family); }
/* A área da criança: um cartão (o único) — o mundo lúdico fica dentro dele, sem mudança. */
html[data-final="1"] .lab-pil-crianca { border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-elevation-card); }
/* Coluna do tutor (o invólucro .lab-pil-lado é criado por tutor-layout.mjs; nada muda de lugar dentro dele). */
html[data-final="1"] .lab-pil-lado { display: flex; flex-direction: column; gap: var(--mp-space-3); min-width: 0; }
html[data-final="1"] .lab-pil-lado > * { margin: 0; }
/* "Agora": o passo do tutor, sem caixa dentro de caixa. */
html[data-final="1"] .lab-pil-passo {
  flex-direction: column; gap: var(--mp-space-2); background: var(--mp-color-surface-card);
  border: 1px solid var(--mp-color-border-decorative); border-left: var(--mp-border-accent) solid var(--mp-color-action-primary);
  border-radius: var(--mp-radius-md); padding: var(--mp-space-3) var(--mp-space-4); margin: 0;
}
html[data-final="1"] .lab-pil-agora { background: transparent; color: var(--mp-color-text-brand); padding: 0; font: var(--mp-type-label-weight) 13px/var(--mp-type-label-line) var(--mp-type-label-family); letter-spacing: var(--mp-type-label-tracking); text-transform: var(--mp-type-label-transform); }
html[data-final="1"] .lab-pil-passo .lab-plante-regra { border: 0; background: var(--mp-color-surface-brand-soft); border-radius: var(--mp-radius-sm); padding: var(--mp-space-2) var(--mp-space-3); color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-pil-passo .lab-plante-onde { color: var(--mp-color-text-secondary); font-weight: var(--mp-type-label-weight); }
html[data-final="1"] .lab-pil-fala { color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-pil-regra { font-size: var(--mp-type-body-small-size); color: var(--mp-color-text-secondary); }
html[data-final="1"] .lab-pil-regra summary { min-height: var(--mp-size-target-adult); display: flex; align-items: center; gap: var(--mp-space-2); }
/* Botão principal do tutor (AVANÇAR, REGAR, PLANTAR, SOPRAR, COLHER): mesma cor e tamanho de antes, sem o "3D". */
html[data-final="1"] .lab-sit-avancar, html[data-final="1"] .lab-flor-regar, html[data-final="1"] .lab-sem-plantar,
html[data-final="1"] .lab-sem-naoainda, html[data-final="1"] .lab-ven-soprar, html[data-final="1"] .lab-col-colher { box-shadow: none; }
html[data-final="1"] .lab-flor-regar:active:not(:disabled) { transform: none; }

/* A partir de 1024 px: criança à esquerda, tutor à direita (fixo enquanto a página rola). */
@media (min-width: 1024px) {
  html[data-final="1"] #lab-main.lab-em-pilula { max-width: var(--mp-size-content-wide); }
  html[data-final="1"] .lab-pil.lab-pil-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: var(--mp-space-6); align-items: start; }
  html[data-final="1"] .lab-pil.lab-pil-2col > .lab-pil-topo { grid-column: 1 / -1; }
  html[data-final="1"] .lab-pil.lab-pil-2col > :not(.lab-pil-topo):not(.lab-pil-lado) { grid-column: 1; }
  html[data-final="1"] .lab-pil.lab-pil-2col > .lab-pil-lado { grid-column: 2; grid-row: 2 / span 3; position: sticky; top: var(--mp-space-4); }
  html[data-final="1"] .lab-pil-lado > [class$="-botoes"], html[data-final="1"] .lab-pil-lado > .lab-flor-regar-area { justify-content: stretch; }
  html[data-final="1"] .lab-pil-lado > [class$="-botoes"] > button, html[data-final="1"] .lab-pil-lado > .lab-flor-regar-area > button { flex: 1; }
}

/* ── B3 · ESCOLHA DA PÍLULA: 3 passos e barra "Começar" ─────────────────────────────────────────────────────── */
html[data-final="1"] .lab-treino-abas { background: transparent; border-radius: 0; padding: 0; gap: var(--mp-space-1); border-bottom: 1px solid var(--mp-color-border-decorative); margin-bottom: var(--mp-space-4); justify-content: flex-start; }
html[data-final="1"] .lab-treino-abas .lab-aba, html[data-final="1"] .lab-treino-abas > button {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; border-bottom: 3px solid transparent; color: var(--mp-color-text-secondary);
  min-height: var(--mp-size-target-adult); padding: 0 var(--mp-space-3); font: var(--mp-type-button-weight) 15px/1 var(--mp-type-button-family);
}
html[data-final="1"] .lab-treino-abas .ativa, html[data-final="1"] .lab-treino-abas [aria-selected="true"] { color: var(--mp-color-text-brand); border-bottom-color: var(--mp-color-action-primary); background: transparent; }
html[data-final="1"] .lab-alunos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--mp-space-2); }
html[data-final="1"] .lab-aluno { border: var(--mp-border-control) solid var(--mp-color-border-decorative-strong); border-radius: var(--mp-radius-md); box-shadow: none; padding: 6px 10px; min-height: var(--mp-size-target-adult); font: 700 14px/1.25 var(--mp-type-body-family); color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-aluno-avatar { font-size: 20px; }
html[data-final="1"] .lab-aluno.escolhido { border-color: var(--mp-color-action-primary); background: var(--mp-color-surface-brand-soft); box-shadow: inset 0 0 0 1px var(--mp-color-action-primary); }
html[data-final="1"] .lab-pil-sugestao { background: var(--mp-color-state-learning-bg); color: var(--mp-color-state-learning-fg); border: 0; border-left: var(--mp-border-accent) solid var(--mp-color-action-primary); border-radius: var(--mp-radius-md); font-size: 15px; }
html[data-final="1"] .lab-pil-sugestao[data-estado="sem-aluno"], html[data-final="1"] .lab-pil-sugestao[data-estado="sem-simulado"] { background: var(--mp-color-state-uncertain-bg); color: var(--mp-color-state-uncertain-fg); border-left-color: var(--mp-color-state-uncertain-border); }
html[data-final="1"] .lab-pilulas { gap: var(--mp-space-3); }
html[data-final="1"] .lab-pilula { border: 1px solid var(--mp-color-border-decorative-strong); border-radius: var(--mp-radius-lg); box-shadow: none; padding: var(--mp-space-3) var(--mp-space-4); color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-pilula b { font: var(--mp-type-adult-h3-weight) var(--mp-type-adult-h3-size)/var(--mp-type-adult-h3-line) var(--mp-type-adult-h3-family); color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-pilula > span:nth-of-type(2) { font-weight: 600; font-size: 14px; color: var(--mp-color-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html[data-final="1"] .lab-pilula[aria-checked="true"] { border-color: var(--mp-color-action-primary); background: var(--mp-color-surface-brand-soft); box-shadow: inset 0 0 0 1px var(--mp-color-action-primary); }
html[data-final="1"] .lab-pilula[data-sugerida="true"] { box-shadow: inset 0 0 0 2px var(--mp-color-action-primary); }
html[data-final="1"] .lab-pilula[data-sugerida="true"]::before { background: var(--mp-color-action-primary); }
html[data-final="1"] .lab-pil-explicacao { border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-lg); padding: var(--mp-space-3) var(--mp-space-4); }
html[data-final="1"] .lab-pil-exp-titulo { font: var(--mp-type-adult-h2-weight) 18px/1.25 var(--mp-type-adult-h2-family); color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-pil-exp dt { color: var(--mp-color-text-secondary); }
html[data-final="1"] .lab-pil-mais summary { cursor: pointer; min-height: var(--mp-size-target-adult); display: flex; align-items: center; font: var(--mp-type-button-weight) 15px/1.2 var(--mp-type-button-family); color: var(--mp-color-action-primary); }
html[data-final="1"] .lab-pil-mais[open] summary { margin-bottom: var(--mp-space-2); }
html[data-final="1"] .lab-pil-opcao { padding: 6px 0; }
/* Passos 1-2-3 (numeração só visual; o texto de cada pergunta não muda) */
html[data-final="1"] #lab-main.lab-escolha-pilulas [data-passo-escolha] { display: flex; align-items: center; gap: var(--mp-space-2); margin: var(--mp-space-6) 0 var(--mp-space-2); }
html[data-final="1"] #lab-main.lab-escolha-pilulas [data-passo-escolha]::before {
  content: attr(data-passo-escolha); flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--mp-color-action-primary); color: var(--mp-color-action-on-primary); font: var(--mp-type-number-weight) 14px/1 var(--mp-type-number-family);
}
html[data-final="1"] .lab-pil-passo-titulo { font: var(--mp-type-adult-h3-weight) var(--mp-type-adult-h3-size)/var(--mp-type-adult-h3-line) var(--mp-type-adult-h3-family); color: var(--mp-color-text-primary); }
/* Barra de ação fixa embaixo: resumo da escolha + Começar + Imprimir */
html[data-final="1"] #lab-treino-pilulas > .fl-controls {
  position: sticky; bottom: 0; z-index: var(--mp-z-sticky); margin: var(--mp-space-4) calc(-1 * var(--mp-space-4)) 0; padding: var(--mp-space-3) var(--mp-space-4);
  background: var(--mp-color-surface-card); border-top: 1px solid var(--mp-color-border-decorative); box-shadow: 0 -8px 24px -16px rgba(30, 43, 58, .25);
}
html[data-final="1"] .lab-pil-resumo { flex: 1 1 220px; min-width: 0; margin: 0; font: 700 15px/1.35 var(--mp-type-body-family); color: var(--mp-color-text-secondary); }
html[data-final="1"] .lab-pil-resumo b { color: var(--mp-color-text-primary); }
/* "Nível N · trocar" (22/10/2026): o nível da barra vira um botão que leva à lista de níveis; e um lembrete acima. */
html[data-final="1"] .lab-pil-trocar-nivel { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; margin: 2px 0; border: 2px solid var(--mp-color-action-primary); border-radius: 999px; background: var(--mp-color-surface-card); color: var(--mp-color-action-primary); font: 800 15px/1.2 var(--mp-type-body-family); cursor: pointer; text-transform: none; letter-spacing: normal; }
html[data-final="1"] .lab-pil-trocar-nivel:hover { background: var(--mp-color-surface-brand-soft); }
html[data-final="1"] .lab-pil-confira-nivel { flex: 1 1 100%; margin: 0; font: 700 15px/1.35 var(--mp-type-body-family); color: var(--mp-color-text-primary); text-transform: none; letter-spacing: normal; }

/* ── B4 · CABEÇALHO (barra) DAS PÁGINAS DO INSTRUMENTO: uma linha, marca pequena ───────────────────────────────── */
html[data-final="1"] .lab-barra {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-2) var(--mp-space-4);
  background: var(--mp-color-surface-card); border-bottom: 1px solid var(--mp-color-border-decorative); color: var(--mp-color-text-primary);
  padding: var(--mp-space-2) max(var(--mp-space-4), calc((100vw - var(--mp-size-content-wide)) / 2));
}
html[data-final="1"] .lab-barra-linha1, html[data-final="1"] .lab-barra-linha2 { gap: var(--mp-space-3); }
html[data-final="1"] .lab-voltar, html[data-final="1"] .lab-voltar-inicio {
  background: transparent; color: var(--mp-color-action-primary); box-shadow: none; padding: 10px 4px; min-height: var(--mp-size-target-adult);
  display: inline-flex; align-items: center; font: var(--mp-type-button-weight) var(--mp-type-button-size)/1 var(--mp-type-button-family);
}
html[data-final="1"] .lab-voltar:hover, html[data-final="1"] .lab-voltar:focus-visible { background: transparent; color: var(--mp-color-action-primary-hover); text-decoration: underline; }
html[data-final="1"] .lab-barra-logo { height: 30px; }
html[data-final="1"] .lab-barra-contexto > b { font: var(--mp-type-adult-h3-weight) var(--mp-type-adult-h3-size)/1.2 var(--mp-type-adult-h3-family); color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-acao {
  background: transparent; border: 0; border-radius: var(--mp-radius-pill); color: var(--mp-color-action-primary);
  font: var(--mp-type-button-weight) 14px/1 var(--mp-type-button-family); padding: 12px 8px; min-height: var(--mp-size-target-adult); display: inline-flex; align-items: center;
}
html[data-final="1"] .lab-acao:hover { text-decoration: underline; }

/* ── B4 · PÁGINA INICIAL ───────────────────────────────────────────────────────────────────────────────────── */
html[data-final="1"] .lab-inicio { color: var(--mp-color-text-primary); max-width: var(--mp-size-content-reading); padding: 0 var(--mp-space-4); }
html[data-final="1"] .lab-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-4); flex-wrap: wrap; text-align: left; padding: var(--mp-space-4) 0 var(--mp-space-2); }
html[data-final="1"] .lab-hero-logo { width: min(100%, 220px); margin: 0; border-radius: var(--mp-radius-md); } /* a imagem tem fundo próprio: vira selo */
html[data-final="1"] .lab-hero-sub { margin: 0; color: var(--mp-color-text-secondary); font: 700 15px/1.3 var(--mp-type-body-family); }
html[data-final="1"] .lab-abas { justify-content: flex-start; background: transparent; border-radius: 0; padding: 0; gap: var(--mp-space-1); border-bottom: 1px solid var(--mp-color-border-decorative); margin: var(--mp-space-2) 0 var(--mp-space-6); }
html[data-final="1"] .lab-aba { background: transparent; box-shadow: none; border-radius: 0; border-bottom: 3px solid transparent; color: var(--mp-color-text-secondary); min-height: var(--mp-size-target-adult); padding: 0 var(--mp-space-3); }
html[data-final="1"] .lab-aba:hover { background: transparent; color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-aba.ativa { background: transparent; color: var(--mp-color-text-brand); border-bottom-color: var(--mp-color-action-primary); box-shadow: none; }
html[data-final="1"] .lab-aba > span[aria-hidden="true"] { display: none; } /* emoji decorativo das abas */
html[data-final="1"] .lab-painel-intro { text-align: left; color: var(--mp-color-text-secondary); }
html[data-final="1"] .lab-campanha-faixa { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-lg); }
html[data-final="1"] .lab-campanha-titulo { color: var(--mp-color-text-brand); font: var(--mp-type-adult-h3-weight) 15px/1.2 var(--mp-type-adult-h3-family); }
html[data-final="1"] .lab-campanha-fases li { border-color: var(--mp-color-border-decorative-strong); }
html[data-final="1"] .lab-campanha-fases li.atual { background: var(--mp-color-action-primary); border-color: var(--mp-color-action-primary); }
html[data-final="1"] .lab-cartoes { gap: var(--mp-space-3); }
html[data-final="1"] .lab-cartao-link { border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-lg); box-shadow: none; padding: var(--mp-space-4); color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-cartao-link:hover, html[data-final="1"] .lab-cartao-link:focus-visible { border-color: var(--mp-color-action-primary); box-shadow: var(--mp-elevation-card); transform: none; }
html[data-final="1"] .lab-cartao-link b { font: var(--mp-type-adult-h3-weight) var(--mp-type-adult-h3-size)/var(--mp-type-adult-h3-line) var(--mp-type-adult-h3-family); color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-cartao-link span:not(.lab-cartao-icone) { color: var(--mp-color-text-secondary); }
html[data-final="1"] .lab-cartao-icone { display: none; } /* emoji decorativo dos cartões */
/* C2.1: o modo final esconde as etiquetas dos cartões (lab.css), mas no cartão desligado a etiqueta é a explicação:
   sem ela o cartão parecia quebrado. Volta só nos cartões "em preparação", no ocre de "processo". */
/* "← Voltar" (21/10/2026): o mesmo formato do "Início", com um pouco de ar entre os dois. */
html[data-final="1"] .lab-voltar-pagina, html[data-final="1"] .lab-ir-inicio { border: 0; cursor: pointer; margin-right: var(--mp-space-2); text-decoration: none; }
/* C2.2: "Continuando com…" (A4) e o "Nova pílula" de cima do resultado (A6): discretos, sem competir com o título. */
html[data-final="1"] .lab-c22-continua { margin: 0 0 var(--mp-space-3); padding: var(--mp-space-2) var(--mp-space-3); border-left: var(--mp-border-accent) solid var(--mp-color-action-primary); border-radius: var(--mp-radius-md); background: var(--mp-color-surface-brand-soft); color: var(--mp-color-text-primary); font-size: 15px; }
html[data-final="1"] .lab-res-topo { display: flex; justify-content: flex-end; margin: 0 0 var(--mp-space-2); }
html[data-final="1"] .lab-res-nova-topo { min-height: 40px; padding: 6px 16px; font-size: 14.5px; }
html[data-final="1"] .lab-cartao-breve .lab-cartao-tag { display: inline-block !important; margin-top: auto; padding: 3px 10px; border-radius: var(--mp-radius-pill); background: var(--mp-color-state-process-bg); color: var(--mp-color-state-process-fg); border: 1px solid var(--mp-color-state-process-border); font: 800 12.5px/1.3 var(--mp-type-label-family); }
html[data-final="1"] .lab-inicio-rodape { color: var(--mp-color-text-tertiary); }

/* ── B5 · PÁGINAS DE APOIO (Progresso, Dúvidas, Meta…) ─────────────────────────────────────────────────────── */
html[data-final="1"] .lab-duvidas { color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-pag-topo { gap: var(--mp-space-3); }
html[data-final="1"] .lab-duvidas-marca { color: var(--mp-color-text-tertiary); }
html[data-final="1"] .lab-duvidas h1 { font: var(--mp-type-adult-h1-weight) var(--mp-type-adult-h1-size)/var(--mp-type-adult-h1-line) var(--mp-type-adult-h1-family); color: var(--mp-color-text-brand); }

/* Movimento reduzido: a camada não acrescenta animação. */
@media (prefers-reduced-motion: reduce) { html[data-final="1"] .lab-cartao-link { transition: none; } }

/* ── C1 · FRENTE A (21/10/2026): resultados, aplicação do Simulado e das Formas A/B, Progresso, telas de apoio e estados.
   Mesmos tokens; nenhuma regra nova de comportamento. A área da criança (cena, grade de palavras, linhas do texto, folha)
   não é tocada. */

/* Um nível de cartão em todo o LAB: o cartão de resultado/conteúdo é papel branco com borda clara (sem palha). */
html[data-final="1"] .lab-caed-card { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-lg); box-shadow: none; padding: var(--mp-space-4) var(--mp-space-6); }
html[data-final="1"] .lab-pil-regra summary, html[data-final="1"] .lab-meu-caminho summary { color: var(--mp-color-text-secondary); }
/* Rótulos de fonte da regra (Regra do Mestre × Regra do CAEd): o do Mestre usa o ocre de "processo", não o palha. */
html[data-final="1"] .lab-regra-mestre { background: var(--mp-color-state-process-bg); color: var(--mp-color-state-process-fg); border-color: var(--mp-color-state-process-border); }

/* RESULTADO DAS PÍLULAS: o rótulo do resultado é descritivo (não "a criança foi bem"): sai o verde, entra o azul do Mestre. */
html[data-final="1"] #lab-resultado-pilula .lab-plante-fim-titulo { font: var(--mp-type-adult-h2-weight) var(--mp-type-adult-h2-size)/var(--mp-type-adult-h2-line) var(--mp-type-adult-h2-family); color: var(--mp-color-text-primary); }
html[data-final="1"] #lab-resultado-pilula .lab-plante-contador { font: var(--mp-type-adult-h1-weight) clamp(22px, 4.6vw, 28px)/1.2 var(--mp-type-adult-h1-family); color: var(--mp-color-text-brand); }
html[data-final="1"] #lab-resultado-pilula table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
html[data-final="1"] #lab-resultado-pilula th { text-align: left; font: var(--mp-type-label-weight) 12.5px/1.25 var(--mp-type-label-family); letter-spacing: .04em; color: var(--mp-color-text-tertiary); border-bottom: 1px solid var(--mp-color-border-decorative-strong); padding: 6px 8px; }
html[data-final="1"] #lab-resultado-pilula td { border-bottom: 1px solid var(--mp-color-border-decorative); padding: 8px; vertical-align: top; }
/* no celular, a tabela larga rola dentro dela mesma: a página não ganha rolagem lateral */
@media (max-width: 599px) { html[data-final="1"] #lab-resultado-pilula table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
html[data-final="1"] .lab-meu-caminho { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-md); padding: var(--mp-space-2) var(--mp-space-4); }
html[data-final="1"] .lab-meu-caminho summary { min-height: var(--mp-size-target-adult); display: flex; align-items: center; gap: var(--mp-space-2); font-weight: 800; }
html[data-final="1"] .lab-flor-msg { background: var(--mp-color-state-learning-bg); color: var(--mp-color-state-learning-fg); border-color: transparent; }

/* APLICAÇÃO (Simulado, Forma A, Forma B): o mesmo procedimento; muda só a pele dos painéis do adulto. */
html[data-final="1"] .fl-status { border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-md); color: var(--mp-color-text-secondary); }
html[data-final="1"] .fl-dot { background: var(--mp-color-border-decorative-strong); }
html[data-final="1"] .fl-dot.now { background: var(--mp-color-action-primary); }
html[data-final="1"] .fl-dot.done { background: var(--mp-color-state-done-fg); }
html[data-final="1"] .fl-hint-prof { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-left: var(--mp-border-accent) solid var(--mp-color-action-primary); border-radius: var(--mp-radius-md); color: var(--mp-color-text-primary); font-size: 15px; line-height: 1.5; }
html[data-final="1"] .fl-hint-fala { background: var(--mp-color-surface-brand-soft); border: 0; border-radius: var(--mp-radius-md); color: var(--mp-color-text-brand); font-size: 15px; }
html[data-final="1"] .lab-exemplos, html[data-final="1"] .fl-prof-block { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-md); }
html[data-final="1"] .lab-regras-correcao { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-md); }
html[data-final="1"] .lab-regras-correcao summary, html[data-final="1"] .fl-prof-block summary { min-height: var(--mp-size-target-adult); display: flex; align-items: center; gap: var(--mp-space-2); color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-treino-imprimir { background: var(--mp-color-state-learning-bg); color: var(--mp-color-text-primary); border: 0; border-radius: var(--mp-radius-md); }

/* PROGRESSO e páginas de apoio (Meta, Dúvidas, Formação do tutor, Campanha) */
html[data-final="1"] .lab-historico { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-md); }
html[data-final="1"] .lab-historico-titulo { font: var(--mp-type-adult-h3-weight) var(--mp-type-adult-h3-size)/var(--mp-type-adult-h3-line) var(--mp-type-adult-h3-family); color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-duvida { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-md); box-shadow: none; }
html[data-final="1"] .lab-duvida > summary { min-height: var(--mp-size-target-adult); display: flex; align-items: center; color: var(--mp-color-text-primary); }
html[data-final="1"] .lab-duvida > summary::before { position: static; margin-right: var(--mp-space-2); color: var(--mp-color-action-primary); }
html[data-final="1"] .lab-duvida[open] > summary { color: var(--mp-color-text-brand); }
html[data-final="1"] .lab-dupla-cartao, html[data-final="1"] .lab-ouvido-nivel { background: var(--mp-color-surface-card); border: 1px solid var(--mp-color-border-decorative); border-radius: var(--mp-radius-md); box-shadow: none; }
html[data-final="1"] .lab-dupla-tag { background: var(--mp-color-state-process-bg); color: var(--mp-color-state-process-fg); border-color: var(--mp-color-state-process-border); }
html[data-final="1"] .lab-ouvido-nivel[aria-pressed="true"], html[data-final="1"] .lab-ouvido-nivel.ativo { border-color: var(--mp-color-action-primary); background: var(--mp-color-surface-brand-soft); }
html[data-final="1"] a.btn-primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ESTADOS: desligado, erro, vazio. Erro técnico/de preenchimento = ocre de processo + marca (sem vermelho, sem semáforo). */
html[data-final="1"] .lab-desligado { color: var(--mp-color-text-secondary); font-family: var(--mp-type-body-family); }
html[data-final="1"] .fl-radio-erro { color: var(--mp-color-state-process-fg); font-size: 14px; display: flex; align-items: center; gap: var(--mp-space-2); }
html[data-final="1"] .fl-radio-erro::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mp-color-state-process-bg); border: var(--mp-border-control) solid var(--mp-color-state-process-border); font: var(--mp-type-number-weight) 13px/1 var(--mp-type-number-family); }
html[data-final="1"] .fl-radio-erro[hidden] { display: none; }