/* roda-da-vida.css — a roda da vida (/ferramentas-gratis/roda-da-vida). Prefixo rv-. A roda e um SVG feito pelo JS,
   num fundo branco (como o papel) pra ler igual no tema claro e no escuro. No computador a roda fica parada do lado
   enquanto a lista de areas rola (sticky); no celular ela vem antes da lista. A folha A4 e medida em mm: a roda ao lado
   da tabela das notas e o plano de acao embaixo. */
.rv-abas { margin: 0; }
.rv-lista { display: flex; flex-direction: column; gap: .5rem; }
.rv-area { display: grid; grid-template-columns: .55rem minmax(0, 1fr); gap: .35rem .6rem; align-items: center; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--bg, var(--surface)); }
.rv-cor { grid-row: 1 / span 3; align-self: stretch; width: .55rem; border-radius: .3rem; }
.rv-nome-campo { min-height: 2.4rem; padding: .35rem .6rem; font-size: .95rem; font-weight: 700; }
.rv-faixa { grid-column: 2; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 2rem; align-items: center; gap: .5rem; cursor: pointer; }
.rv-faixa small { font-size: .75rem; font-weight: 700; color: var(--muted); }
.rv-faixa input[type="range"] { width: 100%; min-height: 2rem; margin: 0; accent-color: var(--c-forte); cursor: pointer; }
.rv-faixa--quero input[type="range"] { accent-color: #475569; }
.rv-faixa.is-vazio input[type="range"] { opacity: .45; }
.rv-valor { text-align: right; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--text); }
.rv-so-meta { display: none !important; }
.rv-app.is-meta .rv-so-meta { display: grid !important; }
.rv-marcar { margin: 0; }
.rv-plano { border: 1px solid var(--border); border-radius: .8rem; padding: 0 .85rem; background: var(--bg, var(--surface)); }
.rv-plano summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 700; font-size: .9rem; color: var(--text); }
.rv-plano[open] { padding-bottom: .85rem; }
.rv-plano__corpo { display: flex; flex-direction: column; gap: 1rem; }
.rv-acao { display: flex; flex-direction: column; gap: .35rem; padding-top: .75rem; border-top: 1px dashed var(--border); }
.rv-acao:first-child { border-top: 0; padding-top: 0; }
.rv-res { position: sticky; top: 1rem; }
.rv-roda { background: #fff; color-scheme: light; border-radius: .9rem; border: 1px solid var(--c-borda); padding: .4rem; }
.rv-roda .rv-svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.rv-imprimir { display: flex; flex-direction: column; }
.rv-legenda { display: none; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; color: var(--text-2); }
.rv-app.is-compacto .rv-legenda { display: flex; }
.rv-legenda li { display: inline-flex; align-items: center; gap: .35rem; }
.rv-legenda b { color: var(--text); font-variant-numeric: tabular-nums; }
.rv-leg-cor { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.rv-roda .rv-svg--compacto { max-width: 17rem; }

/* o desenho (tela e papel) */
.rv-anel { fill: none; stroke: #e4e4e7; stroke-width: .8; }
.rv-anel--forte { stroke: #a1a1aa; stroke-width: 1.1; }
.rv-raio { stroke: #a1a1aa; stroke-width: .8; }
.rv-fatia { opacity: .9; stroke: #fff; stroke-width: 1; }
.rv-meta { fill: none; stroke: #111827; stroke-width: 2.2; stroke-dasharray: 5 3; }
.rv-escala { font: 9px Arial, Helvetica, sans-serif; fill: #71717a; }
.rv-nome { font: 700 11px Arial, Helvetica, sans-serif; fill: #18181b; }
.rv-svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* a folha (A4 de pe) */
.rv-folha { display: flex; flex-direction: column; gap: 5mm; }
.rv-fl-cab { flex: none; display: flex; flex-direction: column; gap: 3.5mm; }
.rv-fl-tit { margin: 0; font-size: 16pt; font-weight: 700; line-height: 1.1; color: #111; }
.rv-fl-tit small { font-size: 9pt; font-weight: 400; color: #666; }
.rv-fl-campos { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 5mm; }
.rv-fl-campo { display: flex; align-items: flex-end; gap: 1.5mm; min-width: 0; font-size: 10pt; line-height: 1.2; color: #222; }
.rv-fl-campo b { flex: none; font-weight: 700; }
.rv-fl-linha { display: block; flex: 1 1 auto; height: 0; border-bottom: .3mm solid #555; margin-bottom: .6mm; }
.rv-fl-valor { flex: 1 1 auto; min-width: 0; padding-bottom: .5mm; border-bottom: .3mm solid #555; overflow-wrap: anywhere; }
.rv-fl-meio { flex: none; display: flex; align-items: center; gap: 6mm; }
.rv-fl-roda { flex: 0 0 110mm; }
.rv-fl-roda .rv-svg { display: block; width: 110mm; height: auto; }
.rv-fl-tab { flex: 1 1 auto; border-collapse: collapse; font-size: 9pt; color: #111; }
.rv-fl-tab th, .rv-fl-tab td { border: .25mm solid #999; height: 6mm; padding: 0 1.6mm; text-align: left; }
.rv-fl-tab th { height: 6.5mm; font-size: 8.5pt; background: #eef0f3; }
.rv-fl-tab .rv-fl-num { width: 12mm; text-align: center; font-weight: 700; }
.rv-fl-plano { flex: none; display: flex; flex-direction: column; gap: 5mm; }
.rv-fl-sub { font-size: 11pt; color: #111; }
.rv-fl-acao { display: flex; flex-direction: column; gap: 4.5mm; padding: 3.5mm 4mm; border: .3mm solid #bbb; border-radius: 2mm; }
.rv-fl-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm; }
.rv-fl-rod { flex: none; margin: auto 0 0; font-size: 8pt; line-height: 1; color: #8a8f98; }

/* A janela (o @media de sempre) e a PAGINA (o @container: a Dori aberta tira espaco sem mudar a janela; N = janela - 112) */
@media (max-width: 1024px) {
    .rv-res { order: -1; position: static; }
}
@container pagina (max-width: 912px) {
    .rv-res { order: -1; position: static; }
}
@media (max-width: 420px) {
    .rv-faixa { grid-template-columns: 2.8rem minmax(0, 1fr) 1.6rem; gap: .35rem; }
}
@container pagina (max-width: 420px) {
    .rv-faixa { grid-template-columns: 2.8rem minmax(0, 1fr) 1.6rem; gap: .35rem; }
}

/* No papel: so a folha. A margem da impressora (12 mm) + 3 mm da folha dao os 180 x 264 mm da previa; a altura fixa
   deixa o rodape no pe e nunca sobra folha em branco */
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    .rv-app .fer-folha { padding: 3mm; height: 270mm; }
}