/* Profit News — peças visuais das ferramentas (painel/visuais.js) e o quadro com título e "?" (.pn-painel), que
 * Medidores, Calendário e Impacto usam. Mesmos tokens do jornal: âmbar = marca e "acima do normal"; verde e vermelho
 * só para direção. */

/* ---------------------------------------------------------------- quadro */
.pn-painel { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 16px 18px 18px; background: var(--bg-2); border: 1px solid var(--hair); border-radius: var(--r-lg); }
.pn-painel-cab { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 12px; }
.pn-painel-tit { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.pn-painel-tag { margin-left: auto; font-size: 11.5px; letter-spacing: .04em; color: var(--text-2); white-space: nowrap; }
.pn-painel-corpo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pn-ajuda { position: relative; }
.pn-ajuda summary { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; color: var(--text-2); font: 600 11px var(--font); cursor: pointer; list-style: none; }
.pn-ajuda summary::-webkit-details-marker { display: none; }
.pn-ajuda summary:hover, .pn-ajuda[open] summary { color: var(--ink); border-color: var(--text-2); }
.pn-ajuda-caixa { position: absolute; left: -8px; top: calc(100% + 8px); z-index: 14; width: min(300px, 78vw); padding: 12px 14px; background: var(--layer-2); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 18px 44px -18px rgb(0 0 0 / calc(.85 * var(--sombra-k))); font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.pn-ajuda-caixa p { margin: 0; }
.pn-ouvir { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-top: 10px; padding: 0 11px 0 9px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text-2); font: 600 12px var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.pn-ouvir:hover, .pn-ouvir[aria-pressed=true] { color: var(--ink); border-color: var(--text-2); }
.pn-ouvir:focus-visible { outline: 2px solid var(--news); outline-offset: 2px; }
.pn-ouvir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pn-ouvir[aria-pressed=true] .pn-ouvir-onda { stroke: var(--news); animation: pnOnda 1.1s var(--ease) infinite alternate; }
@keyframes pnOnda { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pn-ouvir[aria-pressed=true] .pn-ouvir-onda { animation: none; } }
.pn-sem-voz .pn-ouvir { display: none; }

/* ---------------------------------------------------------------- medidor (meia-lua) */
.vs-medidor { display: block; width: 100%; max-width: 250px; margin: 0 auto; overflow: visible; }
.vs-trilho, .vs-faixa, .vs-cheio { fill: none; stroke-width: 14; stroke-linecap: butt; }
.vs-trilho { stroke: var(--hair); }
.vs-cheio { stroke: var(--text-2); }
.vs-cheio.is-vol { stroke: var(--news); }
.vs-cheio.is-alta { stroke: var(--alta); }
.vs-cheio.is-baixa { stroke: var(--baixa); }
.vs-cheio.is-neutra { stroke: var(--text-2); }
.vs-marca { stroke: var(--bg-2); stroke-width: 2.5; }
.vs-agulha { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.vs-eixo { fill: var(--ink); stroke: var(--bg-2); stroke-width: 3; }
.vs-ponta { fill: var(--text-3); font: 500 10px var(--mono); }

/* ---------------------------------------------------------------- anéis da contagem */
.vs-aneis { display: flex; align-items: center; justify-content: center; gap: 4px; }
.vs-anel { position: relative; display: grid; place-items: center; width: clamp(64px, 18vw, 82px); aspect-ratio: 1; }
.vs-anel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vs-anel-trilho { fill: none; stroke: var(--hair); stroke-width: 4; }
.vs-anel-cheio { fill: none; stroke: var(--news); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .4s var(--ease); }
.vs-anel b { position: relative; font: 500 clamp(20px, 5.4vw, 26px) var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; margin-top: -6px; }
.vs-anel small { position: absolute; bottom: 17%; font: 500 10px var(--mono); color: var(--text-3); }
.vs-anel-sep { font: 500 20px var(--mono); color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .vs-anel-cheio { transition: none; } }

/* ---------------------------------------------------------------- relógio de 24 h */
.vs-r24 { display: block; width: 100%; max-width: 210px; margin: 0 auto; overflow: visible; }
.vs-r24-fundo { fill: none; stroke: var(--hair); stroke-width: 1; }
.vs-r24-marca { stroke: var(--text-3); stroke-width: 1; }
.vs-r24-marca.is-grande { stroke: var(--text-2); stroke-width: 1.6; }
.vs-r24-hora { fill: var(--text-3); font: 500 9px var(--mono); }
.vs-r24-sessao { fill: none; stroke: rgba(var(--ink-rgb), .16); stroke-width: 8; }
.vs-r24-sessao.is-aberta { stroke: var(--news); }
.vs-r24-agulha { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.vs-r24-eixo { fill: var(--ink); }
.vs-r24-agora { fill: var(--ink); font: 500 22px var(--mono); }
.vs-r24-nota { fill: var(--text-3); font: 600 9px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.vs-r24.is-fechado .vs-r24-sessao { stroke: rgba(var(--ink-rgb), .08); }

/* ---------------------------------------------------------------- bandeiras */
.vs-bandeira { flex: none; display: inline-block; width: 21px; height: 14px; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .14); overflow: hidden; }
.vs-b-branca { fill: #fff; }
.vs-b-vermelha { fill: #C8102E; stroke: #fff; stroke-width: .3; }
.vs-b-amarela { fill: #FFDE00; }
.vs-b-neutra { fill: var(--layer-3); }
.vs-b-globo { fill: none; stroke: var(--text-2); stroke-width: .7; }
.vs-par { position: relative; display: inline-block; flex: none; width: 31px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.vs-par .vs-bandeira { position: absolute; width: 21px; height: 14px; }
.vs-par-a { left: 0; top: 0; }
.vs-par-b { left: 10px; top: 4px; box-shadow: 0 0 0 1.5px var(--bg-2), 0 0 0 2.5px rgba(var(--ink-rgb), .14); }

/* ---------------------------------------------------------------- ícone do ativo (D36, painel/icones.js) */
.vs-ic { display: inline-block; flex: none; width: 20px; height: 18px; margin-right: 6px; object-fit: contain; vertical-align: -4px; }
.vs-ic-ini { display: inline-grid; place-items: center; border-radius: 5px; background: var(--layer-3); color: var(--text-2); font: 600 8.5px var(--mono); letter-spacing: 0; text-transform: none; }
.md-ativo .vs-ic { width: 32px; height: 28px; margin-right: 2px; }
.md-ativo .vs-ic-ini { font-size: 11px; }
.md-li-nome .vs-ic { width: 22px; height: 20px; margin-right: 2px; }
.gf-icone { display: inline-flex; vertical-align: middle; }
.gf-icone .vs-ic { width: 44px; height: 38px; margin-right: 10px; vertical-align: 0; }
.gf-icone .vs-ic-ini { font-size: 13px; }
.gf-icone .vs-par { margin-right: 10px; }
.pt-item .vs-ic, .mt-ativo .vs-ic { width: 16px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.im-ativo .vs-ic, .im-ev-btn .vs-ic { width: 18px; height: 16px; vertical-align: -3px; }