/* ============================================================================
   27-ux-treinamentos.css — Painel de Treinamentos: menos ruido, respiro parelho.
   Carregada por ULTIMO. Escopada em #view-capacitacao.

   O que pesava: cada cartao abria com um bloco de ~140px de gradiente forte e um
   icone de 2.8rem que nao informa nada (o tipo ja esta escrito na etiqueta), a
   descricao corria solta em ate 8 linhas (desalinhando a grade) e o rodape trazia
   tres botoes com o mesmo peso visual. Aqui o bloco vira uma faixa fina, a
   descricao ganha limite e so "Abrir" continua sendo acao destacada.
   Nada foi removido do HTML — da para desligar tirando a tag do index.
   ============================================================================ */

/* ---- 1. Faixa do tipo: sai de cena --------------------------------------
   Era um bloco de ~140px de gradiente forte cujo unico conteudo e o "icone" do
   tipo — e para os interativos esse icone e a string "</>", que o innerHTML
   engole: a faixa ficava literalmente vazia. O tipo ja esta escrito na etiqueta
   ("Interativo", "Video", "PDF"), entao o bloco todo sai. */
#view-capacitacao .cap-card-thumb{ display:none !important }

/* ---- 2. Corpo: descricao com limite (a grade parava de alinhar) ---------- */
#view-capacitacao .cap-card-body{ padding:14px 16px 12px !important; gap:4px !important }
#view-capacitacao .cap-card-title{ font-size:.98rem !important; line-height:1.3 }
#view-capacitacao .cap-card-desc{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.8rem; line-height:1.45; opacity:.85;
}

/* ---- 3. Rodape: uma acao em destaque, o resto discreto ------------------- */
#view-capacitacao .cap-card-footer{
  background:transparent !important; padding:10px 16px 12px !important;
  border-top:1px solid rgba(57,72,32,.08) !important;
}
#view-capacitacao .cap-card-footer .btn{
  background:transparent !important; border-color:transparent !important;
  color:var(--ink-soft, #5b6250) !important; box-shadow:none !important; font-weight:600;
}
#view-capacitacao .cap-card-footer .btn:hover{ background:rgba(57,72,32,.07) !important }
#view-capacitacao .cap-card-footer .btn.danger{ color:#a33b57 !important }
#view-capacitacao .cap-card-footer .btn.primary{
  background:linear-gradient(135deg,var(--brand,#394820),#64793f) !important;
  color:#fff !important; border-color:transparent !important; font-weight:700;
}

/* ---- 4. Grade: cartoes do mesmo tamanho, respiro parelho ----------------- */
#view-capacitacao #cap-materials-grid{
  gap:14px !important; align-items:stretch;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important;
}
#view-capacitacao .cap-card{ min-height:196px; display:flex; flex-direction:column }
#view-capacitacao .cap-card-body{ flex:1 }
@media (max-width:720px){ #view-capacitacao .cap-card{ min-height:0 } }

/* ---- 5. Filtros de categoria: respiro e quebra de linha ------------------ */
#view-capacitacao #cap-category-tabs{
  display:flex; flex-wrap:wrap; gap:8px; padding:2px;
}
#view-capacitacao .cap-cat-tab{ font-size:.8rem; padding:7px 13px }

/* ---- 6. Nota de escopo: acima dos filtros, sem competir ------------------ */
#view-capacitacao #cap-escopo-nota{ padding:0 2px }

/* ---- 7. Modal de material: as duas colunas ------------------------------
   O modal tinha 560px fixos (inline no HTML) e o admin so descobria como o
   material ficava depois de salvar. No desktop ele abre largo e a coluna da
   direita roda a previa; abaixo de 980px as colunas viram uma so. */
#modal-cap-add > .glass{ width:min(1120px, 96vw) !important }
#modal-cap-add .cap-add-body{
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:0; overflow:hidden; min-height:0;
}
#modal-cap-add .cap-add-form{ padding:20px 22px; overflow-y:auto; min-width:0 }
#modal-cap-add .cap-add-preview{
  display:flex; flex-direction:column; min-width:0; min-height:0;
  border-left:1px solid var(--line); background:rgba(57,72,32,.04);
}
#modal-cap-add .cap-preview-head{
  padding:14px 18px 10px; display:flex; flex-direction:column; gap:2px;
  border-bottom:1px solid rgba(57,72,32,.08);
}
#modal-cap-add .cap-preview-head strong{ font-size:13px; letter-spacing:-.01em }
#modal-cap-add .cap-preview-head .au-hint{ font-size:11.5px; opacity:.8 }
#modal-cap-add .cap-preview-box{
  flex:1; min-height:340px; padding:14px 16px; overflow:auto;
}
#modal-cap-add .cap-preview-box iframe{
  width:100%; height:100%; min-height:320px; border:1px solid var(--line);
  border-radius:12px; background:#fff;
}
#modal-cap-add .cap-preview-vazio{
  height:100%; min-height:300px; display:grid; place-items:center; text-align:center;
  font-size:12.5px; color:var(--ink-soft); opacity:.8; padding:0 18px; line-height:1.5;
}
#modal-cap-add .cap-preview-texto{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-size:13px; line-height:1.55; white-space:normal;
}
@media (max-width:980px){
  #modal-cap-add .cap-add-body{ grid-template-columns:1fr; overflow-y:auto }
  #modal-cap-add .cap-add-preview{ border-left:0; border-top:1px solid var(--line) }
  #modal-cap-add .cap-preview-box{ min-height:260px }
}

/* ---- 6. Editor do treinamento interativo (modal do admin) ----------------
   O HTML salvo deixou de ser um textarea `hidden` alimentado so por upload: agora
   e um editor de codigo. O campo de arquivo continua ali, como atalho para
   preencher o editor. */
#view-capacitacao .cap-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12.5px; line-height:1.55; tab-size:2;
  white-space:pre; overflow:auto; resize:vertical; min-height:240px;
}
#view-capacitacao .cap-html-upload{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-soft); margin:2px 0 4px;
}
#view-capacitacao .cap-html-upload > span{ font-weight:700 }
#view-capacitacao #cap-html-size{ font-variant-numeric:tabular-nums }
#view-capacitacao #cap-html-size.is-over{ color:var(--err); font-weight:700 }

/* ---- 7. Arquivo do treinamento e codigo recolhido (10/09/2026) ----------
   O curso interativo nao tem arquivo no disco (o HTML mora na coluna
   `content`), mas para quem cuida do conteudo ele E um arquivo: a faixa abaixo
   mostra o que esta publicado e as tres acoes — baixar, substituir, excluir.
   O editor de codigo, que abria um paredao de 240px de altura e empurrava a
   descricao e a previa para fora da tela, virou um <details> fechado. */
#view-capacitacao .cap-file{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2, rgba(255,255,255,.55));
  padding:10px 12px; margin:2px 0 8px;
}
#view-capacitacao .cap-file-ico{ color:var(--brand); flex:none }
#view-capacitacao .cap-file-txt{ min-width:0; flex:1 1 180px; display:grid; gap:2px }
#view-capacitacao .cap-file-txt strong{
  font-size:12.5px; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#view-capacitacao .cap-file-txt small{ font-size:11.5px; color:var(--ink-soft) }
#view-capacitacao .cap-file-acoes{ display:flex; gap:6px; flex-wrap:wrap }
#view-capacitacao .cap-file-acoes .btn{ padding:5px 10px; font-size:12px }

#view-capacitacao .cap-code-det{ margin:2px 0 4px }
#view-capacitacao .cap-code-det > summary{
  cursor:pointer; font-size:12px; font-weight:700; color:var(--ink-soft);
  padding:6px 2px; list-style:none;
}
#view-capacitacao .cap-code-det > summary::-webkit-details-marker{ display:none }
#view-capacitacao .cap-code-det > summary::before{
  content:'\25B8'; display:inline-block; margin-right:6px; transition:transform .15s ease;
}
#view-capacitacao .cap-code-det[open] > summary::before{ transform:rotate(90deg) }

/* Setores no cartao: o curso passou a poder servir a mais de uma area, e o
   cartao era o unico lugar da lista que nao dizia a quais. */
#view-capacitacao .cap-card-setores{
  display:flex; gap:4px; flex-wrap:wrap; margin:2px 0 6px;
}
#view-capacitacao .cap-card-setores .k-tag{ font-size:10.5px }

/* Aviso do setor herdado: e a unica coisa nesta tela que muda o ALCANCE do
   curso sem a pessoa pedir, entao nao pode ter a cara das outras dicas. */
#view-capacitacao .cap-setor-aviso{
  border:1px solid var(--warn, #d9a441); border-left-width:3px; border-radius:10px;
  background:color-mix(in srgb, var(--warn, #d9a441) 10%, transparent);
  padding:8px 10px; margin:4px 0 6px; line-height:1.45; color:var(--ink);
}

/* ── Meus cursos concluidos (24/09/2026) ─────────────────────────────── */
#view-capacitacao .cap-meus{ margin:0 0 16px; padding:0; border-radius:16px; overflow:hidden }
#view-capacitacao .cap-meus-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none }
#view-capacitacao .cap-meus-head::-webkit-details-marker{ display:none }
#view-capacitacao .cap-meus-head > svg:first-child{ color:var(--brand,#394820); flex:none }
#view-capacitacao .cap-meus-head > div{ flex:1; min-width:0 }
#view-capacitacao .cap-meus-head strong{ display:block; font-size:14.5px }
#view-capacitacao .cap-meus-head small{ display:block; font-size:12px; color:var(--ink-soft,#5b6250) }
#view-capacitacao .cap-meus[open] .tg-seta{ transform:rotate(180deg) }
#view-capacitacao .cap-meus-body{ padding:0 18px 18px }
#view-capacitacao .cap-meus-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px }
#view-capacitacao .cap-meu{ display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); border-left:4px solid #b9b3a4 }
#view-capacitacao .cap-meu.ok{ border-left-color:#e6b800 }
#view-capacitacao .cap-meu-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px }
#view-capacitacao .cap-meu-selo{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:rgba(180,60,60,.12); color:#a33 }
#view-capacitacao .cap-meu.ok .cap-meu-selo{ background:rgba(57,120,60,.14); color:#2f7a3a }
#view-capacitacao .cap-meu-nota{ font-size:18px; font-weight:800 }
#view-capacitacao .cap-meu-titulo{ font-weight:700; font-size:14px; line-height:1.35 }
#view-capacitacao .cap-meu-sub{ font-size:12px; color:var(--ink-soft,#5b6250); flex:1 }
#view-capacitacao .cap-meu .btn{ align-self:flex-start; margin-top:4px }
body.theme-dark #view-capacitacao .cap-meu-selo{ color:#f0a0a0 }
body.theme-dark #view-capacitacao .cap-meu.ok .cap-meu-selo{ color:#8fd49a }

/* Visor do certificado original do curso ("Emitir certificado", 24/09/2026) */
#modal-cap-cert .cap-cert-modal{ width:1180px; max-width:100%; height:92vh; display:flex; flex-direction:column; overflow:hidden }
#modal-cap-cert .cap-cert-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line) }
#modal-cap-cert .cap-cert-bar strong{ flex:1; min-width:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#modal-cap-cert .cap-cert-frame{ flex:1; min-height:0; background:#eef1e6 }
#modal-cap-cert .cap-cert-frame iframe{ width:100%; height:100%; border:0; display:block }