/* Modo turma (visualizador/?turma): cartões claros e opacos sobre a cena,
   porque o projetor lava fundo escuro e transparência; texto grande e alvos
   de pelo menos 44 px (docs/desenvolvimento/entrega-2a-turma-e-coleta.md,
   Decisão 13, e o artefato "Telas do modo turma"). O modo livre (#livre) usa
   as mesmas peças. */
:root {
  --t-tinta: #14202b;
  --t-media: #33404d;
  --t-suave: #4a5868;
  --t-borda: #c5ced8;
  --t-linha: #e1e6ec;
  --t-fundo: #eef1f4;
  --t-faixa: #f4f6f9;
  --t-azul: #1f5fbf;
  --t-azul-escuro: #174a94;
  --t-azul-claro: #e7effb;
  --t-azul-palido: #f3f7fd;
  --t-perigo: #b3261e;
  --t-perigo-escuro: #8c1d17;
  --t-perigo-claro: #fcedec;
  --t-perigo-borda: #e3a8a3;
  --t-aviso-fundo: #fff4d6;
  --t-aviso-borda: #e9c46a;
  --t-aviso-tinta: #4d3800;
  --t-vidro: rgba(255, 255, 255, 0.95);
  --t-sombra: 0 6px 20px rgba(0, 0, 0, 0.18);
}

body.modo-turma #livre { display: none; }

/* #turma fica acima de #livre: o cartão da marca do modo livre também entra nele. */
#turma, #livre { position: fixed; inset: 0; pointer-events: none;
                 font: 400 20px/1.4 "Segoe UI", system-ui, sans-serif; color: var(--t-tinta); }
#turma { z-index: 5; }
#livre { z-index: 4; }
#turma > *, #livre > * { pointer-events: auto; }
#turma h1, #turma h2, #turma p, #livre h1, #livre h2, #livre p { margin: 0; }
#turma :focus-visible, #livre :focus-visible { outline: 3px solid var(--t-azul); outline-offset: 3px; }
#turma [hidden], #livre [hidden] { display: none !important; }

/* Camadas */
.t-cheia { position: absolute; inset: 0; }
.t-opaca { background: var(--t-fundo); overflow: auto; }
.t-veu { background: rgba(20, 32, 43, 0.5); backdrop-filter: blur(8px); }
.t-veu-claro { background: rgba(20, 32, 43, 0.35); backdrop-filter: blur(6px); }
.t-cartao { background: #fff; border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.t-opaca .t-cartao { box-shadow: 0 1px 2px rgba(20, 32, 43, 0.08), 0 8px 24px rgba(20, 32, 43, 0.06); }
.t-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.t-dialogo { width: min(620px, calc(100vw - 32px)); padding: 34px 38px; display: flex;
             flex-direction: column; gap: 18px; }
.t-dialogo h1, .t-dialogo h2 { font-size: 32px; line-height: 1.15; }
.t-dialogo p { font-size: 22px; line-height: 1.45; }
.t-dialogo-pin { width: min(520px, calc(100vw - 32px)); }
.t-dialogo-turma { width: min(860px, calc(100vw - 32px)); }

/* Texto */
.t-suave { color: var(--t-suave); }
.t-media { color: var(--t-media); }
.t-nota { font-size: 16px; color: var(--t-suave); }
.t-erro { min-height: 24px; font-size: 18px; color: var(--t-perigo); }
.t-rotulo { font-size: 18px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.t-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Arranjo */
.t-entre { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.t-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.t-acoes.t-inicio { justify-content: flex-start; }
.t-coluna { display: flex; flex-direction: column; gap: 4px; }
.t-cresce { flex: 1 1 auto; }
.t-fim { margin-top: auto; }
.t-largo { grid-column: 1 / -1; }
.t-titulo-icone { display: flex; align-items: center; gap: 14px; color: var(--t-azul); }
.t-titulo-icone h1 { color: var(--t-tinta); font-size: 30px; }

/* Botões */
.t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px;
         padding: 0 24px; border-radius: 14px; border: 2px solid transparent; cursor: pointer;
         font: 600 20px/1 "Segoe UI", system-ui, sans-serif; white-space: nowrap; }
.t-btn:disabled { background: var(--t-linha); color: #5b6774; border-color: transparent; cursor: not-allowed; }
.t-prim { background: var(--t-azul); color: #fff; }
.t-prim:hover:not(:disabled) { background: var(--t-azul-escuro); }
.t-sec { background: #fff; color: var(--t-tinta); border-color: var(--t-borda); }
.t-sec:hover { background: #eef2f6; }
.t-vidro { background: var(--t-vidro); color: var(--t-tinta); border-color: rgba(20, 32, 43, 0.12);
           box-shadow: var(--t-sombra); }
.t-vidro:hover { background: #fff; }
.t-disc { min-height: 44px; padding: 0 16px; font-size: 17px; font-weight: 500;
          background: rgba(255, 255, 255, 0.85); color: var(--t-tinta); border-color: rgba(20, 32, 43, 0.12); }
.t-disc:hover { background: #fff; }
.t-perigo { background: #fff; color: var(--t-perigo); border-color: var(--t-perigo-borda); }
.t-perigo:hover { background: var(--t-perigo-claro); color: var(--t-perigo-escuro); }
.t-perigo-cheio { background: var(--t-perigo); color: #fff; }
.t-perigo-cheio:hover { background: var(--t-perigo-escuro); }
.t-sombra { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
.t-btn.t-grande { min-height: 60px; padding: 0 30px; font-size: 22px; }
.t-btn.t-pequeno { min-height: 44px; padding: 0 16px; font-size: 18px; }
.t-link { min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
          font: 500 19px "Segoe UI", system-ui, sans-serif; color: var(--t-media);
          text-decoration: underline; text-underline-offset: 4px; }
.t-link:hover { color: var(--t-tinta); }

/* Opções que alternam */
.t-alternador { display: grid; gap: 10px; }
.t-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-opcao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
           min-height: 52px; padding: 8px 10px; border: 2px solid var(--t-borda); border-radius: 12px;
           background: #fff; color: var(--t-tinta); cursor: pointer;
           font: 500 18px/1.2 "Segoe UI", system-ui, sans-serif; }
.t-opcao:hover { border-color: var(--t-azul); }
.t-opcao[aria-pressed="true"] { border-color: var(--t-azul); background: var(--t-azul-claro);
                                box-shadow: inset 0 0 0 1px var(--t-azul); }
.t-opcao-valor { font-size: 22px; font-weight: 700; }
.t-opcao-nota { font-size: 16px; color: var(--t-suave); }

/* Formulários */
.t-campo { display: flex; flex-direction: column; gap: 0; }
.t-grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.t-select, .t-entrada { height: 48px; border: 2px solid var(--t-borda); border-radius: 10px; padding: 0 12px;
                        font: 400 18px "Segoe UI", system-ui, sans-serif; color: var(--t-tinta); background: #fff; }
.t-pin { font-size: 20px; letter-spacing: 0.3em; }
.t-pin-grande { height: 56px; font-size: 26px; letter-spacing: 0.4em; }
.t-formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px;
                padding: 26px 30px; }
.t-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Preparo e painel do professor */
.t-preparo, .t-painel { padding: 32px 56px; display: flex; flex-direction: column; gap: 22px;
                        font-size: 18px; }
.t-cabecalho { display: flex; align-items: baseline; gap: 18px; }
.t-cabecalho h1 { font-size: 34px; font-weight: 700; }
.t-painel .t-cabecalho { align-items: center; }
.t-colunas { display: flex; gap: 26px; align-items: stretch; flex-wrap: wrap; }
.t-preparo .t-formulario { flex: 0 1 820px; }
.t-lateral { flex: 1 1 300px; display: flex; flex-direction: column; gap: 18px; }
.t-estreita { flex: 0 0 330px; }
.t-aviso { background: var(--t-aviso-fundo); color: var(--t-aviso-tinta); border: 2px solid var(--t-aviso-borda);
           border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.t-passos, .t-aula, .t-turmas { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.t-passos h2, .t-aula h2, .t-turmas h2 { font-size: 21px; }
.t-passos ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.t-aula dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.t-aula dt { color: var(--t-suave); }
.t-aula dd { margin: 0; }
.t-sem-rede { display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--t-linha); color: var(--t-suave); overflow-wrap: anywhere; }
.t-sem-rede[data-estado="pronto"] { color: #1e7a52; }
.t-sem-rede[data-estado="falhou"] { color: var(--t-perigo); }
.t-turmas { flex: 1 1 560px; min-width: 0; }
.t-turmas table { border-collapse: collapse; width: 100%; }
.t-turmas caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 16px; color: var(--t-suave); }
.t-turmas th { font-size: 16px; font-weight: 600; text-align: left; color: var(--t-suave); padding: 0 12px 10px; }
.t-turmas td { padding: 14px 12px; border-top: 1px solid var(--t-linha); white-space: nowrap; }
.t-numero { text-align: right !important; font-variant-numeric: tabular-nums; }
.t-acao { text-align: right; }
.t-selo { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
          background: var(--t-azul-claro); color: var(--t-azul-escuro); font-size: 15px; font-weight: 600; }
.t-linha-topo { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--t-linha); }
.t-esquerda { justify-content: flex-start; }

/* Sobre a cena */
.t-placa { position: absolute; top: 20px; left: 24px; padding: 16px 22px; border-radius: 18px;
           background: var(--t-vidro); box-shadow: var(--t-sombra); display: flex; flex-direction: column; gap: 4px; }
.t-placa strong { font-size: 22px; }
.t-pergunta h1 { font-size: 24px; font-weight: 700; }
.t-topo-direita { position: absolute; top: 20px; right: 24px; display: flex; gap: 12px; }
.t-topo-direita .t-btn { min-height: 56px; font-size: 21px; }
.t-base-esquerda { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; }
.t-base-direita { position: absolute; right: 24px; bottom: 24px; }
/* Botões juntos numa barra clara; .t-camera é a da câmera. */
.t-camera, .t-segmentos { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--t-vidro);
                          box-shadow: var(--t-sombra); }
.t-camera .t-opcao, .t-segmentos .t-opcao { min-height: 46px; padding: 0 20px; border: 0; background: transparent;
                                            font-weight: 600; }
.t-camera .t-opcao[aria-pressed="true"], .t-segmentos .t-opcao[aria-pressed="true"] {
  background: var(--t-azul); color: #fff; box-shadow: none; }
.t-teclas { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 14px;
            background: var(--t-vidro); box-shadow: var(--t-sombra); font-size: 17px; }
.t-tecla { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
           padding: 0 7px; border-radius: 7px; background: #fff; border: 1px solid var(--t-borda);
           border-bottom-width: 3px; font: 700 15px/1 "Segoe UI", system-ui, sans-serif; }
.t-tecla + span { margin-right: 6px; }
.t-faixa { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center;
           gap: 12px; padding: 12px 24px; border-radius: 999px; background: var(--t-aviso-fundo);
           border: 2px solid var(--t-aviso-borda); color: var(--t-aviso-tinta); font-weight: 600;
           box-shadow: var(--t-sombra); }

/* Telas do aluno */
.t-proposito { width: min(780px, calc(100vw - 32px)); padding: 44px 52px; display: flex; flex-direction: column;
               gap: 20px; }
.t-proposito h1 { font-size: 42px; line-height: 1.1; letter-spacing: -0.01em; }
.t-proposito p { font-size: 23px; line-height: 1.45; }
.t-feito { width: 72px; height: 72px; border-radius: 50%; background: #e3f3eb; color: #1e7a52;
           display: grid; place-items: center; }
/* Em tela baixa (celular), o cartão rola por dentro: Continuar e Cancelar não
   podem ficar fora da tela, que não rola. */
.t-cartao-marca { position: absolute; right: 24px; top: 104px; width: min(640px, calc(100vw - 48px));
                  max-height: calc(100dvh - 128px); overflow-y: auto;
                  padding: 26px 28px 18px; display: flex; flex-direction: column; gap: 16px; }
.t-cartao-marca h2 { font-size: 28px; line-height: 1.2; }
.t-grade-categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.t-categoria-botao { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 0 20px;
                     border-radius: 16px; border: 2px solid var(--t-borda); background: #fff; color: var(--t-tinta);
                     font: 700 23px/1.1 "Segoe UI", system-ui, sans-serif; cursor: pointer; text-align: left; }
.t-categoria-botao:hover, .t-opcao-grande:hover { border-color: var(--t-azul); background: var(--t-azul-palido); }
.t-selo-categoria { flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.t-categoria { font-size: 19px; font-weight: 600; color: #8c2f21; }
/* No celular em pé, duas colunas cortam os nomes ("Inse", "Sem prob"). */
@media (max-width: 640px) {
  .t-cartao-marca { right: 12px; width: calc(100vw - 24px); padding: 20px 18px 14px; }
  .t-grade-categorias { grid-template-columns: 1fr; gap: 8px; }
  .t-categoria-botao { min-height: 64px; padding: 0 14px; gap: 12px; font-size: 20px; }
}
.t-motivos { display: flex; flex-wrap: wrap; gap: 10px; }
.t-motivo { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px;
            border-radius: 14px; border: 2px solid var(--t-borda); background: #fff; color: var(--t-tinta);
            font: 500 19px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; text-align: left; }
.t-motivo:hover { border-color: var(--t-azul); }
.t-motivo[aria-pressed="true"] { border-color: var(--t-azul); background: var(--t-azul-claro); }
.t-caixinha { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; border: 2px solid #8a96a3;
              display: grid; place-items: center; color: transparent; background: #fff; }
.t-motivo[aria-pressed="true"] .t-caixinha { background: var(--t-azul); border-color: var(--t-azul); color: #fff; }
.t-opcao-grande { display: flex; align-items: center; gap: 18px; min-height: 100px; padding: 14px 22px;
                  border-radius: 18px; border: 2px solid var(--t-borda); background: #fff; color: var(--t-tinta);
                  cursor: pointer; text-align: left; font: 400 18px/1.3 "Segoe UI", system-ui, sans-serif; }
.t-opcao-grande strong { font-size: 24px; }
.t-icone-caixa { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; background: var(--t-azul-claro);
                 color: var(--t-azul); display: grid; place-items: center; }

/* Minhas marcas */
.t-gaveta { position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); background: #fff;
            padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; overflow: auto;
            box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25); }
.t-gaveta h2 { font-size: 30px; }
.t-lista-marcas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.t-marca { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px;
           border: 2px solid var(--t-linha); }
.t-marca:hover, .t-marca:focus-within { border-color: var(--t-azul); background: var(--t-azul-palido); }
.t-marca-linha { display: flex; align-items: flex-start; gap: 14px; }
.t-marca-linha strong { font-size: 21px; }
.t-marca-linha span { font-size: 17px; }
.t-confirma { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
              border-radius: 12px; background: var(--t-perigo-claro); color: var(--t-perigo-escuro); }

/* Pergunta da infraestrutura */
.t-infra { position: absolute; inset: 26px 40px; padding: 26px 32px 22px; display: flex; flex-direction: column;
           gap: 10px; overflow: auto; }
.t-infra h1 { font-size: 28px; line-height: 1.2; }
.t-infra-linha { display: grid; grid-template-columns: 300px repeat(7, minmax(64px, 1fr)); align-items: center;
                 border-radius: 10px; }
.t-infra-linha:nth-of-type(odd) { background: var(--t-faixa); }
.t-infra-cabecalho { background: none !important; font-size: 17px; font-weight: 600; color: var(--t-media);
                     text-align: center; align-items: end; padding-bottom: 6px; }
.t-infra-cabecalho span:first-child { text-align: left; padding-left: 16px; }
.t-infra-item { padding: 0 16px; font-size: 19px; font-weight: 600; line-height: 1.2; }
.t-infra-celula { display: flex; align-items: center; justify-content: center; min-height: 54px; cursor: pointer;
                  border-radius: 10px; }
.t-infra-celula:hover { background: var(--t-azul-claro); }
.t-radio { width: 28px; height: 28px; margin: 0; accent-color: var(--t-azul); cursor: pointer; }