/* SOMA · AMBIENTE DE APRENDIZAGEM — ajustes de layout (escopo .learning-app)
   Carregado depois do page-platform.css. */

/* Banner: tira a toolbar do canto, evita corte, dá respiro */
body.platform-body .learning-app .learning-header {
  align-items: center !important; overflow: visible !important;
  min-height: 220px !important; padding: clamp(28px, 3vw, 40px) !important;
  gap: clamp(16px, 2.5vw, 32px) !important;
  margin-bottom: 24px !important;
}
body.platform-body .learning-app .learning-header .module-app-toolbar { align-self: center !important; flex-wrap: wrap !important; }
body.platform-body .learning-app .learning-header .btn-primary { padding: 11px 20px !important; white-space: nowrap !important; border-radius: 10px !important; }

/* Pill de progresso: moldura verde premium */
body.platform-body .learning-app .learning-header .module-status-pill {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 16px !important; border-radius: 999px !important;
  background: rgba(16,185,129,.10) !important;
  border: 1px solid rgba(16,185,129,.55) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.10), 0 2px 14px rgba(16,185,129,.20) !important;
  color: #D1FAE5 !important; -webkit-text-fill-color: #D1FAE5 !important;
  font: 600 13px 'Inter', sans-serif !important; white-space: nowrap !important;
}
body.platform-body .learning-app .learning-header .module-status-pill .status-dot {
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  background: #10B981 !important; box-shadow: 0 0 8px rgba(16,185,129,.85) !important;
  flex-shrink: 0 !important;
}

/* Layout: player (esq) + trilha (dir) */
body.platform-body .pl-content .learning-layout {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 20px !important; align-items: start !important; margin-bottom: 20px;
}
/* Sidebar com altura fixa (= player, via JS) e rolagem interna — o player não muda ao expandir aulas */
body.platform-body .learning-app .learning-side-card { overflow-y: auto !important; }
body.platform-body .learning-app .learning-side-card::-webkit-scrollbar { width: 8px; }
body.platform-body .learning-app .learning-side-card::-webkit-scrollbar-thumb { background: rgba(127,231,235,.28); border-radius: 8px; }
body.platform-body .learning-app .learning-side-card::-webkit-scrollbar-track { background: transparent; }
/* Cadeado discreto + estado bloqueado dos cards de ação (pós-teste/certificado) */
body.platform-body .learning-app .ui-lock { vertical-align: -2px; color: #94A3B8; opacity: .9; }
body.platform-body .learning-app .learning-action-grid button.is-locked { opacity: .62 !important; cursor: not-allowed !important; }
body.platform-body .learning-app .learning-action-grid button.is-locked:hover { transform: none !important; border-color: #E2E8F0 !important; box-shadow: 0 4px 16px rgba(11,31,51,.06) !important; }
body.platform-body .learning-app .learning-action-grid button.is-locked .la-ico { background-color: #94A3B8 !important; }
body.platform-body .learning-app .learning-action-grid button.is-locked strong { color: #64748B !important; -webkit-text-fill-color: #64748B !important; }
/* Player card: cartão escuro arredondado (player + meta dentro) */
body.platform-body .learning-app .learning-player-card {
  min-width: 0;
  background: linear-gradient(160deg, #0d2138, #081628) !important;
  border: 1px solid rgba(127,231,235,.16) !important;
  border-radius: 20px !important;
  padding: 0 !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
  box-shadow: 0 16px 40px rgba(5,11,23,.30) !important;
}

/* Player preenche, proporção 16:9 */
body.platform-body .learning-app .learning-player {
  position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important; overflow: hidden !important;
}
body.platform-body .learning-app .learning-player img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; }
body.platform-body .learning-app .learning-player iframe { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; display:block !important; background:#000 !important; }

/* Botão de play turquesa, centralizado sobre o player */
body.platform-body .learning-app .learning-play-button {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 72px !important; height: 72px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, #02B8BF, #0891b2) !important;
  border: none !important; cursor: pointer !important;
  display: grid !important; place-items: center !important; padding: 0 !important;
  box-shadow: 0 10px 30px rgba(2,184,191,.45) !important;
  transition: transform .16s, box-shadow .16s !important;
}
body.platform-body .learning-app .learning-play-button:hover {
  transform: translate(-50%, -50%) scale(1.06) !important;
  box-shadow: 0 14px 38px rgba(2,184,191,.6) !important;
}
body.platform-body .learning-app .learning-play-button span {
  color: #04121f !important; -webkit-text-fill-color: #04121f !important;
  font-size: 26px !important; line-height: 1 !important; margin-left: 4px !important;
}

/* Grade de ações: 4 cards simétricos (Material / Pré / Pós / Certificado), bem espaçados */
body.platform-body .pl-content .learning-action-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 22px !important; margin-top: 22px !important; }

/* Limita largura em telas largas (centraliza, evita esticar) */
body.platform-body .platform-main.learning-app { max-width: 1480px !important; margin-left: auto !important; margin-right: auto !important; }

/* Trilha do curso: acordeão por SUBTEMA (mostra os subtemas; expande as aulas) */
body.platform-body .learning-app .learning-module-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
/* cabeçalho do subtema */
body.platform-body .learning-app .lm-subtema { display: block !important; }
body.platform-body .learning-app .lm-st-head { width: 100% !important; display: flex !important; align-items: center !important; gap: 11px !important; padding: 12px 13px !important; border-radius: 12px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(127,231,235,.14) !important; cursor: pointer !important; text-align: left !important; }
body.platform-body .learning-app .lm-st-head:hover { background: rgba(2,184,191,.10) !important; border-color: rgba(2,184,191,.30) !important; }
body.platform-body .learning-app .lm-st-num { flex-shrink: 0 !important; width: 30px !important; height: 30px !important; display: grid !important; place-items: center !important; border-radius: 9px !important; background: rgba(2,184,191,.18) !important; color: #7FE7EB !important; -webkit-text-fill-color: #7FE7EB !important; font: 700 11px 'JetBrains Mono', monospace !important; }
body.platform-body .learning-app .lm-st-copy { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
body.platform-body .learning-app .lm-st-copy strong { font-size: 13px !important; font-weight: 600 !important; color: #F5F9FC !important; -webkit-text-fill-color: #F5F9FC !important; line-height: 1.25 !important; }
body.platform-body .learning-app .lm-st-copy small { font: 600 11px 'JetBrains Mono', monospace !important; color: #7FE7EB !important; -webkit-text-fill-color: #7FE7EB !important; }
body.platform-body .learning-app .lm-st-chev { flex-shrink: 0 !important; color: rgba(245,249,252,.6) !important; transition: transform .18s ease !important; }
body.platform-body .learning-app .lm-subtema[data-open="1"] .lm-st-chev { transform: rotate(180deg) !important; }
/* aulas dentro do subtema (escondidas quando fechado) */
body.platform-body .learning-app .lm-st-lessons { list-style: none !important; margin: 7px 0 4px !important; padding: 0 0 0 12px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
body.platform-body .learning-app .lm-subtema[data-open="0"] .lm-st-lessons { display: none !important; }
body.platform-body .learning-app .lm-lesson { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 11px !important; border-radius: 10px !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(127,231,235,.08) !important; cursor: pointer !important; }
body.platform-body .learning-app .lm-lesson:hover { background: rgba(255,255,255,.06) !important; }
body.platform-body .learning-app .lm-lesson.is-current { background: rgba(2,184,191,.12) !important; border-color: rgba(2,184,191,.35) !important; }
body.platform-body .learning-app .lm-l-ico { flex-shrink: 0 !important; width: 24px !important; height: 24px !important; display: grid !important; place-items: center !important; border-radius: 7px !important; background: rgba(2,184,191,.14) !important; color: #7FE7EB !important; -webkit-text-fill-color: #7FE7EB !important; font: 700 10px 'JetBrains Mono', monospace !important; }
body.platform-body .learning-app .lm-lesson strong { flex: 1 !important; min-width: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: #F5F9FC !important; -webkit-text-fill-color: #F5F9FC !important; line-height: 1.3 !important; }
body.platform-body .learning-app .lm-lesson small { flex-shrink: 0 !important; font-size: 11px !important; white-space: nowrap !important; color: rgba(245,249,252,.5) !important; -webkit-text-fill-color: rgba(245,249,252,.5) !important; }

/* Player meta: empilhado e espaçado */
/* Banner inferior cobre TODA a moldura: full-bleed (sem inset), colado ao vídeo, cantos de baixo
   recortados pelo raio do card (overflow:hidden). Divisor sutil entre vídeo e banner. */
body.platform-body .learning-app .learning-player-card .learning-player-meta { display: flex !important; flex-direction: column !important; gap: 5px !important; padding: 16px 20px 16px !important; margin: 0 !important; border: 0 !important; border-top: 1px solid rgba(127,231,235,.18) !important; border-radius: 0 !important; box-shadow: none !important; }
body.platform-body .learning-app .learning-player-meta span { font: 600 11px 'JetBrains Mono', monospace !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #7FE7EB !important; }
body.platform-body .learning-app .learning-player-meta strong { font-size: 15px !important; font-weight: 600 !important; color: #F5F9FC !important; -webkit-text-fill-color: #F5F9FC !important; }
body.platform-body .learning-app .learning-player-meta p { margin: 2px 0 0 !important; font-size: 13px !important; color: rgba(245,249,252,.7) !important; -webkit-text-fill-color: rgba(245,249,252,.7) !important; }
body.platform-body .learning-app .learning-player-actions { display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:center !important; margin-top:10px !important; }
body.platform-body .learning-app .learning-player-actions .btn-primary { border:0 !important; border-radius:10px !important; padding:9px 14px !important; background:#02B8BF !important; color:#04121f !important; font:700 12px 'Inter',sans-serif !important; cursor:pointer !important; }

/* Cards de ação: label/título/descrição empilhados */
body.platform-body .learning-app .learning-action-grid button { display: flex !important; flex-direction: column !important; gap: 5px !important; align-items: flex-start !important; text-align: left !important; padding: 18px 16px !important; border-radius: 14px !important; cursor: pointer !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 4px 16px rgba(11,31,51,.06) !important; transition: transform .15s, border-color .15s, box-shadow .15s !important; }
body.platform-body .learning-app .learning-action-grid button:hover { transform: translateY(-2px) !important; border-color: #02B8BF !important; box-shadow: 0 10px 24px rgba(2,184,191,.16) !important; }
body.platform-body .learning-app .learning-action-grid button span { font: 600 10px 'JetBrains Mono', monospace !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #0E9AA1 !important; -webkit-text-fill-color: #0E9AA1 !important; }
body.platform-body .learning-app .learning-action-grid button strong { font-size: 14px !important; font-weight: 700 !important; color: #0B1F33 !important; -webkit-text-fill-color: #0B1F33 !important; }
body.platform-body .learning-app .learning-action-grid button small { font-size: 11.5px !important; color: #54657A !important; -webkit-text-fill-color: #54657A !important; }

/* Trilha do curso: cartão escuro arredondado, preenche a altura ao lado do player */
body.platform-body .learning-app .learning-side-card {
  background:
    linear-gradient(160deg, rgba(7,22,40,.70), rgba(6,16,30,.80)),
    url("assets/blue-background-6.png") center / cover no-repeat !important;
  background-size: auto, cover !important;
  border: 1px solid rgba(127,231,235,.16) !important;
  border-radius: 20px !important;
  padding: 22px 18px !important;
  box-shadow: 0 16px 40px rgba(5,11,23,.30) !important;
}
body.platform-body .learning-app .learning-side-card h2 {
  margin: 0 0 16px !important; font: 700 18px 'Inter', sans-serif !important;
  color: #F5F9FC !important; -webkit-text-fill-color: #F5F9FC !important;
}

/* Canvas claro: faz os cartões brancos das ações destacarem */
body.platform-body .learning-app.pl-content { background: #eef1f5 !important; }

/* Responsivo */
@media (max-width: 1100px) {
  body.platform-body .pl-content .learning-layout { grid-template-columns: 1fr !important; }
  body.platform-body .pl-content .learning-action-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  body.platform-body .learning-app .learning-header { grid-template-columns: 1fr !important; align-items: start !important; }
  body.platform-body .learning-app .learning-header .module-app-toolbar { justify-self: start !important; justify-content: flex-start !important; }
  body.platform-body .pl-content .learning-action-grid { grid-template-columns: 1fr !important; }
}

/* Toast (simulação de ações) */
.learn-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 210; display: flex; align-items: center; gap: 9px; background: #0B1F33; border: 1px solid rgba(2,184,191,.4); border-radius: 12px; padding: 12px 18px; color: #F5F9FC; font: 600 13px 'Inter', sans-serif; box-shadow: 0 16px 40px rgba(11,31,51,.4); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.learn-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.learn-toast svg { color: #7FE7EB; flex-shrink: 0; }

/* === Ícones nos cards de ação (silhueta teal via mask, inspirado na ref. preenchida) === */
body.platform-body .learning-app .learning-action-grid button { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
body.platform-body .learning-app .learning-action-grid button .la-copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; min-width: 0 !important; text-align: left !important; text-transform: none !important; }
body.platform-body .learning-app .learning-action-grid button .la-ico { flex-shrink: 0 !important; width: 40px !important; height: 40px !important; background-color: #0E9AA1 !important; -webkit-mask: var(--la-ic) center / contain no-repeat !important; mask: var(--la-ic) center / contain no-repeat !important; transition: background-color .15s, transform .15s !important; }
body.platform-body .learning-app .learning-action-grid button:hover .la-ico { background-color: #02B8BF !important; transform: scale(1.06) !important; }