/* Manual do usuário - Corrente do Bem */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/montserrat-latin-italic.woff2') format('woff2');
}

:root {
    --verde: #3fa110;
    --verde-escuro: #106d38;
    --verde-texto: #2c7a0a;
    --verde-claro: #eef6e8;
    --verde-borda: #cfe3c0;
    --texto: #33383d;
    --texto-suave: #666d75;
    --linha: #e3e6e1;
    --fundo: #ffffff;
    --fundo-lateral: #f6f8f4;
    --marca: #d9480f;
    --ambar: #a15c00;
    --ambar-claro: #fff6e5;
    --ambar-borda: #f2d59b;
    --azul: #1f5fa8;
    --azul-claro: #eef4fb;
    --azul-borda: #c5d9ef;
    --vermelho: #b3261e;
    --vermelho-claro: #fdf1f0;
    --vermelho-borda: #f0c4c0;
    --topo: 60px;
    --lateral: 310px;
}

* { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--topo) + 18px); }

body {
    margin: 0;
    font-family: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- barra superior ------------------------------------------------------ */

.topo {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--topo);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid var(--linha);
}

.topo .marca-sistema { display: flex; align-items: center; gap: 14px; color: var(--texto); min-width: 0; }
.topo .marca-sistema:hover { text-decoration: none; }
.topo .marca-sistema img { height: 30px; width: auto; display: block; }
.topo .marca-sistema span { font-weight: 600; font-size: 15px; white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--linha); }

.busca { position: relative; flex: 1; max-width: 520px; margin-left: auto; }
.busca input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 38px;
    font: inherit;
    font-size: 14.5px;
    color: var(--texto);
    background: var(--fundo-lateral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666d75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
    border: 1px solid var(--linha);
    border-radius: 8px;
    outline: none;
}
.busca input:focus { border-color: var(--verde); background-color: #fff; box-shadow: 0 0 0 3px rgba(63, 161, 16, .14); }

.resultados {
    display: none;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    max-height: min(70vh, 560px);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 40, 20, .14);
}
.resultados.aberto { display: block; }
.resultados a { display: block; padding: 10px 14px; color: var(--texto); border-bottom: 1px solid var(--linha); }
.resultados a:last-child { border-bottom: 0; }
.resultados a:hover, .resultados a.ativo { background: var(--verde-claro); text-decoration: none; }
.resultados .r-tipo { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--verde-texto); }
.resultados .r-titulo { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.resultados .r-texto { font-size: 13px; color: var(--texto-suave); line-height: 1.45; margin-top: 2px; }
.resultados .vazio { padding: 14px; color: var(--texto-suave); font-size: 14px; }

.acoes-topo { display: flex; gap: 8px; }
.botao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 13px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--verde-texto);
    background: #fff;
    border: 1px solid var(--verde-borda);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.botao:hover { background: var(--verde-claro); text-decoration: none; }
.botao.cheio { color: #fff; background: var(--verde); border-color: var(--verde); }
.botao.cheio:hover { background: #378e0e; }
.botao svg { width: 16px; height: 16px; flex: none; }
.botao-menu { display: none; }

/* ---- sumário lateral ----------------------------------------------------- */

.lateral {
    position: fixed;
    top: var(--topo);
    bottom: 0;
    left: 0;
    width: var(--lateral);
    overflow: auto;
    padding: 18px 10px 40px 14px;
    background: var(--fundo-lateral);
    border-right: 1px solid var(--linha);
    z-index: 20;
}
.lateral ol { list-style: none; margin: 0; padding: 0; }
.lateral > ol > li { margin-bottom: 4px; }
.lateral a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--texto); font-size: 14px; line-height: 1.4; }
.lateral a:hover { background: #e9efe4; text-decoration: none; }
.lateral .cap { font-weight: 600; }
.lateral .cap .num { display: inline-block; min-width: 22px; color: var(--verde-texto); }
.lateral ol ol { display: none; margin: 2px 0 8px 22px; border-left: 2px solid var(--linha); }
.lateral li.aberto > ol { display: block; }
.lateral ol ol a { font-size: 13.5px; color: var(--texto-suave); padding: 4px 10px; border-radius: 0 6px 6px 0; margin-left: -2px; border-left: 2px solid transparent; }
.lateral ol ol a.atual { color: var(--verde-escuro); font-weight: 600; border-left-color: var(--verde); background: var(--verde-claro); }
.lateral .cap.atual { color: var(--verde-escuro); }

/* ---- conteúdo ------------------------------------------------------------ */

.conteudo { margin: var(--topo) 0 0 var(--lateral); padding: 34px 48px 120px; }
.coluna { max-width: 900px; margin: 0 auto; }

h1, h2, h3, h4 { color: #1f2a22; line-height: 1.25; font-weight: 600; }
h1 { font-size: 31px; margin: 0 0 14px; letter-spacing: -.01em; }
h2 { font-size: 23px; margin: 58px 0 12px; padding-top: 22px; border-top: 1px solid var(--linha); }
h3 { font-size: 18.5px; margin: 40px 0 10px; }
h4 { font-size: 15.5px; margin: 26px 0 8px; text-transform: none; color: var(--verde-escuro); }
h1 .num, h2 .num { color: var(--verde-texto); margin-right: 10px; font-weight: 500; }

p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 24px; }
li { margin-bottom: 6px; }
strong { font-weight: 600; color: #262b30; }

.capitulo { padding-bottom: 30px; margin-bottom: 40px; }
.capitulo + .capitulo { border-top: 3px solid var(--verde-claro); padding-top: 54px; }
.capitulo > .abre { font-size: 17px; color: var(--texto-suave); margin-bottom: 22px; }
.capitulo > h1 + .abre + .neste { margin-top: 0; }

.neste { background: var(--fundo-lateral); border: 1px solid var(--linha); border-radius: 10px; padding: 14px 18px 8px; margin: 18px 0 8px; }
.neste strong { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.neste ul { columns: 2; column-gap: 28px; list-style: none; padding: 0; margin: 0; }
.neste li { break-inside: avoid; font-size: 14.5px; }

/* alvo de um link direto (botão "?" do sistema) */
section:target > h2, section:target > h3 { animation: alvo 2.4s ease-out 1; }
@keyframes alvo { from { background: #fff3bf; } to { background: transparent; } }
.ancora { display: block; height: 0; }

/* rótulos de elementos da tela */
.bt, .campo, .menu-caminho, .tela-nome { white-space: nowrap; }
.bt { display: inline-block; padding: 0 8px; font-size: .88em; font-weight: 600; line-height: 1.55; color: var(--verde-escuro); background: var(--verde-claro); border: 1px solid var(--verde-borda); border-radius: 5px; }
.campo { font-weight: 600; color: #262b30; border-bottom: 1px dotted #9aa39a; }
.menu-caminho { font-weight: 600; color: var(--verde-escuro); white-space: normal; }
.menu-caminho .sep { color: #9aa39a; font-weight: 400; padding: 0 3px; }
.tela-nome { font-weight: 600; white-space: normal; }
.n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; margin: 0 1px; vertical-align: 1px;
    font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: var(--marca); border-radius: 50%;
}
kbd { font: inherit; font-size: .86em; padding: 1px 6px; border: 1px solid #c9cec7; border-bottom-width: 2px; border-radius: 5px; background: #fafbf9; }
.msg-sistema { font-weight: 600; color: #262b30; }

/* como chegar */
.chegar { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0 20px; padding: 14px 18px; background: var(--fundo-lateral); border: 1px solid var(--linha); border-radius: 10px; font-size: 14.5px; }
.chegar dt { font-weight: 600; color: var(--texto-suave); }
.chegar dd { margin: 0; }

/* passos */
ol.passos { list-style: none; padding: 0; margin: 14px 0 22px; counter-reset: passo; }
ol.passos > li { position: relative; padding: 0 0 4px 44px; margin-bottom: 14px; counter-increment: passo; min-height: 30px; }
ol.passos > li::before {
    content: counter(passo);
    position: absolute; left: 0; top: -1px;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: var(--verde-escuro); background: var(--verde-claro); border: 1.5px solid var(--verde);
}
ol.passos > li > p:last-child { margin-bottom: 0; }
ol.passos .resultado { display: block; margin-top: 6px; color: var(--texto-suave); font-size: 14.5px; }
ol.passos .resultado::before { content: 'Resultado: '; font-weight: 600; color: var(--verde-escuro); }

/* prints */
figure.print { margin: 18px 0 26px; }
ol.passos figure.print { margin: 12px 0 14px; }
.print-img { position: relative; display: block; margin: 0; border: 1px solid #d5dad2; border-radius: 8px; overflow: hidden; background: #f8f8f8; box-shadow: 0 2px 10px rgba(30, 50, 30, .07); cursor: zoom-in; }
.print-img img { display: block; width: 100%; height: auto; }
figure.print figcaption { margin-top: 8px; font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; }
figure.print figcaption b { color: var(--texto); font-weight: 600; }
.marca-area { position: absolute; border: 2px solid var(--marca); border-radius: 5px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); pointer-events: none; }
.marca-num {
    position: absolute;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; line-height: 1; color: #fff; background: var(--marca);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); pointer-events: none;
}
ol.legenda { list-style: none; padding: 0; margin: 10px 0 20px; }
ol.legenda li { position: relative; padding-left: 32px; margin-bottom: 7px; }
ol.legenda li > .n:first-child { position: absolute; left: 0; top: 2px; }

/* ampliação */
.zoom { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(18, 26, 18, .86); cursor: zoom-out; }
.zoom.aberto { display: flex; }
.zoom .print-img { max-width: min(96vw, 1500px); max-height: 92vh; overflow: auto; cursor: zoom-out; }

/* tabelas */
.tabela-rolagem { overflow-x: auto; margin: 12px 0 22px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--linha); }
thead th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; background: var(--fundo-lateral); border-top: 1px solid var(--linha); white-space: nowrap; }
table.campos td:first-child { font-weight: 600; color: #262b30; white-space: nowrap; }
table.campos td:nth-child(2) { white-space: nowrap; }
.sim { color: var(--vermelho); font-weight: 600; }
.nao { color: var(--texto-suave); }

/* avisos */
.caixa { position: relative; margin: 16px 0 22px; padding: 13px 16px 13px 48px; border: 1px solid; border-radius: 10px; font-size: 14.8px; }
.caixa > :last-child { margin-bottom: 0; }
.caixa::before { content: ''; position: absolute; left: 15px; top: 14px; width: 21px; height: 21px; background: no-repeat center / contain; }
.caixa .rotulo { font-weight: 600; margin-right: 4px; }
.caixa.dica { background: var(--verde-claro); border-color: var(--verde-borda); }
.caixa.dica .rotulo { color: var(--verde-escuro); }
.caixa.dica::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23106d38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }
.caixa.atencao { background: var(--ambar-claro); border-color: var(--ambar-borda); }
.caixa.atencao .rotulo { color: var(--ambar); }
.caixa.atencao::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a15c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.caixa.nota { background: var(--azul-claro); border-color: var(--azul-borda); }
.caixa.nota .rotulo { color: var(--azul); }
.caixa.nota::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }

/* problemas e mensagens */
.problema { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--linha); border-left: 4px solid var(--vermelho); border-radius: 8px; background: #fff; }
.problema .p-msg { font-weight: 600; color: var(--vermelho); margin-bottom: 4px; }
.problema .p-msg.pergunta { color: #262b30; }
.problema.pergunta { border-left-color: var(--azul); }
.problema p { margin-bottom: 6px; font-size: 14.8px; }
.problema p:last-child { margin-bottom: 0; }
.problema .p-rot { font-weight: 600; color: var(--texto-suave); }
.problema .p-onde { font-size: 13px; color: var(--texto-suave); }

/* índice de tarefas */
.tarefas { columns: 2; column-gap: 34px; margin-top: 10px; }
.tarefas section { break-inside: avoid; margin-bottom: 20px; }
.tarefas h3 { margin: 0 0 6px; font-size: 15px; color: var(--verde-escuro); }
.tarefas ul { list-style: none; padding: 0; margin: 0; }
.tarefas li { margin-bottom: 4px; font-size: 14.5px; }

.rodape { margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--texto-suave); }

.so-pdf { display: none; }

/* ---- telas estreitas ----------------------------------------------------- */

@media (max-width: 1080px) {
    .lateral { transform: translateX(-100%); transition: transform .18s ease; box-shadow: 8px 0 30px rgba(0, 0, 0, .12); }
    body.menu-aberto .lateral { transform: none; }
    .conteudo { margin-left: 0; padding: 26px 22px 100px; }
    .botao-menu { display: inline-flex; padding: 0 10px; }
    .topo .marca-sistema span { display: none; }
    .botao .txt { display: none; }
    .botao { padding: 0 11px; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    h1 { font-size: 26px; }
    h2 { font-size: 20.5px; }
    .topo { gap: 10px; padding: 0 12px; }
    .topo .marca-sistema img { height: 24px; }
    .neste ul, .tarefas { columns: 1; }
    .chegar { grid-template-columns: 1fr; gap: 2px; }
    .chegar dd { margin-bottom: 8px; }
    ol.passos > li { padding-left: 38px; }
    table.campos td:first-child { white-space: normal; }
}

/* ---- impressão pelo navegador ("Imprimir este capítulo") ------------------ */

@media print {
    @page { size: A4; margin: 16mm 15mm 18mm; }
    html { scroll-behavior: auto; }
    body { font-size: 10.6pt; line-height: 1.5; }
    .topo, .lateral, .zoom, .rodape .nao-imprime { display: none !important; }
    .conteudo { margin: 0; padding: 0; }
    .coluna { max-width: none; }
    a { color: inherit; }
    h1 { font-size: 22pt; }
    h2 { font-size: 15pt; margin-top: 22pt; padding-top: 10pt; break-after: avoid; }
    h3 { font-size: 12.5pt; margin-top: 16pt; break-after: avoid; }
    h4 { break-after: avoid; }
    .capitulo { break-before: page; border-top: 0 !important; padding-top: 0 !important; margin-bottom: 0; }
    .capitulo:first-of-type { break-before: auto; }
    body.so-um-capitulo .capitulo:not(.imprimir) { display: none; }
    body.so-um-capitulo .capitulo.imprimir { break-before: auto; }
    figure.print, .caixa, .problema, .chegar, tr { break-inside: avoid; }
    ol.passos > li::before { break-inside: avoid; }
    h2 + p, h3 + p { break-before: avoid; }
    /* --pw: largura que mantém o print inteiro numa página (calculada na montagem) */
    .print-img { box-shadow: none; cursor: default; width: var(--pw, 100%); max-width: 100% !important; }
    .caixa, .bt, .n, .marca-num, .marca-area, ol.passos > li::before, thead th, .chegar, .neste { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .neste ul { columns: 2; }
}