/*
  interativos.css: as peças interativas e as tabelas das aulas deste site (versão 2 · 2026-10-26: calculadora "Comprar ou alugar?").
  Só deste site (Fundamentos de Computação em Nuvem). Mudou? Aumente o ?v=N nas aulas.
  Carregue depois do aula.css e do neon.css.
*/

/* ---------- quem cuida do quê: a tabela das camadas ---------- */
.camadas td,
.camadas th {
  text-align: center;
  white-space: nowrap;
}

.camadas td:first-child,
.camadas th:first-child {
  text-align: left;
}

.camadas .voce {
  color: var(--neon);
  font-weight: 700;
}

.camadas .provedor {
  color: var(--texto-3);
}

.legenda-camadas {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--texto-2);
}

.legenda-camadas .voce {
  color: var(--neon);
  font-weight: 700;
}

/* ---------- desafio "Classifique!" (classifica.js) ---------- */
.classifica {
  margin-top: 1rem;
}

.classifica-placar {
  margin: 0 0 .8rem;
  padding: .6rem .9rem;
  border-radius: var(--raio-p);
  border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
  background: color-mix(in srgb, var(--neon) 8%, transparent);
  font-family: var(--f-mono);
  font-size: .9rem;
  color: var(--texto);
}

/* .classifica na frente para vencer o recuo das listas do .faca-assim */
.classifica .classifica-itens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
}

.classifica-itens > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem .8rem;
  padding: .7rem .9rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: color-mix(in srgb, var(--texto) 3%, transparent);
}

.classifica-itens > li.certo {
  border-color: color-mix(in srgb, var(--menta) 60%, transparent);
}

.classifica-nome {
  font-family: var(--f-titulo);
  font-weight: 700;
  color: var(--texto);
}

.classifica-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.classifica-botoes button {
  min-width: 3.6rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font: 600 .88rem var(--f-mono);
  cursor: pointer;
}

.classifica-botoes button:hover {
  border-color: var(--neon);
}

.classifica-botoes button:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.classifica-botoes button.acertou {
  border-color: var(--menta);
  background: color-mix(in srgb, var(--menta) 18%, var(--superficie));
}

.classifica-botoes button.errou {
  border-color: #e5786d;
  color: var(--texto-2);
  text-decoration: line-through;
}

.classifica-retorno {
  grid-column: 1 / -1;
  font-size: .92rem;
  color: var(--texto-2);
}

.classifica-retorno:empty {
  display: none;
}

.classifica-reiniciar {
  margin-top: .9rem;
}

@media (max-width: 520px) {
  .classifica-itens > li {
    grid-template-columns: 1fr;
  }
}

/* ---------- calculadora "Comprar ou alugar?" (contas.js) ---------- */
.calc-custo {
  margin-top: 1rem;
  display: grid;
  gap: .9rem;
}

.calc-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .7rem 1rem;
}

.calc-campos label {
  display: grid;
  gap: .3rem;
  font-size: .92rem;
  color: var(--texto-2);
}

.calc-campos input {
  box-sizing: border-box;
  width: 100%;
  padding: .5rem .7rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font: 500 1rem var(--f-mono);
}

.calc-campos input:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.calc-campos .calc-nuvem input {
  border-color: color-mix(in srgb, var(--neon) 55%, transparent);
}

.calc-resultado {
  display: block;
  padding: .8rem 1rem;
  border-radius: var(--raio-p);
  border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
  background: color-mix(in srgb, var(--neon) 8%, transparent);
}

.calc-resultado p {
  margin: 0;
  color: var(--texto-2);
}

.calc-resultado p + p {
  margin-top: .25rem;
}

.calc-resultado .calc-conclusao {
  margin-top: .5rem;
  font-family: var(--f-titulo);
  font-weight: 700;
  color: var(--texto);
}