/*
  az900.css: componentes do preparatório AZ-900.
  As cores, as fontes, a barra do topo e o fundo de placa vêm do visual comum dos sites da Stela
  (assets/css/estilo.css, disciplina.css, aula.css e neon.css), carregado antes deste arquivo.
  Cada domínio da prova tem a sua cor: 1 conceitos (ciano), 2 arquitetura (azul) e 3 governança (lilás).
*/

:root {
  --d1: #5fd0de;
  --d2: #6aa8ff;
  --d3: #b892f2;
  --d0: var(--ouro-forte);
}

[data-tema="claro"] {
  --d1: #0b7a88;
  --d2: #1f5fbf;
  --d3: #6b3fb0;
}

.d1 { --c: var(--d1); }
.d2 { --c: var(--d2); }
.d3 { --c: var(--d3); }
.d0 { --c: var(--d0); }

.etiqueta.d1,
.etiqueta.d2,
.etiqueta.d3,
.etiqueta.d0 {
  color: var(--c);
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}


/* ---------- abertura ---------- */

.quem {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .8rem;
  font-family: var(--f-mono);
  font-size: .9rem;
  color: var(--ouro);
}

/* memoji da professora (o mesmo da conta Microsoft, para os alunos a reconhecerem) */
.memoji img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--superficie-2);
  border: 2px solid var(--d2);
}


/* ---------- domínios da prova ---------- */

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

.dominios .cartao {
  border-top: 4px solid var(--c);
}

.dominios .numero {
  color: var(--c);
}

.dominios + .fonte {
  margin-top: 1.4rem;
}

@media (max-width: 820px) {
  .dominios {
    grid-template-columns: 1fr;
  }
}


/* ---------- encontros (abrem e fecham) ---------- */

.encontro.commit::before {
  border-color: var(--c);
}

.encontro summary {
  cursor: pointer;
  list-style: none;
}

.encontro summary::-webkit-details-marker {
  display: none;
}

/* setinha que gira quando o encontro abre */
.encontro summary .commit-linha h3::after {
  content: " ›";
  color: var(--texto-3);
  display: inline-block;
  transition: transform .2s;
}

.encontro details[open] summary .commit-linha h3::after {
  transform: rotate(90deg);
}

.encontro-corpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
}

.encontro-corpo h4 {
  margin: 0 0 .35rem;
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 500;
  color: var(--c);
}

.encontro-corpo ul,
.encontro-corpo p {
  margin: 0;
  color: var(--texto-2);
}

.encontro-corpo ul {
  padding-left: 1.1rem;
}

@media (max-width: 680px) {
  .encontro-corpo {
    grid-template-columns: 1fr;
  }
}


/* ---------- trilhas do Microsoft Learn ---------- */

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

.trilha-learn {
  border-top: 4px solid var(--c);
}

.trilha-learn h3 a {
  color: var(--texto);
  text-decoration: none;
}

.trilha-learn h3 a:hover {
  color: var(--c);
}

@media (max-width: 920px) {
  .trilhas {
    grid-template-columns: 1fr;
  }
}


/* ---------- vídeos ---------- */

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-video {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.1rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--c);
  border-radius: var(--raio-p);
}

.painel-video .n {
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--c);
}

.painel-video .gancho {
  color: var(--texto-2);
  font-size: .92rem;
}

.painel-video .status {
  color: var(--texto-3);
  font-size: .8rem;
}


/* ---------- treinos ---------- */

.treinos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.treino .dica-treino {
  color: var(--texto-3);
  font-size: .9rem;
}

.treino .pergunta {
  margin-top: .4rem;
  font-weight: 700;
  color: var(--texto);
}

.treino .opcoes {
  display: grid;
  gap: .5rem;
  margin: .4rem 0;
}

.treino .opcoes button {
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  padding: .6rem .8rem;
  cursor: pointer;
}

.treino .opcoes button:hover:not(:disabled) {
  border-color: var(--d2);
}

.treino .opcoes button.certo {
  border-color: var(--neon);
  color: var(--neon);
}

.treino .opcoes button.errado {
  border-color: #ff5c7a;
  color: #ff5c7a;
}

[data-tema="claro"] .treino .opcoes button.errado {
  border-color: #c22450;
  color: #c22450;
}

.treino .retorno {
  min-height: 1.5em;
  color: var(--texto-2);
}

.treino .placar {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--texto-3);
}

.treino .proxima {
  align-self: flex-start;
}

@media (max-width: 820px) {
  .treinos {
    grid-template-columns: 1fr;
  }
}