/* ============================================================
   Quadro do projeto
   A única tela que não é jogo. Ela é ferramenta, então se
   comporta como ferramenta: menos cartaz, mais densidade,
   estado visível de longe.
   ============================================================ */

.cartaz[data-campo="projeto"] {
  --campo: var(--marca-ciano);
  --cartaz-texto: var(--marca-preto);
  --cartaz-sombra: #ffffff;
}

/* barra de turma no hub */

.barra-turma {
  margin-bottom: var(--e4);
  padding: var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}

.barra-turma__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.barra-turma__rotulo {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.barra-turma__select {
  min-height: 2.6rem;
  padding: var(--e1) var(--e3);
  font-family: var(--fonte);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--texto);
  background: var(--fundo-2);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-p);
  max-width: 100%;
}

/* Virou botão: é por aqui que a turma batiza a empresa dela.
   Continua parecendo texto, com a pista de clique só no
   sublinhado pontilhado, porque um botão cheio aqui competiria
   com "Editar" e "Nova turma" logo ao lado. */
.barra-turma__empresa {
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--texto-suave);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}

.barra-turma__empresa:hover {
  color: var(--texto);
}

.barra-turma__empresa:focus-visible {
  outline: 3px solid var(--marca-ciano);
  outline-offset: 3px;
}

/* Sem nome ainda: em vez de constatar a falta, convida. Usa
   --acento, e não o amarelo cru, porque a barra também aparece
   com o tema claro do projetor, onde amarelo em cima de branco
   não se lê. */
.barra-turma__empresa--vazia {
  color: var(--acento);
  font-weight: 600;
  border-bottom-style: dashed;
}

.barra-turma__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-left: auto;
}

.barra-turma__convite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
}

.barra-turma__texto {
  flex: 1 1 22rem;
  font-size: 0.94rem;
  color: var(--texto-suave);
}

.barra-turma__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--e3);
  align-items: end;
}

.barra-turma__form .barra-turma__botoes { margin-left: 0; grid-column: 1 / -1; }

@media (max-width: 40rem) {
  .barra-turma__botoes { margin-left: 0; width: 100%; }
}

/* sincronia */

.nuvem {
  margin-bottom: var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--superficie-alta);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}

.nuvem:empty { display: none; }

.nuvem__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.nuvem__rotulo {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.nuvem__codigo {
  padding: var(--e1) var(--e3);
  font-family: var(--fonte);
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: var(--marca-marinho);
  color: #ffffff;
}

.nuvem__texto,
.nuvem__situacao {
  flex: 1 1 16rem;
  font-size: 0.86rem;
  color: var(--texto-suave);
  line-height: 1.5;
}

.nuvem__linha[data-estado="sincronizado"] .nuvem__situacao { color: var(--ok); font-weight: 700; }
.nuvem__linha[data-estado="erro"] .nuvem__situacao { color: var(--erro); font-weight: 700; }

/* Nuvem desligada não é detalhe: é o material do professor sem
   lugar pra ficar. O aviso ocupa espaço à altura disso. */
.nuvem[data-estado="desligada"],
.nuvem[data-estado="sem-codigo"] {
  background: var(--erro-veu);
  border-color: var(--erro);
  border-width: 3px;
}

.nuvem__alerta { display: grid; gap: var(--e3); }

.nuvem__alertaTitulo {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--erro);
}

/* chamariz no hub */

.chamariz {
  display: grid;
  gap: var(--e2);
  width: 100%;
  text-align: left;
  padding: var(--e5);
  margin-bottom: var(--e5);
  background: var(--marca-ciano);
  color: var(--marca-preto);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  box-shadow: 6px 6px 0 var(--marca-preto);
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.chamariz:hover { transform: translateY(-2px); box-shadow: 8px 8px 0 var(--marca-preto); }
.chamariz:active { transform: translateY(3px); box-shadow: 3px 3px 0 var(--marca-preto); }

.chamariz__selo {
  justify-self: start;
  padding: var(--e1) var(--e3);
  background: var(--marca-preto);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chamariz__nome {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.chamariz__linha { font-size: 0.96rem; max-width: 54ch; }

/* aviso */

.aviso {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e5);
  background: var(--destaque);
  color: var(--destaque-contraste);
  border: 2px solid var(--marca-preto);
  font-weight: 700;
  font-size: 0.94rem;
}

.aviso[hidden] { display: none !important; }

/* etapas do projeto */

.etapas-projeto { display: grid; gap: var(--e3); }

.etapa {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--e4);
  align-items: start;
  text-align: left;
  padding: var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.etapa:hover { background: var(--superficie-alta); }

.etapa__numero {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1.1rem;
  background: var(--superficie-alta);
  color: var(--texto-fraco);
}

.etapa__corpo { display: grid; gap: var(--e1); }

.etapa__nome {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.etapa__oque { font-size: 0.92rem; color: var(--texto-suave); line-height: 1.5; }

.etapa[data-estado="atual"] {
  border-color: var(--marca-preto);
  box-shadow: 5px 5px 0 var(--marca-preto);
}
.etapa[data-estado="atual"] .etapa__numero { background: var(--marca-magenta); color: #ffffff; }

.etapa[data-estado="feita"] .etapa__numero { background: var(--marca-verde); color: var(--marca-preto); }
.etapa[data-estado="futura"] { opacity: 0.62; }

/* as ações da turma */

.acoes-projeto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--e3);
}

/* Lista vazia não é erro, é o estado inicial certo. Então o bloco
   tem a cara de recado do professor, e não de aviso de falha. */
.acoes-vazio {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--e2);
  padding: var(--e4) var(--e5);
  background: var(--superficie);
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
}

.acoes-vazio__titulo {
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.acoes-vazio__texto {
  color: var(--texto-suave);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 46ch;
}

.acao-cartao {
  display: grid;
  gap: var(--e1);
  align-content: start;
  text-align: left;
  padding: var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  transition: background var(--transicao), border-color var(--transicao);
}

.acao-cartao__mes {
  justify-self: start;
  padding: var(--e1) var(--e2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--marca-preto);
}

.acao-cartao[data-cor="amarelo"] .acao-cartao__mes { background: var(--marca-amarelo); color: var(--marca-preto); }
.acao-cartao[data-cor="magenta"] .acao-cartao__mes { background: var(--marca-magenta); color: #fff; }
.acao-cartao[data-cor="laranja"] .acao-cartao__mes { background: var(--marca-laranja); color: #fff; }
.acao-cartao[data-cor="verde"] .acao-cartao__mes { background: var(--marca-verde); color: var(--marca-preto); }
.acao-cartao[data-cor="branco"] .acao-cartao__mes { background: #ffffff; color: var(--marca-preto); }

.acao-cartao__nome {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}

.acao-cartao__causa { font-size: 0.84rem; color: var(--texto-suave); }
.acao-cartao__conta { font-size: 0.8rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

/* Virou botão de verdade. Antes o cartão inteiro era clicável, e
   o cartão agora carrega também renomear e tirar: botão dentro de
   botão não existe em HTML, e o alvo grande demais fazia a turma
   marcar ação como realizada sem querer. */
.acao-cartao__selo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  /* Alto o bastante pro dedo. É a ação principal do cartão, e
     quem marca ação como realizada costuma estar de pé na frente
     da turma, com o celular na mão. Renomear e tirar podem ficar
     miúdos: são de mesa, não de aula. */
  min-height: 44px;
  margin-top: var(--e2);
  padding: var(--e2) var(--e3);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--superficie-alta);
  color: var(--texto-fraco);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  cursor: pointer;
}

.acao-cartao__selo:hover { color: var(--texto); }

.acao-cartao__acoes { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e1); }

.acao-cartao[data-feita="sim"] {
  border-color: var(--marca-preto);
  box-shadow: 5px 5px 0 var(--marca-preto);
}
.acao-cartao[data-feita="sim"] .acao-cartao__selo {
  background: var(--marca-verde);
  color: var(--marca-preto);
  border-color: var(--marca-preto);
}

/* sugestões de ação */

.sugestoes {
  display: grid;
  gap: var(--e2);
  margin-bottom: var(--e5);
}

.sugestoes__rotulo {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.sugestoes__faixa { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Chip, não cartão: é ideia de fora, e não pode competir com as
   ações que a turma escreveu logo acima. */
.sugestao {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  padding: var(--e2) var(--e3);
  background: transparent;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.sugestao:hover {
  background: var(--superficie-alta);
  border-style: solid;
  border-color: var(--acento);
}

.sugestao__nome { font-weight: 700; font-size: 0.9rem; }
.sugestao__mes {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* nova tarefa */

.nova-tarefa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e3);
  align-items: end;
  padding: var(--e5);
  background: var(--superficie);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
  margin-bottom: var(--e5);
}

/* O de criar ação encosta nas sugestões logo abaixo: são a mesma
   decisão, escrever a sua ou pegar uma pronta. */
.nova-tarefa--acao { margin: var(--e4) 0 var(--e3); }

.campo { display: grid; gap: var(--e1); }
.campo--largo { grid-column: span 2; }

.campo label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.campo input,
.campo select {
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  font-family: var(--fonte);
  font-size: 0.96rem;
  color: var(--texto);
  background: var(--fundo-2);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-p);
}

.campo input::placeholder { color: var(--texto-fraco); }

/* Explica a consequência de um campo quando ela não é óbvia.
   Vale a linha extra: escolher o ramo troca a cara de todos os
   jogos, e quem cadastra a turma precisa saber disso antes. */
.campo__ajuda {
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* quadro */

.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
}

.coluna {
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding: var(--e4);
  background: var(--superficie-alta);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  min-height: 8rem;
}

.coluna__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.coluna__conta {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 var(--e1);
  font-size: 0.78rem;
  background: var(--marca-marinho);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.coluna__lista { display: grid; gap: var(--e2); }

.coluna__vazia { font-size: 0.86rem; color: var(--texto-fraco); }

.tarefa {
  display: grid;
  gap: var(--e2);
  padding: var(--e3);
  background: var(--fundo-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio-p);
}

.tarefa[data-travado="sim"] {
  border-color: var(--marca-laranja);
  background: var(--erro-veu);
}

.tarefa__topo { display: flex; flex-wrap: wrap; gap: var(--e1); }

.tarefa__acao {
  padding: 0 var(--e2);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--marca-preto);
}

.tarefa__acao[data-cor="amarelo"] { background: var(--marca-amarelo); color: var(--marca-preto); }
.tarefa__acao[data-cor="magenta"] { background: var(--marca-magenta); color: #fff; }
.tarefa__acao[data-cor="laranja"] { background: var(--marca-laranja); color: #fff; }
.tarefa__acao[data-cor="verde"] { background: var(--marca-verde); color: var(--marca-preto); }
.tarefa__acao[data-cor="branco"] { background: #ffffff; color: var(--marca-preto); }

.tarefa__travado {
  padding: 0 var(--e2);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--marca-laranja);
  color: #ffffff;
}

.tarefa__titulo { font-weight: 700; line-height: 1.35; font-size: 0.96rem; }
.tarefa__quem { font-size: 0.84rem; color: var(--texto-suave); }

.tarefa__acoes { display: flex; flex-wrap: wrap; gap: var(--e1); }

.tarefa__botao {
  padding: var(--e1) var(--e2);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  background: transparent;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  cursor: pointer;
}

.tarefa__botao:hover { background: var(--superficie-alta); color: var(--texto); }

@media (max-width: 52rem) {
  .kanban { grid-template-columns: 1fr; }
  .campo--largo { grid-column: span 1; }
}