/* ============================================================
   css/telas/semlogin.css — CSS da área "semlogin" (telas 21 e 22).

   O que estas duas telas desenham é O QUE UM APARELHO DE PAREDE
   MOSTRA, dentro de um quadro que avisa que ali não há moldura
   de sistema.

   POR QUE PREFIXO PRÓPRIO ".sl-": no mock aprovado estas duas
   telas moram no bloco "LOTE B", com prefixo ".lb-", junto da
   bancada e dos painéis — que NÃO são desta etapa. Repetir ".lb-"
   aqui seria duas pessoas escrevendo o mesmo seletor. As peças
   estão refeitas com prefixo ".sl-" e com OS MESMOS VALORES
   medidos no mock: nenhum número novo de escala.
   PEDIDO REGISTRADO no fim da etapa: quando Bancada e Painéis
   entrarem, decidir se ".sl-" e ".lb-" viram uma peça só.

   A paleta de mural em contraste alto (Estilos v.A §3.6) é a
   única exceção declarada de cor: ela entra como variável local,
   dentro do escopo .sl-mural, e não vaza para o resto do site.
   ============================================================ */

/* ---------- escolha de aparelho, FORA do aparelho ----------- */
.sl-escolha{margin-bottom:12px;flex:0 0 auto}

/* ---------- ferramenta de demonstração ---------------------- */
.sl-ferr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto;
  border:1px dashed var(--borda-forte);border-radius:var(--r-ctrl);
  background:var(--fundo-cabecalho-tabela);padding:8px 11px;margin-bottom:14px}
.sl-ferr>b{font-family:var(--fonte-mono);font-size:10.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--txt-fraco);font-weight:400}
.sl-ferr-rot{font-family:var(--fonte-mono);font-size:10.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--txt-apoio);margin-left:6px}
.sl-fb{height:24px;padding:0 9px;border:1px solid var(--borda-controle);
  border-radius:5px;background:var(--fundo-botao-contorno);font:inherit;
  font-size:11.5px;color:var(--txt-padrao);cursor:pointer}
.sl-fb[aria-pressed="true"]{background:var(--txt-forte);color:var(--sobre-acento);
  border-color:var(--txt-forte);font-weight:500}
.sl-fb:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

/* ---------- nota de rodapé de tela (fora de painel) --------- */
.sl-nota{flex:0 0 auto;font-size:11.5px;color:var(--txt-fraco);line-height:1.45;
  margin-top:12px;max-width:700px}
.sl-nota b{color:var(--txt-apoio);font-weight:500}
.sl-nota+.sl-nota{margin-top:6px}
.sl-marcas{margin-top:12px}

/* ---------- o quadro que avisa que não há moldura ----------- */
.sl-palco{flex:0 0 auto;border:1px solid var(--borda-forte);
  border-radius:var(--r-painel);background:var(--fundo-cabecalho-tabela);
  padding:11px;margin-bottom:4px}
.sl-palco-rot{display:flex;align-items:center;gap:7px;font-family:var(--fonte-mono);
  font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--txt-apoio);margin-bottom:9px}
.sl-palco-rot .i{width:12px;height:12px;color:var(--txt-apoio)}
.sl-palco-tela{border:1px solid var(--borda-forte);border-radius:var(--r-item);
  background:var(--fundo-card);padding:0;overflow:hidden}

/* ============================================================
   O MURAL — letra do aparelho (nunca a baixada), sem menu, sem
   filtro, sem botão, sem sombra, sem decimal. Só contagem e
   estado. Estilos v.A §1.6, §2.1, §2.5, §3.6, §4.4, §4.8.
   ============================================================ */
.sl-mural{
  /* paleta de mural em contraste alto — Estilos v.A §3.6 */
  --sl-m-neutro-bg:#4A535C;  --sl-m-neutro-tx:#FFFFFF;
  --sl-m-curso-bg:#12602C;   --sl-m-curso-tx:#FFFFFF;
  --sl-m-atencao-bg:#F5C518; --sl-m-atencao-tx:#15181C;
  --sl-m-imped-bg:#8A1917;   --sl-m-imped-tx:#FFFFFF;
  --sl-m-corpo:18px;
  /* a letra do aparelho: nenhuma fonte baixada chega a uma TV */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--sl-m-corpo);line-height:1.35;color:var(--txt-forte);
  background:var(--fundo-card);padding:18px;box-shadow:none}
.sl-mural *{box-shadow:none!important}
.sl-palco-tela>.sl-mural{border:0;border-radius:var(--r-item)}
.sl-mono{font-family:var(--fonte-mono);letter-spacing:-.01em}

.sl-mural-topo{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-bottom:16px}
.sl-mural-painel{font-size:calc(var(--sl-m-corpo) * 1.45);font-weight:600;
  letter-spacing:-.01em;color:var(--txt-forte);line-height:1.15}
.sl-mural-tela{font-size:var(--sl-m-corpo);color:var(--txt-apoio);margin-top:2px}
.sl-mural-dir{margin-left:auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;text-align:right}
.sl-sinal{display:inline-flex;align-items:center;gap:7px;font-size:var(--sl-m-corpo);
  color:var(--txt-apoio)}
.sl-sinal i{width:10px;height:10px;border-radius:50%;background:var(--txt-apoio);
  display:block;flex:0 0 auto}
.sl-sinal.on i{background:var(--sl-m-curso-bg)}
.sl-sinal.off i{background:transparent;border:2px solid var(--txt-apoio)}
.sl-agora{font-size:var(--sl-m-corpo);color:var(--txt-apoio)}

/* --- a grade: 1 a 4 colunas, sem corte e sem rolagem lateral --- */
.sl-grade{display:grid;gap:14px;
  grid-template-columns:repeat(var(--sl-cols,3),minmax(0,1fr))}
.sl-grade[data-colunas="1"]{--sl-cols:1}
.sl-grade[data-colunas="2"]{--sl-cols:2}
.sl-grade[data-colunas="3"]{--sl-cols:3}
.sl-grade[data-colunas="4"]{--sl-cols:4}

/* --- bloco de painel: borda de 2 px, nenhuma sombra, nunca --- */
.sl-bloco{border:2px solid var(--borda-forte);border-radius:var(--r-item);
  background:var(--fundo-card);padding:14px 15px;display:flex;
  flex-direction:column;gap:9px;min-width:0}
.sl-bloco-rot{font-size:var(--sl-m-corpo);color:var(--txt-apoio);
  text-transform:uppercase;letter-spacing:.06em;font-family:var(--fonte-mono);
  line-height:1.25}
.sl-bloco-num{font-size:calc(var(--sl-m-corpo) * 2.4);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--txt-forte)}
.sl-bloco-tit{font-size:var(--sl-m-corpo);font-weight:600;color:var(--txt-forte);
  line-height:1.25;overflow-wrap:anywhere}
.sl-bloco-sub{font-size:var(--sl-m-corpo);color:var(--txt-apoio);line-height:1.3}
.sl-bloco-selos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* --- selo de mural: cor cheia, borda de 2 px na cor do texto --- */
.sl-selo{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;
  border-radius:var(--r-selo);font-size:var(--sl-m-corpo);font-weight:600;
  line-height:1.3;white-space:nowrap;border:2px solid currentColor}
.sl-selo.neutro{background:var(--sl-m-neutro-bg);color:var(--sl-m-neutro-tx)}
.sl-selo.curso{background:var(--sl-m-curso-bg);color:var(--sl-m-curso-tx)}
.sl-selo.atencao{background:var(--sl-m-atencao-bg);color:var(--sl-m-atencao-tx)}
.sl-selo.imped{background:var(--sl-m-imped-bg);color:var(--sl-m-imped-tx)}

/* --- barra de etapa: cinza de dado, sem decimal --- */
.sl-etapa{display:flex;align-items:center;gap:10px;min-width:0}
.sl-etapa b{font-size:var(--sl-m-corpo);font-weight:600;color:var(--txt-forte);
  white-space:nowrap}
.sl-etapa i{flex:1;min-width:40px;height:6px;border-radius:3px;
  background:var(--anel-trilho);display:block;overflow:hidden}
.sl-etapa i em{display:block;height:100%;background:var(--cat-3);border-radius:3px}

/* --- o que não cabe: o mural escreve quantos ficaram de fora --- */
.sl-sobra{border:2px dashed var(--borda-forte);border-radius:var(--r-item);
  background:transparent;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px;font-size:var(--sl-m-corpo);
  color:var(--txt-apoio);min-height:92px}

/* --- estado do aparelho: aguardando painel, sem sinal --- */
.sl-aparelho{border:2px solid var(--borda-forte);border-radius:var(--r-item);
  background:var(--fundo-card);min-height:260px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:24px}
.sl-aparelho b{font-size:calc(var(--sl-m-corpo) * 1.6);font-weight:600;
  letter-spacing:-.02em;color:var(--txt-forte);line-height:1.2}
.sl-aparelho span{font-size:var(--sl-m-corpo);color:var(--txt-apoio);max-width:520px}

/* --- código de adoção: letra de largura fixa, legível de longe --- */
.sl-adocao{min-height:300px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;text-align:center;padding:34px 24px}
.sl-adocao-rot{font-size:var(--sl-m-corpo);color:var(--txt-apoio);
  text-transform:uppercase;letter-spacing:.08em;font-family:var(--fonte-mono)}
.sl-adocao-cod{font-family:var(--fonte-mono);font-size:72px;font-weight:700;
  letter-spacing:.1em;line-height:1;color:var(--txt-forte)}
.sl-adocao-inst{font-size:calc(var(--sl-m-corpo) * 1.15);color:var(--txt-padrao);
  max-width:620px;line-height:1.4}

/* ---------- lugar celular: o mural cai para uma coluna ------
   A escala do mural é proporção do Corpo dele: muda o Corpo, e
   folga, selo e barra vêm junto. Nenhuma escada de letra. */
@media (max-width:860px){
  .area-semlogin .sl-grade{--sl-cols:1!important}
  .area-semlogin .sl-mural{--sl-m-corpo:16px;padding:14px}
  .area-semlogin .sl-adocao-cod{font-size:44px}
  .area-semlogin .sl-adocao{min-height:220px;padding:24px 14px}
  .area-semlogin .sl-ferr{row-gap:6px}
  .area-semlogin .sl-fb{min-height:44px}
  .area-semlogin .sl-ferr-rot{margin-left:0;width:100%}
}
@media (max-width:560px){
  .area-semlogin .sl-adocao-cod{font-size:34px;letter-spacing:.06em}
}