/* Pele "estilo Spotify" do player de aula nas páginas publicadas do menu
   Segmentos (30/08/2026).

   Só cor, forma e ritmo: o markup é o de leadlovers-segmentos-conteudo.mjs
   (secaoAula) e a consola continua nascendo do aula-player.js, com os mesmos
   hooks data-llap-*. Esta folha entra DEPOIS de aula-player.css e ANTES do
   <style id="seg-conteudo-css"> inline da página, por isso os seletores
   partem de `.seg-main .lla-aula`: é a especificidade mínima que vence o
   estilo inline do gerador sem tocar em nenhum dos dois arquivos.

   A escolha de fundo é deliberada: o cartão da aula é escuro nos DOIS temas,
   como uma capa de disco dentro da página. A identidade entra pela cor de
   família (--seg-cor, que o <main> declara) no gradiente e na capa; a cor de
   ação continua sendo a da marca, #DD235B no claro e #F2799C no escuro.
   Contraste medido sobre o cartão: texto ≥ 4,5:1, formas ≥ 3:1. */

/* ---------------------------------------------------------------------------
   Tokens locais do cartão
   --------------------------------------------------------------------------- */
.seg-main .lla-aula {
  --sgp-fundo: #0f1522;
  --sgp-fundo-2: #131b2b;
  --sgp-marca: #DD235B;          /* 6,2:1 com branco · 3,2:1 sobre o trilho */
  --sgp-marca-ink: #ffffff;
  --sgp-marca-hover: #EE4675;
  --sgp-texto: #F2F5FA;          /* 14,8:1 sobre o cartão */
  --sgp-texto-2: #B9C2D3;        /* 10,1:1 sobre o cartão */
  --sgp-linha: rgba(255, 255, 255, 0.18);
  --sgp-linha-forte: rgba(255, 255, 255, 0.38);
  --sgp-superficie: #192231;     /* painel de transcrição, um tom acima */
  --sgp-trilho: rgba(0, 0, 0, 0.55);
  --sgp-hover: rgba(255, 255, 255, 0.10);
}
:root[data-theme="dark"] .seg-main .lla-aula {
  --sgp-marca: #F2799C;          /* 6,9:1 sobre o cartão */
  --sgp-marca-ink: #10131c;      /* ícone escuro dentro do botão de tocar */
  --sgp-marca-hover: #F79AB4;
}

/* ---------------------------------------------------------------------------
   O cartão
   --------------------------------------------------------------------------- */
.seg-main .lla-aula {
  border: 1px solid var(--sgp-linha);
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.6rem;
  margin: 2rem 0 2.5rem;
  color: var(--sgp-texto);
  background:
    radial-gradient(120% 130% at 8% -10%, color-mix(in srgb, var(--seg-cor, #C05621) 55%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, var(--sgp-fundo-2) 0%, var(--sgp-fundo) 55%);
  box-shadow: 0 18px 44px -28px rgba(5, 8, 15, 0.85), 0 2px 10px -6px rgba(5, 8, 15, 0.6);
  position: relative;
  overflow: hidden;
}
/* Faixa fina da família no topo do cartão: assina sem pesar. */
.seg-main .lla-aula::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--seg-cor, #C05621), var(--sgp-marca));
}

.seg-main .lla-aula h2 {
  color: var(--sgp-texto);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.4rem;
}
.seg-main .lla-aula h2 .geo-icon,
.seg-main .lla-aula h2 .geo-icon-brand { color: var(--sgp-marca); width: 1.35rem; height: 1.35rem; flex: none; }
.seg-main .lla-aula > p {
  color: var(--sgp-texto-2);
  max-width: 78ch;
  margin: 0 0 1.15rem;
  font-size: 0.94rem;
  line-height: 1.62;
}

/* ---------------------------------------------------------------------------
   Peça (vídeo e podcast)
   --------------------------------------------------------------------------- */
/* O markup traz as ações antes da consola (o JS insere a consola imediatamente
   antes do figcaption). Aqui a ordem visual volta a ser a de um player: capa,
   consola, ações, legenda — só com `order`, sem tocar no HTML. */
.seg-main .lla-aula .llap {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.35rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--sgp-linha);
  border-radius: 14px;
  overflow: hidden;
}
.seg-main .lla-aula .llap > video,
.seg-main .lla-aula .llap > .llap-cartao { order: 1; }
.seg-main .lla-aula .llap > .llap-consola { order: 2; }
.seg-main .lla-aula .llap > .llap-acoes { order: 3; }
.seg-main .lla-aula .llap > figcaption { order: 4; }
.seg-main .lla-aula .llap:last-of-type { margin-bottom: 0; }
/* A capa do vídeo é o próprio poster: proporção fixa para o cartão não pular
   entre o poster e o primeiro quadro do arquivo. */
.seg-main .lla-aula .llap video { border-radius: 0; background: #05080f; aspect-ratio: 16 / 9; object-fit: contain; }
.seg-main .lla-aula .llap:not(:has(.llap-consola)) video { border-radius: 0; }

/* Cabeçalho do podcast: capa quadrada com o gradiente da família. */
.seg-main .lla-aula .llap-cartao {
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 1rem 1rem 0.85rem;
}
.seg-main .lla-aula .llap-capa {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  color: #ffffff;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--seg-cor, #C05621) 92%, #ffffff) 0%, color-mix(in srgb, var(--seg-cor, #C05621) 62%, #0b1018) 100%);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.9);
}
.seg-main .lla-aula .llap-capa svg { width: 32px; height: 32px; }
.seg-main .lla-aula .llap-cartao-titulo {
  color: var(--sgp-texto);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.seg-main .lla-aula .llap-cartao-sub { color: var(--sgp-texto-2); font-size: 0.8rem; }

/* ---------------------------------------------------------------------------
   Consola
   --------------------------------------------------------------------------- */
.seg-main .lla-aula .llap-consola {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.85rem 1rem 1rem;
}
.seg-main .lla-aula.lla-aula .llap--audio .llap-consola { border-top: 0; border-radius: 0; padding-top: 0.35rem; }

/* Linha do tempo alta, trilho escuro para a cor da marca render 3:1. */
.seg-main .lla-aula .llap-linha { gap: 0.7rem; }
.seg-main .lla-aula .llap-tempo { color: var(--sgp-texto-2); font-size: 0.76rem; font-weight: 600; }
.seg-main .lla-aula .llap-progresso {
  height: 7px;
  background:
    linear-gradient(var(--sgp-marca) 0 0) 0 / calc(var(--llap-prog, 0) * 100%) 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.24) 0 0) 0 / calc(var(--llap-buf, 0) * 100%) 100% no-repeat,
    var(--sgp-trilho);
}
.seg-main .lla-aula .llap-progresso::-webkit-slider-thumb {
  width: 16px; height: 16px; background: #ffffff; border: 3px solid var(--sgp-marca);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.seg-main .lla-aula .llap-progresso::-moz-range-thumb {
  width: 16px; height: 16px; background: #ffffff; border: 3px solid var(--sgp-marca);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.seg-main .lla-aula .llap-progresso:focus-visible { outline: 2px solid var(--sgp-marca); outline-offset: 3px; }

/* Botões: o de tocar é o protagonista; os demais são cinza claro sobre o escuro. */
.seg-main .lla-aula .llap-controles { gap: 0.3rem; margin-top: 0.6rem; }
.seg-main .lla-aula .llap-bot {
  color: var(--sgp-texto);
  width: 42px; height: 42px;
  background: transparent;
}
.seg-main .lla-aula .llap-bot svg { width: 21px; height: 21px; }
.seg-main .lla-aula .llap-bot:hover { background: var(--sgp-hover); }
.seg-main .lla-aula .llap-bot:focus-visible { outline: 2px solid var(--sgp-marca); outline-offset: 2px; }
.seg-main .lla-aula .llap-bot--tocar {
  width: 52px; height: 52px;
  background: var(--sgp-marca);
  color: var(--sgp-marca-ink);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.9);
}
.seg-main .lla-aula .llap-bot--tocar:hover { background: var(--sgp-marca-hover); color: var(--sgp-marca-ink); }
.seg-main .lla-aula .llap-bot--tocar svg { width: 26px; height: 26px; }
.seg-main .lla-aula .llap-bot[aria-pressed="true"] {
  color: var(--sgp-marca);
  background: rgba(255, 255, 255, 0.12);
}
.seg-main .lla-aula .llap-velocidade {
  color: var(--sgp-texto);
  border: 1px solid var(--sgp-linha-forte);
  height: 34px; min-width: 48px;
  font-size: 0.82rem;
}
.seg-main .lla-aula .llap-volume {
  background: linear-gradient(#ffffff 0 0) 0 / calc(var(--llap-vol, 1) * 100%) 100% no-repeat, var(--sgp-trilho);
  height: 6px;
}
.seg-main .lla-aula .llap-volume::-webkit-slider-thumb { width: 13px; height: 13px; background: #ffffff; }
.seg-main .lla-aula .llap-volume::-moz-range-thumb { width: 13px; height: 13px; background: #ffffff; border: 0; }
.seg-main .lla-aula .llap-volume:focus-visible { outline: 2px solid var(--sgp-marca); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Ações: baixar, compartilhar, transcrição — pílulas com alvo de 44px
   --------------------------------------------------------------------------- */
.seg-main .lla-aula .llap-acoes {
  gap: 0.55rem;
  margin: 0;
  padding: 0 1rem 1rem;
}
.seg-main .lla-aula .llap-acoes .llap-acao,
:root[data-theme="dark"] .seg-main .lla-aula .llap-acoes .llap-acao {
  color: var(--sgp-texto);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--sgp-linha-forte);
  min-height: 44px;
  padding: 0 1.05rem;
  font-size: 0.88rem;
  font-weight: 700;
}
.seg-main .lla-aula .llap-acoes .llap-acao .geo-icon { color: var(--sgp-marca); }
.seg-main .lla-aula .llap-acoes .llap-acao:hover,
:root[data-theme="dark"] .seg-main .lla-aula .llap-acoes .llap-acao:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  color: var(--sgp-texto);
}
.seg-main .lla-aula .llap-acoes .llap-acao:focus-visible { outline: 2px solid var(--sgp-marca); outline-offset: 2px; }
.seg-main .lla-aula .llap-acoes .llap-acao[aria-expanded="true"],
:root[data-theme="dark"] .seg-main .lla-aula .llap-acoes .llap-acao[aria-expanded="true"] {
  background: var(--sgp-marca);
  border-color: var(--sgp-marca);
  color: var(--sgp-marca-ink);
}
.seg-main .lla-aula .llap-acoes .llap-acao[aria-expanded="true"] .geo-icon { color: var(--sgp-marca-ink); }

.seg-main .lla-aula .llap figcaption {
  color: var(--sgp-texto-2);
  font-size: 0.84rem;
  margin: 0;
  padding: 0 1rem 1rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Transcrição
   --------------------------------------------------------------------------- */
.seg-main .lla-aula .llap-transcricao {
  background: var(--sgp-superficie);
  border: 1px solid var(--sgp-linha);
  border-radius: 14px;
  margin: 0 0 1.35rem;
  color: var(--sgp-texto);
}
.seg-main .lla-aula .llap-transcricao-topo { border-bottom: 1px solid var(--sgp-linha); padding: 0.8rem 1rem; }
.seg-main .lla-aula .llap-transcricao-topo strong { color: var(--sgp-texto); font-size: 0.98rem; }
.seg-main .lla-aula .llap-transcricao-topo .llap-acao,
:root[data-theme="dark"] .seg-main .lla-aula .llap-transcricao-topo .llap-acao {
  background: var(--sgp-marca);
  border: 1px solid var(--sgp-marca);
  color: var(--sgp-marca-ink);
  min-height: 44px;
  padding: 0 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}
.seg-main .lla-aula .llap-transcricao-topo .llap-acao .geo-icon { color: var(--sgp-marca-ink); }
.seg-main .lla-aula .llap-transcricao-topo .llap-acao:hover { background: var(--sgp-marca-hover); border-color: var(--sgp-marca-hover); }
.seg-main .lla-aula .llap-transcricao-texto { max-height: 360px; padding: 1rem 1.1rem 0.4rem; }
.seg-main .lla-aula .llap-transcricao-texto p {
  color: var(--sgp-texto);
  max-width: 78ch;
  font-size: 0.92rem;
  line-height: 1.7;
}
.seg-main .lla-aula .llap-transcricao-nota { color: var(--sgp-texto-2); font-size: 0.79rem; padding: 0 1.1rem 1rem; }

/* Rolagem interna visível também no escuro. */
.seg-main .lla-aula .llap-transcricao-texto { scrollbar-color: var(--sgp-linha-forte) transparent; scrollbar-width: thin; }
.seg-main .lla-aula .llap-transcricao-texto::-webkit-scrollbar { width: 10px; }
.seg-main .lla-aula .llap-transcricao-texto::-webkit-scrollbar-thumb { background: var(--sgp-linha-forte); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------------------------------------------------------------------------
   Duas colunas quando cabe: vídeo à esquerda, podcast à direita
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .seg-main .lla-aula {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }
  .seg-main .lla-aula > h2,
  .seg-main .lla-aula > p { grid-column: 1 / -1; }
  .seg-main .lla-aula > .llap:not(.llap--audio) { grid-column: 1; grid-row: 3; }
  .seg-main .lla-aula > #transcricao-video { grid-column: 1; grid-row: 4; }
  .seg-main .lla-aula > .llap--audio { grid-column: 2; grid-row: 3; }
  .seg-main .lla-aula > #transcricao-podcast { grid-column: 2; grid-row: 4; }
  .seg-main .lla-aula > .llap { margin-bottom: 0; }
  .seg-main .lla-aula > .llap-transcricao { margin: 1.1rem 0 0; }
}

/* ---------------------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .seg-main .lla-aula { padding: 1.15rem 1rem 1.25rem; border-radius: 16px; }
  .seg-main .lla-aula h2 { font-size: 1.2rem; }
  .seg-main .lla-aula .llap-capa { width: 56px; height: 56px; }
  .seg-main .lla-aula .llap-capa svg { width: 26px; height: 26px; }
  .seg-main .lla-aula .llap-consola { padding: 0.75rem 0.8rem 0.85rem; }
  .seg-main .lla-aula .llap-cartao { padding: 0.85rem 0.8rem 0.7rem; }
  .seg-main .lla-aula .llap-acoes { padding: 0 0.8rem 0.9rem; gap: 0.45rem; }
  .seg-main .lla-aula .llap-acoes .llap-acao { flex: 1 1 auto; justify-content: center; padding: 0 0.75rem; }
  .seg-main .lla-aula .llap figcaption { padding: 0 0.8rem 0.9rem; }
  .seg-main .lla-aula .llap-transcricao-topo { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Movimento
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .seg-main .lla-aula .llap-bot,
  .seg-main .lla-aula .llap-acoes .llap-acao,
  .seg-main .lla-aula .llap-transcricao-topo .llap-acao {
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }
}
html[data-llx-motion="reduce"] .seg-main .lla-aula .llap-bot,
html[data-llx-motion="reduce"] .seg-main .lla-aula .llap-acao {
  transition: none;
}