/* ============================================================
   Manual do Painel de Controle — Menu Digital
   Identidade: vinho #4A1035 · gradiente laranja #F7941E→#EF4136
   ============================================================ */
:root {
  --vinho: #4A1035;
  --vinho-escuro: #380c28;
  --laranja: #F7941E;
  --vermelho: #EF4136;
  --grad: linear-gradient(135deg, #F7941E 0%, #EF4136 100%);
  --fundo: #EFEDEE;
  --card: #ffffff;
  --texto: #2b2b2b;
  --texto-suave: #6b6b6b;
  --borda: #e3dfe1;
  --sidebar-w: 300px;
  --radius: 16px;
  --sombra: 0 6px 24px rgba(74, 16, 53, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--vermelho); }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--vinho); color: #fff;
  display: flex; flex-direction: column;
  z-index: 50; overflow-y: auto;
  transition: transform .25s ease;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

.brand { padding: 26px 22px 18px; }
.brand .dots {
  display: grid; grid-template-columns: repeat(3, 9px); gap: 3px; margin-bottom: 12px;
}
.brand .dots i {
  width: 9px; height: 9px; border-radius: 50% 50% 50% 4px;
  background: var(--grad); display: block;
}
.brand h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: .3px; line-height: 1.3; }
.brand small { color: #d9b8cc; font-weight: 400; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.busca { padding: 0 18px 14px; }
.busca input {
  width: 100%; padding: 10px 14px; border: none; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: .85rem;
  outline: none;
}
.busca input::placeholder { color: #cfa8bf; }
.busca input:focus { background: rgba(255,255,255,.2); }

.nav-topicos { list-style: none; padding: 0 12px 24px; flex: 1; }
.nav-topicos a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 2px 0; border-radius: 10px;
  color: #f2e4ec; text-decoration: none; font-size: .88rem; font-weight: 500;
}
.nav-topicos a:hover { background: rgba(255,255,255,.09); }
.nav-topicos a.ativo { background: var(--grad); color: #fff; font-weight: 600; }
.nav-topicos .ico { font-size: 1.05rem; width: 24px; text-align: center; flex: none; }

.sidebar-rodape { padding: 16px 22px 22px; font-size: .72rem; color: #c9a5ba; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-rodape a { color: var(--laranja); text-decoration: none; }

/* botão hamburguer (mobile) */
.menu-btn {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 44px; height: 44px; border: none; border-radius: 12px;
  background: var(--vinho); color: #fff; font-size: 1.2rem; cursor: pointer;
  box-shadow: var(--sombra);
}

/* ---------- Conteúdo ---------- */
.conteudo { margin-left: var(--sidebar-w); min-height: 100vh; }

.hero {
  position: relative; overflow: hidden;
  background: var(--vinho); color: #fff;
  padding: 56px 48px 48px;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
  background: var(--grad); opacity: .9;
}
.hero::before { width: 340px; height: 340px; right: -120px; top: -140px; }
.hero::after { width: 160px; height: 160px; right: 140px; bottom: -90px; opacity: .35; }
.hero h2 { font-size: 2rem; font-weight: 700; position: relative; z-index: 1; max-width: 640px; }
.hero p { position: relative; z-index: 1; color: #ecd5e2; max-width: 560px; margin-top: 8px; font-size: .95rem; }

.secao-topico { padding: 40px 48px 24px; max-width: none; }
.topico-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 6px; }
.topico-cabecalho .ico { font-size: 1.7rem; }
.topico-cabecalho h3 { font-size: 1.5rem; color: var(--vinho); font-weight: 700; }
.topico-resumo { color: var(--texto-suave); max-width: 720px; font-size: .93rem; }
.ast { color: var(--vermelho); font-weight: 700; margin-left: 2px; }
.nav-topicos .ast { color: var(--laranja); }
.nota-extra { font-size: .74rem; color: var(--texto-suave); margin-top: 6px; max-width: 720px; }
.nota-extra sup { color: var(--vermelho); font-weight: 700; }
.nota-extra a { color: var(--vermelho); }
.passo-texto small { font-size: .78em; color: var(--texto-suave); }

.topico-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; align-items: center; }
.badge-atualizado {
  font-size: .72rem; color: var(--vinho); background: #f7e9f1;
  padding: 4px 12px; border-radius: 999px; font-weight: 600;
}
.btn-assistir, .btn-abrir {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: 8px 18px; border-radius: 999px;
}
.btn-assistir { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(239,65,54,.35); }
.btn-assistir:hover { filter: brightness(1.06); }
.btn-abrir { background: #fff; color: var(--vinho); border: 1.5px solid var(--borda); }
.btn-abrir:hover { border-color: var(--vinho); }

/* ---------- Passos ---------- */
.passo {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra);
  padding: 26px; margin: 22px 0; display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 30px;
  scroll-margin-top: 20px;
}
.passo.sem-imagem { grid-template-columns: 1fr; }
.passo-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #111; color: #fff; font-weight: 700; font-size: .85rem; flex: none;
}
.passo-titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.passo-titulo h4 { font-size: 1.05rem; color: var(--vinho); font-weight: 600; }
.passo-texto { font-size: .89rem; }
.passo-texto ul, .passo-texto ol { padding-left: 20px; margin: 8px 0; }
.passo-texto li { margin: 5px 0; }
.passo-texto code { background: #f4eef2; padding: 1px 6px; border-radius: 6px; font-size: .82em; color: var(--vinho); }
.passo-texto strong { color: var(--vinho-escuro); }

.passo-figura { position: relative; }
.figura-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--borda); background: #faf8f9;
}
.figura-wrap img { width: 100%; cursor: zoom-in; }
.img-pendente {
  aspect-ratio: 16/10; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: #b39aa8; font-size: .8rem;
  background: repeating-linear-gradient(45deg, #f7f3f5, #f7f3f5 12px, #f2ecef 12px, #f2ecef 24px);
}
.img-pendente span { font-size: 1.6rem; }

/* callouts sobre a imagem */
.callout-marca {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: #111; color: #fff; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  z-index: 3; pointer-events: none;
}
.callout-legenda { list-style: none; margin-top: 12px; font-size: .8rem; }
.callout-legenda li { display: flex; gap: 8px; margin: 6px 0; align-items: baseline; }
.callout-legenda .n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #111; color: #fff; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(3px);
}

.audio-passo { margin-top: 12px; width: 100%; height: 34px; }

/* ---------- Modo apresentação ---------- */
.apresentacao {
  position: fixed; inset: 0; z-index: 100; background: var(--vinho-escuro);
  display: none; flex-direction: column; color: #fff;
}
.apresentacao.aberta { display: flex; }
.apres-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.apres-topo .titulo { font-weight: 600; font-size: .95rem; }
.apres-fechar {
  background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 1.1rem;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}
.apres-palco {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 24px; min-height: 0;
}
.apres-figura { position: relative; max-height: 100%; max-width: min(1000px, 100%); }
.apres-figura img { max-height: calc(100vh - 220px); width: auto; max-width: 100%; border-radius: 12px; margin: 0 auto; }
.apres-figura .img-pendente { width: min(720px, 80vw); border-radius: 12px; }
.apres-legenda { text-align: center; padding: 14px 24px 6px; font-size: .95rem; color: #f0dce8; max-width: 860px; margin: 0 auto; }
.apres-controles { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 24px 22px; }
.apres-controles button {
  background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; font-size: 1rem;
}
.apres-controles button.principal { background: var(--grad); width: 58px; height: 58px; font-size: 1.25rem; }
.apres-dots { display: flex; gap: 6px; justify-content: center; padding-bottom: 18px; }
.apres-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); }
.apres-dots i.ativo { background: var(--laranja); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(26, 8, 20, .93);
  display: none; align-items: center; justify-content: center;
  padding: 30px;
}
.lightbox.aberta { display: flex; }
.lb-conteudo { position: relative; max-width: 96vw; max-height: 92vh; }
.lb-conteudo .figura-wrap { border: none; background: transparent; }
.lb-conteudo img {
  max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  cursor: default;
}
.lb-fechar {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--grad); color: #fff; font-size: 1.15rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.lb-fechar:hover { filter: brightness(1.1); }

/* ---------- Busca: destaque/ocultação ---------- */
.oculto-busca { display: none !important; }
.aviso-busca { padding: 20px 48px; color: var(--texto-suave); font-size: .9rem; display: none; }

/* ---------- Rodapé ---------- */
.rodape {
  margin-top: 40px; padding: 34px 48px; background: var(--vinho); color: #e7cfdd;
  font-size: .85rem; text-align: center;
}
.rodape strong { color: var(--laranja); }

/* ---------- Narração (modal) e progresso ---------- */
.btn-narracao {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 36px);
  margin: 0 18px 10px; padding: 9px 14px; border: none; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #f2e4ec; font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer;
}
.btn-narracao:hover { background: rgba(255,255,255,.2); }

.progresso-wrap { margin: 0 18px 14px; }
.progresso-info { display: flex; justify-content: space-between; font-size: .68rem; color: #cfa8bf; margin-bottom: 4px; }
.progresso-barra { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.progresso-barra i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 999px; transition: width .4s ease; }

.nav-topicos a .feito { margin-left: auto; font-size: .75rem; color: #7ee2a8; display: none; }
.nav-topicos a.concluido .feito { display: inline; }

.btn-concluir {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--borda); background: #fff; color: var(--texto-suave);
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.btn-concluir.concluido { border-color: #2fac66; color: #2fac66; background: #ecfaf2; }

.modal-narracao {
  position: fixed; inset: 0; z-index: 160; background: rgba(26,8,20,.7);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-narracao.aberta { display: flex; }
.mn-caixa {
  background: #fff; border-radius: var(--radius); box-shadow: var(--sombra);
  width: min(420px, 94vw); padding: 26px; position: relative;
}
.mn-caixa h4 { color: var(--vinho); font-size: 1.05rem; margin-bottom: 4px; }
.mn-caixa .mn-sub { font-size: .8rem; color: var(--texto-suave); margin-bottom: 16px; }
.mn-fechar {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: none; border-radius: 50%; background: #f4eef2; color: var(--vinho);
  font-size: .95rem; cursor: pointer;
}
.mn-opcao {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px solid var(--borda); border-radius: 12px; margin: 8px 0;
  cursor: pointer; font-size: .88rem;
}
.mn-opcao input { accent-color: var(--vermelho); width: 17px; height: 17px; }
.mn-opcao.ativa { border-color: var(--vermelho); background: #fff6f4; }
.mn-opcao small { display: block; color: var(--texto-suave); font-size: .74rem; }
.mn-testar {
  margin-top: 14px; width: 100%; border: none; border-radius: 999px;
  background: var(--grad); color: #fff; font: inherit; font-weight: 600;
  font-size: .85rem; padding: 10px; cursor: pointer;
}
.mn-testar:hover { filter: brightness(1.06); }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .passo { grid-template-columns: 1fr; }
  .passo-figura { order: -1; }
}
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); width: 280px; }
  .sidebar.aberta { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.4); }
  .menu-btn { display: block; }
  .conteudo { margin-left: 0; }
  .hero { padding: 76px 24px 40px; }
  .secao-topico { padding: 28px 20px 12px; }
  .rodape { padding: 28px 20px; }
}