/* ============================================================================
   LINHA · Treinamentos / Capacitação (#view-capacitacao) e seus modais
   Abas = departamentos com material. Cartões simples; curso interativo abre
   na própria tela (player), o resto em modal de leitura.
   ============================================================================ */

.cap-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--l-e4) }
.cap-grade > .au-empty{ grid-column:1 / -1 }
.cap-card{ display:flex; flex-direction:column; gap:var(--l-e2); padding:var(--l-e5); background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-3); box-shadow:inset 0 3px 0 var(--cap-cor, var(--l-marca)) }
.cap-tipo-video{ --cap-cor:var(--lg-2) }
.cap-tipo-pdf{ --cap-cor:var(--lg-3) }
.cap-tipo-text{ --cap-cor:var(--lg-4) }
.cap-tipo-html{ --cap-cor:var(--lg-1) }
.cap-card-tipo{ font-size:var(--l-t-mini); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--l-texto-3) }
.cap-card-title{ font-size:var(--l-t-med); font-weight:600; line-height:1.3 }
.cap-card-desc{ font-size:var(--l-t-peq); color:var(--l-texto-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.cap-card-setores{ display:flex; flex-wrap:wrap; gap:4px }
.cap-card-footer{ display:flex; align-items:center; gap:var(--l-e3); margin-top:auto; padding-top:var(--l-e3); border-top:1px solid var(--l-fio) }
.cap-excluir{ color:var(--l-erro) }

/* meus concluídos */
.cap-meus-head{ display:flex; align-items:baseline; gap:var(--l-e3); padding:var(--l-e4) var(--l-e5) }
.cap-meus[open] .cap-meus-head{ border-bottom:1px solid var(--l-fio) }
.cap-meus-body{ padding:var(--l-e4) var(--l-e5) }
.cap-meus-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--l-e3) }
.cap-meu{ display:flex; flex-direction:column; gap:4px; padding:var(--l-e3) var(--l-e4); border:1px solid var(--l-fio); border-radius:var(--l-raio-2) }
.cap-meu.ok{ box-shadow:inset 3px 0 0 var(--l-ok) }
.cap-meu-topo{ display:flex; justify-content:space-between; gap:var(--l-e2) }
.cap-meu-titulo{ font-weight:500 }
.cap-meu-sub, .cap-meu-nota{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.cap-meu-selo{ font-size:var(--l-t-mini); font-weight:600; color:var(--l-ok) }

/* player do curso interativo */
.cap-player{ display:flex; flex-direction:column }
.cap-player-bar{ display:flex; align-items:center; gap:var(--l-e3); padding:var(--l-e3) var(--l-e4); border-bottom:1px solid var(--l-fio) }
.cap-player-frame{ height:calc(100dvh - 220px); min-height:480px }
.cap-player-frame iframe{ width:100%; height:100%; border:0; display:block }

/* modal de leitura */
.cap-leitura{ width:min(960px, 100%) }
.cap-video{ position:relative; aspect-ratio:16 / 9; border-radius:var(--l-raio-2); overflow:hidden; background:#000 }
.cap-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.cap-pdf-barra{ margin-bottom:var(--l-e2) }
.cap-pdf{ width:100%; height:70vh; border:1px solid var(--l-fio); border-radius:var(--l-raio-2); display:block }
.cap-text-content{ line-height:1.7; max-width:72ch }

/* certificado */
.cap-cert-modal{ width:min(1100px, 100%) }
.cap-cert-bar{ display:flex; align-items:center; gap:var(--l-e3); margin-bottom:var(--l-e3) }
.cap-cert-bar h3{ margin-right:auto }
.cap-cert-frame{ height:70vh; overflow:auto; background:var(--l-sup-3); border-radius:var(--l-raio-2) }

/* cadastro de material: formulário | prévia */
.cap-cadastro{ width:min(1100px, 100%) }
.cap-add-body{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--l-e6); align-items:start }
.cap-add-form{ display:flex; flex-direction:column; gap:var(--l-e4); min-width:0 }
.cap-add-preview{ position:sticky; top:0; display:flex; flex-direction:column; gap:var(--l-e2) }
.cap-preview-head{ display:flex; flex-direction:column; gap:2px }
.cap-preview-box{ min-height:220px; padding:var(--l-e4); border:1px dashed var(--l-borda-forte); border-radius:var(--l-raio-2); background:var(--l-sup-2); overflow:auto }
.cap-preview-vazio{ color:var(--l-texto-3); font-size:var(--l-t-peq) }
.cap-preview-texto{ white-space:pre-wrap }
.cap-dica{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.cap-setor-aviso{ padding:var(--l-e3); border-radius:var(--l-raio-2); background:var(--l-atencao-fundo); color:var(--l-texto) }
.cap-html-upload{ position:relative; display:flex; align-items:center; justify-content:center; gap:var(--l-e2); padding:var(--l-e5); border:1px dashed var(--l-borda-forte); border-radius:var(--l-raio-2); color:var(--l-texto-2); cursor:pointer }
.cap-html-upload:hover{ border-color:var(--l-marca); color:var(--l-marca-tinta) }
.cap-html-upload input{ position:absolute; opacity:0; width:1px; height:1px }
.cap-file{ display:flex; align-items:center; gap:var(--l-e3); padding:var(--l-e3); border:1px solid var(--l-borda); border-radius:var(--l-raio-2) }
.cap-file > div{ flex:1; display:flex; flex-direction:column; min-width:0 }
.cap-file small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.cap-code{ font-family:var(--l-mono); font-size:12px }

/* passos de destino (unidade, setor, pessoas) */
.tg-opt{ font-weight:400; color:var(--l-texto-3); font-size:var(--l-t-mini) }
.tg-passo{ border:1px solid var(--l-borda); border-radius:var(--l-raio-2) }
.tg-passo-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--l-e3); padding:var(--l-e3) var(--l-e4) }
.tg-passo-head > div{ display:flex; flex-direction:column; gap:2px }
.tg-passo-head strong{ font-weight:500 }
.tg-passo-head small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.tg-seta{ transition:transform var(--l-rapido); color:var(--l-texto-3) }
.tg-passo[open] .tg-seta{ transform:rotate(180deg) }
.tg-passo-body{ display:flex; flex-direction:column; gap:var(--l-e2); padding:0 var(--l-e4) var(--l-e4) }
.tg-todos{ align-self:flex-start; border:0; background:none; padding:0; font-size:var(--l-t-peq); color:var(--l-marca-tinta) }
.tg-chips{ display:flex; flex-wrap:wrap; gap:6px }
.tg-chip{ height:30px; padding:0 12px; border:1px solid var(--l-borda); border-radius:var(--l-raio-pilula); background:var(--l-sup); font-size:var(--l-t-peq); color:var(--l-texto-2) }
.tg-chip.on{ background:var(--l-marca-suave); border-color:transparent; color:var(--l-marca-tinta); font-weight:600 }
.tg-lista{ display:flex; flex-direction:column; max-height:240px; overflow:auto; border:1px solid var(--l-fio); border-radius:var(--l-raio-2) }
.tg-item{ display:flex; align-items:center; gap:var(--l-e2); padding:8px var(--l-e3); border-bottom:1px solid var(--l-fio); font-size:var(--l-t-peq); cursor:pointer }
.tg-item:last-child{ border-bottom:0 }
.tg-item.on{ background:var(--l-marca-suave) }
.tg-item-txt{ display:flex; flex-direction:column; min-width:0 }
.tg-vazio{ padding:var(--l-e3); font-size:var(--l-t-peq); color:var(--l-texto-3) }

@media (max-width:1100px){
  .cap-add-body{ grid-template-columns:1fr }
  .cap-add-preview{ position:static }
}