/* Identidade FEQ: navy 094567, azul 065BAA, teal 19ABB5, laranja ED7D31, vermelho DC4E41.
   Tema claro só: a aula é projetada. */
:root {
  --navy: #094567; --azul: #065BAA; --teal: #19ABB5; --laranja: #ED7D31; --vermelho: #DC4E41;
  --tinta: #1F1F1F; --tinta2: #5A5A5A; --grade: #E3E6EA; --fundo2: #F3F6F9; --verde: #2E8B57;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1d21; }
body { font-family: Verdana, Geneva, sans-serif; color: var(--tinta); }
.palco { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; }
.slide {
  position: absolute; inset: 0; display: none; overflow: hidden; background: #fff;
  padding: 104px 64px 44px; font-size: 25px; line-height: 1.38;
}
.slide.ativo { display: block; }
.notas { display: none; }

/* título com a seta (chevron) da identidade FEQ */
.slide > h2 {
  position: absolute; left: 0; top: 26px; margin: 0; padding: 0 160px 0 64px;
  font-size: 33px; line-height: 52px; color: var(--navy); font-weight: bold;
}
.slide > h2::before {
  content: ""; position: absolute; left: 22px; top: 12px; width: 22px; height: 28px;
  background: var(--teal); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}
.slide > h2 small { font-size: 21px; color: var(--tinta2); font-weight: normal; margin-left: 10px; }
.slide .logo { position: absolute; right: 26px; top: 26px; height: 46px; }
.slide .num { position: absolute; right: 26px; bottom: 12px; font-size: 15px; color: var(--tinta2); }
.slide .rodape { position: absolute; left: 64px; bottom: 12px; font-size: 15px; color: var(--tinta2); }

/* capa e divisores */
.slide.capa, .slide.divisor { background: var(--navy); color: #fff; }
.capa .logo, .divisor .logo { background: #fff; padding: 6px 8px; border-radius: 6px; height: 58px; }
.capa .num, .divisor .num { color: rgba(255,255,255,.6); }
.capa h1 { font-size: 50px; line-height: 1.15; margin: 120px 0 26px; max-width: 1000px; }
.capa .sub { font-size: 27px; color: #CFE6F0; max-width: 980px; }
.capa .autoria { position: absolute; left: 64px; bottom: 56px; font-size: 20px; color: #CFE6F0; }
.capa .faixa, .divisor .faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--teal); }
.divisor .rotulo { margin-top: 150px; font-size: 24px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal); }
.divisor h1 { font-size: 46px; line-height: 1.2; margin: 14px 0 26px; max-width: 1080px; }
.divisor p { font-size: 26px; color: #CFE6F0; max-width: 1000px; }

/* texto */
.slide p { margin: 0 0 14px; }
.slide ul, .slide ol { margin: 0 0 14px; padding-left: 30px; }
.slide li { margin-bottom: 10px; }
.slide li::marker { color: var(--teal); font-weight: bold; }
.slide b, .slide strong { color: var(--navy); }
.peq { font-size: 20px; }
.mini { font-size: 17px; color: var(--tinta2); }
.cinza { color: var(--tinta2); }
.lar { color: var(--laranja); } .verm { color: var(--vermelho); } .tl { color: var(--teal); } .az { color: var(--azul); }
.centro { text-align: center; }

.pergunta {
  border-left: 8px solid var(--laranja); background: #FDF2EA; padding: 14px 22px; margin: 14px 0;
  font-size: 26px; color: var(--tinta);
}
.pergunta::before { content: "Pergunta para a turma"; display: block; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--laranja); font-weight: bold; margin-bottom: 4px; }
.caixa { border: 2px solid var(--grade); border-radius: 10px; padding: 14px 20px; background: var(--fundo2); }
.caixa.az { border-color: var(--azul); background: #EEF4FB; }
.caixa.tl { border-color: var(--teal); background: #EAF7F8; }
.caixa h3 { margin: 0 0 8px; font-size: 22px; color: var(--navy); }
.destaque { font-size: 30px; font-weight: bold; color: var(--navy); }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.duas.l2 { grid-template-columns: 1.35fr 1fr; }
.duas.r2 { grid-template-columns: 1fr 1.35fr; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pilha > * + * { margin-top: 14px; }
img.fig { display: block; max-width: 100%; max-height: 520px; margin: 0 auto; }
img.eq { display: block; margin: 10px auto; max-width: 100%; }

/* revelação passo a passo */
.frag { opacity: 0; visibility: hidden; transition: opacity .25s; }
.frag.visto { opacity: 1; visibility: visible; }

/* tabelas */
table.tab { border-collapse: collapse; width: 100%; font-size: 20px; }
.tab th { background: var(--navy); color: #fff; padding: 8px 10px; text-align: left; font-weight: bold; }
.tab td { padding: 7px 10px; border-bottom: 1px solid var(--grade); vertical-align: top; }
.tab tr:nth-child(even) td { background: var(--fundo2); }
.tab td.n, .tab th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tab .vazio { color: #B9C0C8; }

/* cartões dos episódios */
.cartoes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cartao { border-top: 6px solid var(--teal); background: var(--fundo2); padding: 12px 14px; font-size: 18px; min-height: 180px; }
.cartao b { display: block; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }

/* simulações */
.sim, .reator, .faixas { display: flex; flex-direction: column; gap: 8px; }
.sim-topo { flex: 1; display: flex; gap: 14px; min-height: 0; }
.sim-graf, .faixas-graf { flex: 1; position: relative; min-width: 0; }
canvas.graf, .faixas-graf canvas { position: absolute; left: 0; top: 0; }
.sim-leituras { width: 190px; display: flex; flex-direction: column; gap: 10px; }
.sim-leituras.horizontal { width: auto; flex-direction: row; flex-wrap: wrap; margin-top: auto; }
.sim-leituras.horizontal .leitura { flex: 1; min-width: 100px; padding: 5px 10px; }
.sim-leituras.horizontal .leitura b { font-size: 21px; }
.sim-leituras.horizontal .leitura span { font-size: 13px; }
.ctl-nome label { flex-direction: row !important; align-items: center; gap: 6px; color: var(--tinta) !important; font-size: 16px !important; }
.leitura { background: var(--fundo2); border-radius: 8px; padding: 8px 12px; }
.leitura b { display: block; font-size: 27px; color: var(--navy); font-variant-numeric: tabular-nums; }
.leitura span { font-size: 14px; color: var(--tinta2); }
.leitura.alarme { background: var(--vermelho); }
.leitura.alarme b, .leitura.alarme span { color: #fff !important; }
.leitura.ok b { color: var(--verde) !important; }
.sim-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
.sim-barra .relogio { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tinta2); }
button, select, input { font: inherit; font-size: 15px; }
button {
  border: 1.5px solid var(--azul); background: #fff; color: var(--azul); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
}
button:hover { background: #EEF4FB; }
button.primario { background: var(--azul); color: #fff; min-width: 112px; }
button.perturba { border-color: var(--laranja); color: #B4561C; }
button.perturba:hover { background: #FDF2EA; }
select { padding: 4px 6px; border: 1.5px solid var(--grade); border-radius: 6px; background: #fff; }
.ctl { display: inline-flex; align-items: center; gap: 8px; }
.ctl input[type=range] { width: 170px; accent-color: var(--laranja); }
.ctl output { min-width: 58px; font-weight: bold; color: var(--navy); }

/* painel do reator */
.reator-painel { width: 400px; display: flex; flex-direction: column; gap: 7px; font-size: 16px; }
.reator-painel .estr { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: bold; color: var(--navy); }
.reator-painel .estr select { font-weight: normal; }
.ctl-linha { border: 1.5px solid var(--grade); border-radius: 8px; padding: 6px 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; }
.ctl-linha[hidden] { display: none; }
.ctl-nome { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.ctl-linha label { display: flex; flex-direction: column; font-size: 14px; color: var(--tinta2); }
.ctl-linha input[type=text] { width: 100%; padding: 2px 6px; border: 1.5px solid var(--grade); border-radius: 5px; }
.ctl-linha input:disabled { background: var(--fundo2); color: var(--tinta2); }
button.am { padding: 1px 12px; font-weight: bold; background: var(--verde); border-color: var(--verde); color: #fff; }
button.am.manual { background: var(--laranja); border-color: var(--laranja); }
.ctl-split { flex-wrap: wrap; font-size: 16px; }
.dica { font-size: 13px; color: var(--tinta2); width: 100%; padding-left: 26px; }

/* sobreposições */
.painel-notas {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 38vh; overflow: auto; z-index: 10;
  background: rgba(20,24,30,.95); color: #EDEFF2; font: 17px/1.5 Verdana, sans-serif; padding: 14px 24px;
}
.ajuda {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 11;
  background: rgba(20,24,30,.95); color: #EDEFF2; font: 15px Verdana, sans-serif; padding: 10px 18px; border-radius: 8px;
}
.progresso { position: fixed; left: 0; bottom: 0; height: 4px; background: var(--teal); z-index: 9; transition: width .2s; }
@media print { .painel-notas, .ajuda, .progresso { display: none !important; } }

/* capa: responsável pela aula */
.capa .autoria { bottom: 40px; font-size: 18px; }
.capa .ped { position: absolute; left: 64px; bottom: 122px; font-size: 21px; line-height: 1.55; color: #fff; border-left: 5px solid var(--teal); padding-left: 16px; }
.capa .ped b { color: #fff; font-size: 23px; }
.capa .ped a { color: #CFE6F0; text-decoration: none; }

/* aposta: a turma vota antes de a simulação rodar */
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; counter-reset: op; }
.opcoes > div {
  position: relative; display: flex; align-items: center; min-height: 150px;
  border: 2px solid var(--grade); border-radius: 12px; background: #fff; padding: 18px 24px 18px 90px; font-size: 28px; line-height: 1.3;
}
.opcoes > div::before {
  counter-increment: op; content: counter(op); position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: bold; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.voto { margin-top: 30px; font-size: 18px; color: var(--tinta2); }

/* mão na válvula: a instrução fica acima do simulador */
.instr { border-left: 6px solid var(--laranja); padding: 4px 0 4px 14px; margin: 0 0 10px; font-size: 19px; }
.ctl.largo input[type=range] { width: 250px; }

/* verdadeiro ou falso */
.vf { list-style: none; padding: 0 !important; margin-top: 6px; }
.vf li { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: center; border-bottom: 1px solid var(--grade); padding: 12px 0; margin: 0; font-size: 23px; }
.vf .resp { font-size: 18px; color: var(--tinta2); }
.vf .resp b { font-size: 21px; margin-right: 6px; }
.vf .resp.v b { color: var(--verde); } .vf .resp.f b { color: var(--vermelho); }

/* capa com foto de planta: gradiente navy à esquerda mantém o texto legível */
.slide.capa.foto {
  background:
    linear-gradient(90deg, rgba(9,69,103,.94) 0%, rgba(9,69,103,.82) 50%, rgba(9,69,103,.35) 100%),
    url(../figuras/capa_planta.webp) center / cover no-repeat;
}

/* relato de operação no divisor: registro curto, só fatos */
.divisor .relato { margin-top: 8px; max-width: 1060px; border-left: 5px solid var(--teal); background: rgba(255,255,255,.07); padding: 14px 24px 10px; }
.divisor .relato .cab { font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.divisor .relato ul { margin: 0; padding-left: 22px; font-size: 22px; line-height: 1.5; color: #fff; }
.divisor:has(.relato) .rotulo { margin-top: 40px; }
.divisor:has(.relato) h1 { margin-bottom: 22px; }