/* ==========================================================================
   CONSTRUTOR DE HISTÓRIAS — estilo.css

   Duas interfaces convivendo na mesma página:

     · a da CRIANÇA é uma aventura — cenário ocupando a tela inteira, um
       personagem grande, UMA pergunta por vez e botões que dá para acertar
       com o dedo. Nada de cronômetro, placar ou "certo/errado";
     · a do TERAPEUTA é uma gaveta cinza no canto direito, letra pequena,
       controles apertados. Feia de propósito: não disputa atenção.

   Pensado para 1366 × 768 no mínimo, confortável em 1920 × 1080.
   ========================================================================== */

:root {
    --fundo: #0f2233;
    --fundo-2: #16354c;
    --papel: #fdfaf3;
    --tinta: #1d2a35;
    --tinta-fraca: #5d7183;
    --azul: #2f7fd1;
    --azul-escuro: #1b5da3;
    --verde: #2fa37a;
    --laranja: #f0912f;
    --vermelho: #d6473c;
    --linha: rgba(255, 255, 255, .22);
    --raio: 18px;
    --fonte: "Garet", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* display:flex nas telas passa por cima do padrão do navegador; sem isto,
   esconder um elemento com o atributo hidden não funciona                  */
[hidden] { display: none !important; }

body {
    font-family: var(--fonte);
    color: var(--papel);
    background: radial-gradient(120% 90% at 50% 0%, var(--fundo-2) 0%, var(--fundo) 60%, #07131d 100%);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; }
textarea, input, select { font-family: inherit; }

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

.tela {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    animation: entra .28s ease both;
}
.tela.ativa { display: flex; }

@keyframes entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ carregando */

#telaCarregando { align-items: center; justify-content: center; }
.carregando { text-align: center; color: var(--tinta-fraca); }
.barra-carga {
    width: 260px; height: 6px; margin: 16px auto 0;
    background: rgba(255, 255, 255, .12); border-radius: 99px; overflow: hidden;
}
.barra-carga i { display: block; height: 100%; width: 0; background: var(--laranja); transition: width .2s linear; }

/* --------------------------------------------------------------- botões */

.primario, .gigante {
    border: none; border-radius: 99px;
    background: linear-gradient(180deg, #ffb347 0%, var(--laranja) 100%);
    color: #3a2306; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
    transition: transform .12s ease, filter .12s ease;
}
.primario { padding: 14px 32px; font-size: 1.05rem; }
.gigante  { padding: 20px 56px; font-size: 1.6rem; text-transform: uppercase; }
.primario:hover, .gigante:hover { transform: translateY(-2px); filter: brightness(1.06); }
.primario:disabled { opacity: .35; filter: grayscale(.6); transform: none; cursor: not-allowed; }

.discreto {
    border: 1px solid var(--linha); border-radius: 99px;
    background: rgba(255, 255, 255, .06); color: var(--papel);
    padding: 11px 22px; font-size: .92rem;
    transition: background .12s ease;
}
.discreto:hover { background: rgba(255, 255, 255, .14); }
.discreto.claro { opacity: .8; }

/* ----------------------------------------------------------------- capa */

#telaCapa { align-items: center; justify-content: center; }
.capa-arte {
    position: absolute; inset: 0;
    background: url("../assets/capa.jpg") center/cover no-repeat;
}
.capa-arte::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(6, 18, 28, .86) 0%, rgba(6, 18, 28, .55) 45%, rgba(6, 18, 28, .15) 100%);
}
.capa-conteudo {
    position: relative; margin-right: auto; padding: 0 clamp(40px, 7vw, 120px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
}
.capa-conteudo h1 {
    margin: 0; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .96;
    letter-spacing: .02em; text-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------- telas de escolha/lista */

.escolha { padding: 76px clamp(24px, 4vw, 64px) 24px; align-items: center; justify-content: center; }
.escolha-topo { text-align: center; }
.escolha-topo h2 {
    margin: 0 0 6px; font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 700;
}
.apoio { margin: 0; color: rgba(253, 250, 243, .68); font-size: 1rem; }
.escolha-rodape {
    padding-top: 18px;
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.aviso { margin: 0; color: rgba(253, 250, 243, .75); font-size: .95rem; }

/* cenários */

.grade-cenarios {
    display: grid; gap: 18px; width: 100%; max-width: 1280px; margin: 24px 0;
    grid-template-columns: repeat(3, 1fr);
}
.cartao-cenario {
    position: relative; border: 3px solid transparent; border-radius: var(--raio);
    overflow: hidden; background: rgba(255, 255, 255, .05); padding: 0;
    aspect-ratio: 16 / 9; color: var(--papel);
    transition: transform .14s ease, border-color .14s ease;
}
.cartao-cenario img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao-cenario span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent);
    font-size: 1.05rem; font-weight: 700; text-align: left;
}
.cartao-cenario:hover { transform: translateY(-4px); }
.cartao-cenario.escolhido { border-color: var(--laranja); }
.cartao-cenario.inventar {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700; border: 3px dashed var(--linha);
}

.campo-outro input {
    width: min(520px, 70vw); padding: 14px 18px; font-size: 1.05rem;
    border-radius: 99px; border: 1px solid var(--linha);
    background: rgba(255, 255, 255, .95); color: var(--tinta);
}

/* personagens */

.grade-personagens {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    margin: 22px 0; width: 100%; max-width: 1320px;
}
.cartao-personagem {
    width: clamp(160px, 15vw, 232px); padding: 10px 10px 14px; border-radius: var(--raio);
    border: 3px solid transparent; background: rgba(255, 255, 255, .07);
    color: var(--papel); transition: transform .14s ease, border-color .14s ease;
}
.cartao-personagem img { width: 100%; height: clamp(190px, 26vh, 300px); object-fit: contain; display: block; }
.cartao-personagem b { display: block; margin-top: 6px; font-size: 1.2rem; }
.cartao-personagem:hover { transform: translateY(-4px); }
.cartao-personagem.escolhido { border-color: var(--laranja); background: rgba(240, 145, 47, .16); }
.cartao-personagem.principal { border-color: var(--verde); background: rgba(47, 163, 122, .18); }

/* ------------------------------------------------------- passo genérico */

.cena-fundo {
    position: absolute; inset: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
.cena-fundo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 20, 30, .62) 0%, rgba(8, 20, 30, .8) 100%);
}

.passo { padding: 72px 0 0; }
.passo-corpo {
    position: relative; flex: 1; display: grid; align-items: center;
    grid-template-columns: minmax(220px, 360px) minmax(420px, 860px);
    gap: clamp(20px, 4vw, 60px); justify-content: center;
    padding: 0 clamp(24px, 4vw, 64px); min-height: 0;
    /* em tela baixa com muitas alternativas, é a pergunta que rola —
       o rodapé com o "continuar" nunca pode sair da tela                   */
    overflow: auto;
}
.passo-figura { margin: 0; text-align: center; align-self: center; }
.passo-figura img {
    max-width: 100%; max-height: 46vh; object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55));
}
.passo-figura figcaption { margin-top: 8px; font-size: 1.25rem; font-weight: 700; }
.passo-figura.vazia { display: none; }

.passo-conteudo { min-width: 0; }
.etiqueta {
    display: inline-block; margin-bottom: 8px; padding: 4px 14px; border-radius: 99px;
    background: rgba(255, 255, 255, .14); font-size: .78rem; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(253, 250, 243, .85);
}
.passo-conteudo h2 {
    margin: 0 0 6px; font-size: clamp(1.5rem, 2.7vw, 2.4rem); line-height: 1.15;
}

.opcoes { display: grid; gap: 10px; margin: 18px 0 0; }
.opcoes.dupla { grid-template-columns: repeat(2, 1fr); }
.opcoes.emocoes { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.opcao {
    display: flex; align-items: center; gap: 14px; text-align: left;
    padding: 16px 20px; border-radius: 16px; border: 2px solid var(--linha);
    background: rgba(255, 255, 255, .93); color: var(--tinta);
    font-size: 1.12rem; line-height: 1.3; font-weight: 600;
    transition: transform .12s ease, border-color .12s ease;
}
.opcao:hover { transform: translateY(-2px); border-color: var(--laranja); }
.opcao.escolhida { border-color: var(--laranja); background: #fff0dc; box-shadow: 0 0 0 4px rgba(240, 145, 47, .3); }
.opcao.inventar { background: rgba(255, 255, 255, .1); color: var(--papel); border-style: dashed; }

.opcao-emocao { flex-direction: column; gap: 6px; padding: 12px; text-align: center; }
.opcao-emocao img { width: 100%; max-width: 132px; aspect-ratio: 1; object-fit: contain; }
.opcao-emocao .emoji { font-size: 2.6rem; line-height: 1; }
.opcao-emocao b { font-size: .95rem; letter-spacing: .06em; }

.aberta { margin-top: 14px; }
.aberta label {
    display: block; margin-bottom: 5px; font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(253, 250, 243, .7);
}
.aberta textarea {
    width: 100%; padding: 14px 16px; border-radius: 14px; font-size: 1.05rem;
    border: 2px solid var(--linha); background: rgba(255, 255, 255, .96); color: var(--tinta);
    resize: vertical;
}
.dica {
    margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid var(--laranja);
    background: rgba(240, 145, 47, .14); border-radius: 0 10px 10px 0; font-size: 1rem;
}

.passo-rodape {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 18px clamp(24px, 4vw, 64px) 22px;
}
.passo-rodape .espaco { flex: 1; }

/* ------------------------------------------------------- evento social */

.evento { align-items: center; justify-content: center; }
.evento-caixa {
    position: relative; max-width: 900px; text-align: center; padding: 40px 48px;
    border-radius: 28px; background: rgba(12, 26, 38, .88); border: 2px solid rgba(240, 145, 47, .5);
    box-shadow: 0 30px 70px -30px #000;
    animation: pulo .45s ease both;
}
@keyframes pulo {
    0%   { transform: scale(.9); opacity: 0; }
    70%  { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}
.evento-caixa .raio { font-size: 3.4rem; }
.evento-caixa h2 { margin: 8px 0 18px; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--laranja); letter-spacing: .06em; }
.evento-caixa p { margin: 0 0 28px; font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.35; }

/* --------------------------------------------------------- explicação */

.explicacao { align-items: center; justify-content: center; padding-top: 72px; }
.fala {
    position: relative; display: flex; align-items: center; gap: 28px;
    max-width: 1200px; padding: 0 clamp(24px, 4vw, 64px);
}
.fala-rosto { margin: 0; text-align: center; flex: 0 0 auto; }
.fala-rosto img { width: clamp(180px, 22vw, 300px); filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55)); }
.fala-rosto figcaption { font-size: 1.2rem; font-weight: 700; margin-top: 6px; }
.balao {
    position: relative; background: var(--papel); color: var(--tinta);
    border-radius: 26px; padding: 26px 32px; max-width: 700px;
}
.balao::before {
    content: ""; position: absolute; left: -22px; top: 50%; margin-top: -16px;
    border: 16px solid transparent; border-right-color: var(--papel);
}
.balao-etiqueta { margin: 0 0 10px; font-size: .9rem; color: var(--tinta-fraca); }
.balao-etiqueta em { font-style: normal; font-weight: 700; color: var(--azul-escuro); }
.balao-fala { margin: 0; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.3; font-weight: 600; }

/* ------------------------------------------------ laboratório de soluções
   A parte mais importante da intervenção, por isso tem tela própria: três
   ideias lado a lado, em vez de uma lista de alternativas prontas.         */

.laboratorio { padding: 72px clamp(20px, 3vw, 48px) 0; align-items: center; justify-content: center; }

/* position:relative em tudo o que fica sobre o cenário: sem isto o conteúdo
   estático é pintado ATRÁS do .cena-fundo, que é absolute                  */
.lab-topo, .lab-mesa, .sugestoes, .lab-detalhe { position: relative; }

.lab-topo { text-align: center; }
.lab-topo h2 { margin: 2px 0 4px; font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.lab-topo .apoio { font-size: 1.05rem; }

.lab-mesa {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    width: 100%; max-width: 1200px; margin: 16px 0;
}
.ideia {
    display: flex; flex-direction: column; gap: 10px; min-height: 190px;
    padding: 14px; border-radius: 18px; border: 3px solid transparent;
    background: rgba(253, 250, 243, .95); color: var(--tinta);
    box-shadow: 0 16px 34px -20px #000;
}
.ideia.selecionada { border-color: var(--azul); }
.ideia.escolhida { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(47, 163, 122, .3); }
.ideia-num { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 700; }
.ideia textarea {
    flex: 1; padding: 10px 12px; border-radius: 12px; font-size: 1.02rem;
    border: 2px solid #e2dacb; background: #fff; color: var(--tinta); resize: none;
}
.ideia-bt {
    border: 1px solid #d3cabb; border-radius: 10px; background: #f3efe6;
    color: var(--tinta); padding: 8px 10px; font-size: .86rem; text-align: left;
}
.ideia-bt:hover { background: #fff; }
.ideia-bt.pronta { border-color: var(--verde); color: #1d6b50; }

.chips { display: flex; gap: 6px; }
.chip {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px; border-radius: 10px; border: 2px solid #ded6c6;
    background: #fff; color: var(--tinta); font-size: .68rem; line-height: 1.1; text-align: center;
}
.chip .icone { font-size: 1.1rem; }
.chip[data-id="agressiva"].ativo { border-color: var(--vermelho); background: #fdeceb; }
.chip[data-id="passiva"].ativo   { border-color: var(--azul);     background: #e9f2fb; }
.chip[data-id="prosocial"].ativo { border-color: var(--verde);    background: #e8f6f1; }

.sugestoes {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    width: 100%; max-width: 1200px; margin-bottom: 10px;
}
.sugestao {
    border: 1px dashed var(--linha); border-radius: 99px; padding: 8px 16px;
    background: rgba(255, 255, 255, .1); color: var(--papel); font-size: .92rem;
}
.sugestao:hover { background: rgba(255, 255, 255, .2); }

.lab-detalhe {
    width: 100%; max-width: 1200px; padding: 14px 16px; border-radius: 18px;
    background: rgba(10, 24, 36, .8); border: 1px solid var(--linha);
}
.lab-detalhe h3 { margin: 0 0 10px; font-size: 1.05rem; }
.perguntinhas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.perguntinha label { display: block; font-size: .82rem; margin-bottom: 4px; color: rgba(253, 250, 243, .85); }
.perguntinha textarea, .perguntinha select {
    width: 100%; padding: 8px 10px; border-radius: 10px; font-size: .92rem;
    border: 1px solid var(--linha); background: rgba(255, 255, 255, .95); color: var(--tinta); resize: vertical;
}
.previsao { margin: 10px 0 0; font-size: .95rem; color: rgba(253, 250, 243, .9); }
.previsao em { font-style: normal; color: var(--laranja); }

.slot-escolha {
    width: 100%; max-width: 1200px; min-height: 104px; padding: 14px 18px;
    border: 3px dashed var(--linha); border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center; color: rgba(253, 250, 243, .7);
}
.slot-escolha .titulo { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.slot-escolha.alvo { border-color: var(--laranja); }
.slot-escolha.cheio {
    border-style: solid; border-color: var(--verde);
    background: rgba(47, 163, 122, .16); color: var(--papel);
}
.slot-escolha .texto { font-size: 1.15rem; font-weight: 600; }

/* ---------------------------------------------------- história completa */

.historia { padding: 68px 0 0; }
.elenco {
    position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
    display: flex; align-items: flex-end; justify-content: center; gap: 2%;
    pointer-events: none; opacity: .95;
}
.elenco img { height: 100%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6)); }
.elenco img.secundario { height: 76%; opacity: .85; }

.historia-frente {
    position: relative; flex: 1; display: flex; flex-direction: column;
    align-items: center; padding: 0 clamp(20px, 3vw, 48px) 18px; min-height: 0;
}
.historia-frente h2 { margin: 0 0 14px; letter-spacing: .12em; font-size: 1.5rem; }
/* os cards ficam só com a altura do texto: o resto da tela é para o cenário
   e para os personagens aparecerem embaixo deles                           */
.cards {
    display: grid; gap: 12px; width: 100%; max-width: 1500px;
    grid-template-columns: repeat(7, 1fr); align-items: start;
    flex: 0 0 auto; max-height: 48vh;
}
.card {
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    border-radius: 16px; background: rgba(253, 250, 243, .95); color: var(--tinta);
    box-shadow: 0 16px 34px -18px #000; overflow: auto; max-height: 48vh;
}
.card .card-topo { display: flex; align-items: center; gap: 8px; }
.card .card-icone { font-size: 1.3rem; }
.card .card-rotulo { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 700; }
.card p { margin: 0; font-size: .98rem; line-height: 1.3; }
.historia-botoes { display: flex; gap: 12px; margin-top: auto; padding-top: 14px; }

/* ------------------------------------------------- história bagunçada */

.bagunca { padding: 76px clamp(20px, 3vw, 48px) 24px; align-items: center; }
.trilha {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
    width: 100%; max-width: 1500px; margin: 22px 0; flex: 1; min-height: 0;
}
.trilha .card { cursor: grab; border: 3px solid transparent; }
.trilha .card.arrastando { opacity: .4; }
.trilha .card.alvo { border-color: var(--azul); }
.trilha .card.marcado { border-color: var(--laranja); }
.trilha .card.errado { animation: treme .4s ease; }
@keyframes treme {
    0%, 100% { transform: none; }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.trilha .card.certo { border-color: var(--verde); }

/* --------------------------------------------------------------- reconto */

.reconto { padding: 76px clamp(20px, 3vw, 48px) 24px; align-items: center; justify-content: center; }
.simbolos { display: flex; gap: 16px; margin: 34px 0; flex-wrap: wrap; justify-content: center; }
.simbolo {
    width: 172px; min-height: 150px; border-radius: 18px; padding: 16px;
    background: rgba(255, 255, 255, .08); border: 2px solid var(--linha);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    text-align: center;
}
.simbolo .icone { font-size: 3.2rem; }
.simbolo p { margin: 0; font-size: .88rem; color: var(--papel); display: none; }
.simbolo.revelado { background: rgba(253, 250, 243, .95); color: var(--tinta); }
.simbolo.revelado p { display: block; color: var(--tinta); }

.transcricao { width: min(900px, 90vw); }
.transcricao label { display: block; font-size: .78rem; letter-spacing: .14em; margin-bottom: 6px; color: rgba(253, 250, 243, .7); }
.transcricao textarea {
    width: 100%; padding: 14px 16px; border-radius: 14px; font-size: 1.05rem;
    border: 2px solid var(--linha); background: rgba(255, 255, 255, .96); color: var(--tinta); resize: vertical;
}

/* ------------------------------------------------------------------- fim */

.fim { align-items: center; justify-content: center; padding: 72px 24px 24px; }
.folha {
    width: min(1100px, 92vw); max-height: 82vh; overflow: auto;
    background: var(--papel); color: var(--tinta); border-radius: 22px; padding: 28px 34px;
}
.folha h2 { margin: 0 0 16px; }
.resumo { display: grid; gap: 10px; }
.resumo .linha { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid #e6dfd2; }
.resumo .linha b { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); }
.resumo .linha.divisao { grid-template-columns: 1fr; border-bottom: 2px solid var(--tinta); padding-top: 10px; }
.resumo .linha.divisao b { color: var(--tinta); font-size: .84rem; }
.resumo .linha.divisao span { display: none; }
.resumo .linha span { font-size: 1rem; line-height: 1.35; white-space: pre-wrap; }
.fim-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.fim .discreto { border-color: #d8cfbe; background: #f1ebdf; color: var(--tinta); }
.fim .aviso { color: var(--tinta-fraca); margin-top: 12px; }

/* --------------------------------------------- barra da gramática narrativa */

.barra-partes {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 70px 12px 16px;
    background: linear-gradient(180deg, rgba(6, 16, 24, .92), rgba(6, 16, 24, 0));
    pointer-events: none;
}
.parte {
    display: flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 99px;
    background: rgba(255, 255, 255, .07); border: 1px solid transparent;
    font-size: .82rem; color: rgba(253, 250, 243, .55); white-space: nowrap;
}
.parte .marca { font-size: .9rem; }
.parte.feita { color: rgba(253, 250, 243, .85); }
.parte.feita .marca { color: var(--verde); }
.parte.atual { background: rgba(240, 145, 47, .22); border-color: var(--laranja); color: var(--papel); font-weight: 700; }

/* o chip que avisa que a barra agora é a do módulo social, não a da história */
.parte.modulo {
    background: rgba(47, 163, 122, .25); border-color: var(--verde);
    color: var(--papel); font-weight: 700; letter-spacing: .1em; font-size: .74rem;
}

/* ------------------------------------------------------ painel do terapeuta */

.canto {
    position: fixed; right: 14px; top: 12px; z-index: 40;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--linha); background: rgba(255, 255, 255, .1); color: var(--papel);
    font-size: 1.1rem; line-height: 1; opacity: .5; transition: opacity .15s ease;
}
.canto:hover { opacity: 1; }

.painel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 392px; z-index: 50;
    display: flex; flex-direction: column;
    background: #eceff1; color: #23303a;
    border-left: 1px solid #c3ccd2; box-shadow: -18px 0 50px -30px #000;
    font-size: .84rem;
}
.painel header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; background: #d7dee2; border-bottom: 1px solid #c3ccd2;
}
.painel header button { border: none; background: none; font-size: 1rem; color: #445; }
.painel-corpo { overflow: auto; padding: 10px 12px 24px; }
.painel fieldset { border: 1px solid #c8d1d7; border-radius: 8px; margin: 0 0 12px; padding: 8px 10px 10px; }
.painel legend { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #5a6b78; padding: 0 4px; }
.painel label { display: block; margin: 6px 0; font-size: .82rem; }
.painel label.linha-check { margin-top: 8px; }
.painel select, .painel input[type="text"], .painel textarea {
    width: 100%; margin-top: 3px; padding: 5px 7px; font-size: .84rem;
    border: 1px solid #b6c1c8; border-radius: 6px; background: #fff; color: #23303a;
}
.painel input[type="radio"], .painel input[type="checkbox"] { margin-right: 6px; }
.painel-bt {
    margin-top: 6px; padding: 6px 10px; font-size: .82rem;
    border: 1px solid #a9b6bf; border-radius: 6px; background: #fbfcfd; color: #23303a;
}
.painel-bt:hover { background: #fff; }
.painel-bt.perigo { color: var(--vermelho); border-color: #e0b3af; width: 100%; }
.painel-nav { display: flex; gap: 6px; }
.painel-nav .painel-bt { flex: 1; }
.painel-nota { margin: 4px 0; color: #5a6b78; }
.nomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 4px; }
.nomes input { padding: 4px 6px; font-size: .8rem; border: 1px solid #b6c1c8; border-radius: 5px; }
.codigos { display: grid; gap: 5px; margin-bottom: 6px; }
.codigos .linha-codigo { display: grid; grid-template-columns: 24px 1fr; gap: 6px; align-items: center; }
.codigos .linha-codigo span { font-size: .78rem; color: #5a6b78; }

/* ------------------------------------------------------- telas mais baixas
   1366 × 768 é o piso do projeto. O laboratório é a tela mais cheia, então
   é ela que precisa encolher para o botão de continuar não sumir.          */

@media (max-height: 820px) {
    .laboratorio { padding-top: 62px; }
    .lab-topo h2 { font-size: 1.4rem; }
    .lab-topo .apoio { font-size: .95rem; }
    .ideia { min-height: 148px; }
    .lab-mesa { margin: 12px 0; }
    .lab-detalhe { padding: 10px 14px; }
    .passo-rodape { padding-top: 10px; padding-bottom: 14px; }
    .passo { padding-top: 62px; }
    .passo-figura img { max-height: 38vh; }
    .opcao { padding: 12px 18px; }
    .aberta { margin-top: 10px; }
}

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

@media (max-width: 1200px) {
    .grade-cenarios { grid-template-columns: repeat(2, 1fr); }
    .cards, .trilha { grid-template-columns: repeat(4, 1fr); }
    .passo-corpo { grid-template-columns: minmax(160px, 240px) 1fr; }
}
@media (max-width: 860px) {
    .cards, .trilha { grid-template-columns: repeat(2, 1fr); }
    .passo-corpo { grid-template-columns: 1fr; }
    .passo-figura img { max-height: 24vh; }
    .painel { width: 100vw; }
}