/* Exercícios, vídeos e barra de progresso — a camada interativa do livro vivo.
   Usa as variáveis do tema (estilo.css) para acompanhar claro/escuro. */

:root {
  --ex-borda: #d8d8d4;
  --ex-certo: #2a7a3f;
  --ex-errado: #b3261e;
  --ex-parcial: #a15a00;
  --ex-fundo: rgba(127, 127, 127, .05);
}
:root[data-tema="escuro"] {
  --ex-borda: #33363b;
  --ex-certo: #6fd08a;
  --ex-errado: #f2857b;
  --ex-parcial: #e0a24a;
  --ex-fundo: rgba(255, 255, 255, .035);
}

/* ------------------------------------------------------------ exercício */

.exercicio {
  border: 1px solid var(--ex-borda);
  border-left: 4px solid var(--prat);
  border-radius: 10px;
  background: var(--ex-fundo);
  padding: 1rem 1.1rem .9rem;
  margin: 1.6rem 0;
}
.exercicio[data-resultado="certo"] { border-left-color: var(--ex-certo); }
.exercicio[data-resultado="errado"] { border-left-color: var(--ex-errado); }
.exercicio[data-resultado="parcial"] { border-left-color: var(--ex-parcial); }

.ex-cab {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: .5rem;
}
.ex-tag { color: var(--prat); font-weight: 700; }
.ex-id { background: none; color: var(--muted); font-size: .72rem; }
.ex-modo { margin-left: auto; text-transform: none; letter-spacing: 0; font-style: italic; }

.ex-enunciado > :first-child { margin-top: 0; }
.ex-enunciado > :last-child { margin-bottom: .6rem; }

.ex-opcoes { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.ex-opcoes li { margin: .25rem 0; }
.ex-opcoes label {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .4rem .6rem; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
}
.ex-opcoes label:hover { background: rgba(127, 127, 127, .1); }
.ex-opcoes input { margin-top: .3rem; flex: none; }
.ex-opcoes label span p { margin: 0; }

.ex-entrada { margin: .3rem 0 .8rem; }
.ex-num, .ex-txt, .ex-aberta {
  width: 100%; max-width: 26rem; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--ex-borda);
  border-radius: 7px; padding: .45rem .6rem;
}
.ex-aberta { max-width: 100%; resize: vertical; }
.ex-num:focus, .ex-txt:focus, .ex-aberta:focus { outline: 2px solid var(--link); outline-offset: 1px; }

.ex-acoes { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ex-enviar {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--link); color: #fff; border: 0; border-radius: 7px; padding: .4rem 1rem;
}
.ex-enviar:hover { filter: brightness(1.08); }
.ex-enviar:disabled { opacity: .6; cursor: progress; }
.ex-dica {
  font: inherit; font-size: .85rem; cursor: pointer; background: none;
  color: var(--link); border: 1px solid var(--ex-borda); border-radius: 7px; padding: .35rem .8rem;
}
.ex-status { font-size: .85rem; color: var(--muted); }
.exercicio[data-resultado="certo"] .ex-status { color: var(--ex-certo); font-weight: 600; }
.exercicio[data-resultado="errado"] .ex-status { color: var(--ex-errado); font-weight: 600; }

.ex-feedback {
  margin-top: .85rem; padding: .7rem .85rem;
  border: 1px dashed var(--ex-borda); border-radius: 8px;
  background: var(--bg); font-size: .93rem;
}
.ex-fb-cab {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: .35rem;
}
.ex-fb-volte { display: inline-block; margin-top: .5rem; font-size: .85rem; }
.ex-fb-criterios { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.ex-fb-criterios li.ok { color: var(--ex-certo); }
.ex-fb-criterios li.falta { color: var(--muted); }
.ex-fb-criterios li.ok::marker { content: "✔ "; }
.ex-fb-criterios li.falta::marker { content: "○ "; }

/* ---------------------------------------------------------------- vídeo */

.video {
  border: 1px solid var(--ex-borda);
  border-left: 4px solid var(--roubar);
  border-radius: 10px;
  background: var(--ex-fundo);
  padding: 1rem 1.1rem .9rem;
  margin: 1.6rem 0;
}
.vd-cab {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .4rem;
}
.vd-tag {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--roubar); font-weight: 700;
}
.vd-titulo { font-size: 1rem; }
.vd-autor, .vd-min { font-size: .8rem; color: var(--muted); }
.vd-porque { font-size: .93rem; color: var(--muted); }
.vd-porque > :first-child { margin-top: .2rem; }

.vd-player {
  position: relative; margin: .7rem 0 .5rem; border-radius: 9px; overflow: hidden;
  background: linear-gradient(135deg, rgba(127, 127, 127, .16), rgba(127, 127, 127, .06));
  aspect-ratio: 16 / 9; display: grid; place-content: center; gap: .5rem; text-align: center;
}
.vd-player[data-carregado="true"] { display: block; background: #000; }
.vd-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.vd-play {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  background: var(--link); color: #fff; border: 0; border-radius: 999px; padding: .5rem 1.3rem;
}
.vd-aviso { margin: 0; font-size: .76rem; color: var(--muted); max-width: 24rem; padding: 0 1rem; }
.vd-player[data-carregado="true"] .vd-aviso { display: none; }
.vd-visto { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }

/* ------------------------------------------------------------ progresso */

.pg-barra {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding: .55rem .8rem;
  border: 1px solid var(--ex-borda); border-radius: 999px; font-size: .82rem;
}
.pg-rot { color: var(--muted); }
.pg-trilho {
  flex: 1 1 8rem; min-width: 6rem; height: .45rem;
  background: rgba(127, 127, 127, .2); border-radius: 999px; overflow: hidden;
}
.pg-fill { display: block; height: 100%; width: 0; background: var(--prat); transition: width .35s ease; }
.pg-barra[data-completo="true"] .pg-fill { background: var(--ex-certo); }
.pg-txt { color: var(--fg); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- impressão */

@media print {
  .ex-acoes, .ex-feedback, .vd-player, .vd-visto, .pg-barra { display: none !important; }
  .exercicio, .video { break-inside: avoid; }
}

@media (max-width: 640px) {
  .ex-modo { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------- laboratórios */

.laboratorio {
  border: 1px solid var(--ex-borda);
  border-left: 4px solid var(--obj);
  border-radius: 10px;
  background: var(--ex-fundo);
  padding: 1rem 1.1rem .9rem;
  margin: 1.6rem 0;
}
.lab-cab {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: .45rem;
}
.lab-tag { color: var(--obj); font-weight: 700; }
.lab-titulo { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--fg); font-weight: 700; }
.lab-intro { font-size: .93rem; }
.lab-intro > :first-child { margin-top: .2rem; }

.lab-corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; }
@media (max-width: 780px) { .lab-corpo { grid-template-columns: 1fr; } }

.lab-painel { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.lab-campo { display: grid; grid-template-columns: 7.5rem 4.5rem 1fr; gap: .5rem; align-items: center; font-size: .88rem; }
.lab-campo-rot { color: var(--muted); }
.lab-num, .lab-select {
  font: inherit; font-size: .9rem; color: var(--fg); background: var(--bg);
  border: 1px solid var(--ex-borda); border-radius: 6px; padding: .25rem .4rem; width: 100%;
}
.lab-select { grid-column: 2 / span 2; }
.lab-faixa { width: 100%; accent-color: var(--obj); }

.lab-formula {
  font-size: .9rem; padding: .45rem .6rem; border-radius: 6px;
  background: var(--code-bg); font-variant-numeric: tabular-nums;
}
.lab-tabela { width: auto; margin: .3rem 0; font-size: .88rem; display: table; }
.lab-tabela th, .lab-tabela td { padding: .18rem .55rem; text-align: center; border: 1px solid var(--ex-borda); }
.lab-tabela tr.ok td:last-child { color: var(--ex-certo); font-weight: 700; }
.lab-tabela tr.erro td:last-child { color: var(--ex-errado); font-weight: 700; }

.lab-veredito { font-size: .9rem; padding: .5rem .7rem; border-radius: 7px; border: 1px dashed var(--ex-borda); }
.lab-veredito.acertou { border-style: solid; border-color: var(--ex-certo); }
.lab-veredito.quase { border-style: solid; border-color: var(--ex-parcial); }

.lab-canvas { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.lab-legenda { font-size: .78rem; color: var(--muted); max-width: 26rem; margin: .4rem 0 0; }
.lab-erro { color: var(--ex-errado); font-size: .9rem; }

@media print { .laboratorio .lab-corpo { display: none; } }