/* === Manual do sistema (/manual) ======================================
   Prints anotados (marcadores numerados + passo a passo com foco), índice por assunto e busca.
   A identidade é o número azul sobre a tela; o resto segue o sistema, quieto. */
.vs-manual { --vs-manual-marca: var(--vs-accent); }
.vs-manual__busca { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-xl); background: var(--vs-bg-surface); box-shadow: var(--vs-shadow-xs); color: var(--vs-text-3); }
.vs-manual__busca:focus-within { border-color: var(--vs-accent); box-shadow: var(--vs-focus-ring); }
.vs-manual__busca input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: var(--vs-text-xl); color: var(--vs-text); }
.vs-manual__busca input::placeholder { color: var(--vs-text-placeholder); }
.vs-manual__busca input::-webkit-search-cancel-button { display: none; }
.vs-manual__atalho { flex: 0 0 auto; }

.vs-manual__corpo { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; align-items: start; }
.vs-manual__indice { position: sticky; top: calc(var(--vs-topbar-h) + 16px); max-height: calc(100vh - var(--vs-topbar-h) - 32px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.vs-manual__indice-gaveta > summary { display: none; }
.vs-manual__indice a { display: block; padding: 5px 10px; border-radius: var(--vs-radius-sm); color: var(--vs-text-2); font-size: var(--vs-text-md); text-decoration: none; line-height: 1.35; }
.vs-manual__indice a:hover { background: var(--vs-bg-hover); color: var(--vs-text); }
.vs-manual__indice a.is-ativo { background: var(--vs-ink-soft); color: var(--vs-text); font-weight: var(--vs-weight-semibold); }
.vs-manual__indice a.vs-manual__indice-inicio { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: var(--vs-weight-medium); }
.vs-manual__indice-grupo { margin-top: 14px; }
.vs-manual__indice-area { display: block; padding: 0 10px 4px; font-size: var(--vs-text-xs); font-weight: var(--vs-weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--vs-text-3); }
.vs-manual__conteudo { min-width: 0; }

/* Início */
.vs-manual-inicio { display: flex; flex-direction: column; gap: 14px; }
.vs-manual-inicio__comece { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--vs-info-border); border-radius: var(--vs-radius-xl); background: var(--vs-info-bg); color: var(--vs-text); text-decoration: none; transition: border-color var(--vs-dur-fast) var(--vs-ease); }
.vs-manual-inicio__comece:hover { border-color: var(--vs-accent); }
.vs-manual-inicio__comece > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.vs-manual-inicio__comece > span:nth-child(2) > span { color: var(--vs-text-2); font-size: var(--vs-text-md); }
.vs-manual-inicio__comece-icone { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); color: var(--vs-accent); }
.vs-manual-inicio__tarefas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.vs-manual-inicio__tarefas a { display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); color: var(--vs-text); text-decoration: none; font-weight: var(--vs-weight-medium); transition: border-color var(--vs-dur-fast) var(--vs-ease); }
.vs-manual-inicio__tarefas a:hover { border-color: var(--vs-ink); }
.vs-manual-inicio__tarefas .vs-muted { font-size: var(--vs-text-sm); font-weight: var(--vs-weight-regular); }
.vs-manual-inicio__areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vs-manual-area { padding: 16px 18px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-xl); background: var(--vs-bg-surface); }
.vs-manual-area__topo { display: flex; gap: 12px; margin-bottom: 8px; }
.vs-manual-area__topo h4 { margin: 0; font-size: var(--vs-text-xl); font-weight: var(--vs-weight-semibold); }
.vs-manual-area__topo p { margin: 2px 0 0; color: var(--vs-text-2); font-size: var(--vs-text-md); }
.vs-manual-area__icone { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--vs-radius-md); background: var(--vs-bg-muted); color: var(--vs-text-2); }
.vs-manual-area ul { list-style: none; margin: 0; padding: 0 0 0 48px; display: flex; flex-direction: column; gap: 2px; }
.vs-manual-area a { color: var(--vs-text-2); font-size: var(--vs-text-md); text-decoration: none; }
.vs-manual-area a:hover { color: var(--vs-accent); text-decoration: underline; }

/* Resultados da busca */
.vs-manual-resultados { display: flex; flex-direction: column; gap: 10px; }
.vs-manual-resultados__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vs-manual-resultados__lista a { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); color: var(--vs-text); text-decoration: none; transition: border-color var(--vs-dur-fast) var(--vs-ease); }
.vs-manual-resultados__lista a:hover, .vs-manual-resultados__lista a:focus-visible { border-color: var(--vs-ink); outline: none; }
.vs-manual-resultados__area { display: inline-flex; align-items: center; gap: 5px; font-size: var(--vs-text-xs); font-weight: var(--vs-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--vs-text-3); }
.vs-manual-resultados__titulo { font-size: var(--vs-text-xl); font-weight: var(--vs-weight-semibold); }
.vs-manual-resultados__trecho { color: var(--vs-text-2); font-size: var(--vs-text-md); }
.vs-manual mark { background: var(--vs-warn-bg); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Artigo */
.vs-manual-artigo { display: flex; flex-direction: column; gap: 22px; max-width: 1080px; }
.vs-manual-artigo__topo { display: flex; flex-direction: column; gap: 6px; }
.vs-manual-artigo__area { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: var(--vs-text-sm); font-weight: var(--vs-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--vs-text-3); text-decoration: none; }
.vs-manual-artigo__area:hover { color: var(--vs-accent); }
.vs-manual-artigo__titulo { margin: 0; font-size: var(--vs-text-3xl); font-weight: var(--vs-weight-semibold); letter-spacing: var(--vs-tracking-tight); }
.vs-manual-artigo__resumo { margin: 0; max-width: 72ch; font-size: var(--vs-text-xl); line-height: 1.55; color: var(--vs-text-2); }
.vs-manual-artigo__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.vs-manual-artigo__quem { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--vs-text-3); font-size: var(--vs-text-sm); }

.vs-manual-secao { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--vs-topbar-h) + 16px); }
.vs-manual-secao__titulo { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: var(--vs-text-2xl); font-weight: var(--vs-weight-semibold); letter-spacing: var(--vs-tracking-tight); }
.vs-manual-secao__titulo .vs-icon { color: var(--vs-text-3); }
.vs-manual-tarefa { padding: 16px 18px 14px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-xl); background: var(--vs-bg-surface); scroll-margin-top: calc(var(--vs-topbar-h) + 16px); }
.vs-manual-tarefa__titulo { margin: 0 0 10px; font-size: var(--vs-text-xl); font-weight: var(--vs-weight-semibold); }
.vs-manual-tarefa__passos { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.vs-manual-tarefa__passos li { counter-increment: passo; position: relative; padding-left: 36px; line-height: 1.55; color: var(--vs-text); }
.vs-manual-tarefa__passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--vs-radius-full); background: var(--vs-ink-soft); color: var(--vs-text); font-size: var(--vs-text-sm); font-weight: var(--vs-weight-semibold); font-variant-numeric: tabular-nums; }
.vs-manual-bom-saber ul { margin: 0; padding: 14px 18px 14px 34px; border: 1px solid var(--vs-warn-border); border-radius: var(--vs-radius-xl); background: var(--vs-warn-bg); display: flex; flex-direction: column; gap: 8px; line-height: 1.55; }
.vs-manual-pergunta { border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); scroll-margin-top: calc(var(--vs-topbar-h) + 16px); }
.vs-manual-pergunta summary { cursor: pointer; padding: 12px 16px; font-weight: var(--vs-weight-medium); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vs-manual-pergunta summary::-webkit-details-marker { display: none; }
.vs-manual-pergunta summary::after { content: "+"; color: var(--vs-text-3); font-size: 18px; line-height: 1; }
.vs-manual-pergunta[open] summary::after { content: "–"; }
.vs-manual-pergunta p { margin: 0; padding: 0 16px 14px; color: var(--vs-text-2); line-height: 1.55; }
.vs-manual-relacionados { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.vs-manual-relacionados a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); color: var(--vs-text); text-decoration: none; }
.vs-manual-relacionados a span { color: var(--vs-text-3); font-size: var(--vs-text-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vs-manual-relacionados a:hover { border-color: var(--vs-ink); }
.vs-manual-artigo__vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; border-top: 1px solid var(--vs-border-subtle); }
.vs-manual-artigo__vizinhos a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--vs-radius-lg); color: var(--vs-text); text-decoration: none; }
.vs-manual-artigo__vizinhos a:hover { background: var(--vs-bg-hover); }
.vs-manual-artigo__vizinhos a span { display: inline-flex; align-items: center; gap: 4px; color: var(--vs-text-3); font-size: var(--vs-text-sm); }
.vs-manual-artigo__vizinhos .is-proximo { grid-column: 2; text-align: right; align-items: flex-end; }

/* Print anotado */
.vs-manual-tela { margin: 0; padding: 14px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-xl); background: var(--vs-bg-surface); }
/* Print em largura total e legenda embaixo (em 2 colunas); só em tela muito larga a legenda vai para o lado. */
.vs-manual-tela__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 1680px) { .vs-manual-tela__corpo { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; } }
@media (min-width: 700px) and (max-width: 1679px) { .vs-manual-tela__lado .vs-manual-legenda { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; } }
.vs-manual-tela__quadro { position: relative; overflow: hidden; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-canvas); aspect-ratio: 16 / 10; }
.vs-manual-tela__quadro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; cursor: zoom-in; }
.vs-manual-tela__quadro.is-grande { border-radius: var(--vs-radius-md); }
.vs-manual-tela__quadro.is-grande img, .vs-manual-tela__quadro.is-tour img { cursor: default; }
.vs-manual-marca { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid #fff; border-radius: var(--vs-radius-full); background: var(--vs-manual-marca); color: #fff; font: inherit; font-size: 12px; font-weight: var(--vs-weight-semibold); font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(16, 24, 40, .35); cursor: pointer; transition: transform var(--vs-dur-fast) var(--vs-ease), opacity var(--vs-dur-base) var(--vs-ease); }
.vs-manual-tela__quadro.is-grande .vs-manual-marca { width: 30px; height: 30px; font-size: 13px; }
.vs-manual-marca:hover, .vs-manual-marca.is-ativo { transform: translate(-50%, -50%) scale(1.18); }
.vs-manual-marca.is-ativo { box-shadow: 0 0 0 5px rgba(36, 83, 214, .28), 0 2px 6px rgba(16, 24, 40, .35); }
.vs-manual-marca.is-apagado { opacity: .35; }
.vs-manual-marca:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vs-manual-tela__caixa { position: absolute; z-index: 1; border: 2px solid var(--vs-manual-marca); border-radius: 8px; background: rgba(36, 83, 214, .08); pointer-events: none; }
.vs-manual-tela__foco { position: absolute; z-index: 1; border-radius: 8px; outline: 2px solid var(--vs-amber-500); outline-offset: 2px; box-shadow: 0 0 0 9999px rgba(14, 34, 56, .58); pointer-events: none; transition: left .45s var(--vs-ease), top .45s var(--vs-ease), width .45s var(--vs-ease), height .45s var(--vs-ease); }
.vs-manual-tour { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); box-shadow: var(--vs-shadow-dialog); overflow: hidden; animation: vs-manual-sobe .25s var(--vs-ease); }
.vs-manual-tour.is-topo { bottom: auto; top: 12px; }
.vs-manual-tour__texto { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; line-height: 1.45; }
.vs-manual-tour__controles { display: flex; align-items: center; gap: 2px; }
.vs-manual-tour__contador { margin-right: 6px; font-size: var(--vs-text-sm); color: var(--vs-text-3); font-variant-numeric: tabular-nums; }
.vs-manual-tour__barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--vs-accent); transform-origin: left; animation: vs-manual-tempo var(--vs-tour-tempo, 4500ms) linear forwards; }
.vs-manual-tour__barra.is-pausado { animation-play-state: paused; }
@keyframes vs-manual-tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vs-manual-sobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vs-manual-tela__lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vs-manual-tela__legenda-titulo { font-size: var(--vs-text-md); font-weight: var(--vs-weight-semibold); color: var(--vs-text-2); }
.vs-manual-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-manual-legenda li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: var(--vs-radius-sm); font-size: var(--vs-text-md); line-height: 1.45; transition: background-color var(--vs-dur-fast) var(--vs-ease); }
.vs-manual-legenda li.is-ativo { background: var(--vs-info-bg); }
.vs-manual-legenda__num { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--vs-radius-full); background: var(--vs-manual-marca); color: #fff; font-size: 11px; font-weight: var(--vs-weight-semibold); font-variant-numeric: tabular-nums; }
.vs-manual-tela__acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .vs-manual-tela__foco, .vs-manual-marca, .vs-manual-tour { transition: none; animation: none; }
    .vs-manual-tour__barra { animation: none; transform: scaleX(1); opacity: .35; }
}
@media (max-width: 900px) {
    .vs-manual__corpo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .vs-manual__indice { position: static; max-height: none; overflow: visible; padding: 0; }
    .vs-manual__indice-gaveta { border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); padding: 4px 8px 10px; }
    .vs-manual__indice-gaveta:not([open]) { padding-bottom: 4px; }
    .vs-manual__indice-gaveta > summary { display: flex; align-items: center; gap: 8px; padding: 8px 4px; cursor: pointer; font-weight: var(--vs-weight-semibold); }
    .vs-manual__busca input { font-size: var(--vs-text-base); }
    .vs-manual__atalho { display: none; }
    .vs-manual-tela { padding: 10px; }
    .vs-manual-tour { left: 6px; right: 6px; bottom: 6px; padding: 8px; }
    .vs-manual-tour.is-topo { top: 6px; }
    .vs-manual-tour__texto { font-size: var(--vs-text-sm); }
    .vs-manual-marca { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
    .vs-manual-artigo__vizinhos { grid-template-columns: 1fr; }
    .vs-manual-artigo__vizinhos .is-proximo { grid-column: auto; }
}