/* Métricas: filtros, indicadores e gráficos em SVG. Só tokens do base.css. */
/* Filtros: uma linha acima de tudo o que eles afetam */
.m-filtros { align-items: center; }
.m-escolha { position: relative; }
.m-escolha .combo-botao { justify-content: flex-start; max-width: 300px; }
.m-escolha .combo-botao span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.m-escolha .combo-botao[aria-expanded="true"] .i:last-child { transform: rotate(180deg); }
.m-escolha .popover { left: 0; right: auto; }
.m-escolha .popover[hidden] { display: none; }
.m-lista { width: 340px; display: flex; flex-direction: column; gap: 2px; }
.m-lista .opcao { padding: 8px 10px; border-radius: var(--r); color: var(--ink); }
.m-lista .opcao:hover { background: var(--hover); }
.m-lista .m-todas { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; margin-bottom: 2px; font-weight: 500; }
.m-lista .m-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-periodo { width: auto; display: flex; gap: 6px; padding: 6px; max-height: none; }
.m-periodo .calendario { border: 0; box-shadow: none; padding: 6px; }
.m-atalhos { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding-right: 6px; border-right: 1px solid var(--line); }
.m-atalhos button { padding: 8px 10px; border: 0; border-radius: var(--r); background: none; font: 400 12.5px var(--font-body); color: var(--ink-soft); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease); }
.m-atalhos button:hover { background: var(--hover); color: var(--ink); }
.m-atalhos button.escolhido { background: var(--blue-wash); color: var(--ink); font-weight: 500; }
.m-filtros .combo-botao { min-width: 170px; }
/* Indicadores: seis números */
.m-indicadores { grid-template-columns: repeat(3, 1fr); }
.m-indicadores .valor { white-space: nowrap; }
/* Enquanto carrega de novo, o que já está na tela fica esmaecido (sem pular) */
.m-conteudo { transition: opacity .15s var(--ease); }
.m-conteudo.carregando { opacity: .5; pointer-events: none; }
/* Blocos (funil, perfil, vagas): título e gráficos em duas colunas; os largos ocupam a linha toda */
.m-bloco + .m-bloco { margin-top: 32px; }
.m-secao { margin: 0 0 12px; font: 600 10.5px/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.m-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.m-graficos .largo { grid-column: 1 / -1; }
.m-grafico .cartao-cabeca .sub { margin-top: 4px; }
.m-area { margin-top: 14px; min-width: 0; }
.m-area svg { display: block; overflow: visible; }
.m-vazio { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-mute); }
.cartao > .m-vazio:first-child { margin: 0; }
/* Marcas e textos do SVG: texto sempre tinta, nunca na cor da série */
.m-rotulo { font: 400 12.5px var(--font-body); fill: var(--ink-soft); }
.m-valor { font: 500 12px var(--font-body); font-variant-numeric: tabular-nums; fill: var(--ink); }
.m-valor.pequeno { font-size: 11px; }
.m-eixo { font: 400 11px var(--font-body); font-variant-numeric: tabular-nums; fill: var(--ink-mute); }
.m-grade { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.m-fundo { fill: transparent; transition: fill .15s var(--ease); }
.m-linha { outline: none; cursor: default; }
.m-linha:hover .m-fundo, .m-linha:focus-visible .m-fundo { fill: rgba(164,189,248,.12); }
.m-linha:focus-visible .m-fundo { stroke: var(--blue-ink); stroke-width: 1.5; }
.m-linha:hover .m-marca, .m-linha:focus-visible .m-marca { opacity: .85; }
/* Legenda (2 séries): quadradinho na cor da marca + nome em tinta */
.m-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-soft); }
.m-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.m-legenda i { width: 10px; height: 10px; border-radius: 50%; }
/* Número em destaque (idade média, pretensão, % indicados, destaques) */
.m-medida { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-mute); }
.m-medida .num { font-size: 26px; line-height: 1; color: var(--ink); }
.m-medidas { display: flex; flex-wrap: wrap; gap: 0 32px; }
/* "Ver números": a tabela de cada gráfico, recolhida */
.m-numeros { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.m-numeros summary { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--blue-ink); cursor: pointer; border-radius: var(--r); list-style: none; }
.m-numeros summary::-webkit-details-marker { display: none; }
.m-numeros summary::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; transition: transform .15s var(--ease); }
.m-numeros[open] summary::after { transform: rotate(180deg); }
.m-numeros table { margin-top: 8px; }
.m-numeros tbody tr { cursor: default; }
.m-numeros td { padding-top: 8px; padding-bottom: 8px; font-variant-numeric: tabular-nums; }
.m-numeros td:not(:first-child), .m-numeros th:not(:first-child) { text-align: right; }
/* Dica com o valor exato (mesmo balão tinta do .com-dica) */
.m-dica { position: fixed; z-index: 70; min-width: 140px; max-width: 280px; padding: 10px 12px; border-radius: var(--r); background: var(--ink); color: #fff; font: 400 12px/1.45 var(--font-body); pointer-events: none; box-shadow: var(--shadow-pop); }
.m-dica[hidden] { display: none; }
.m-dica-titulo { color: rgba(255,255,255,.7); margin-bottom: 4px; }
.m-dica-linha { display: flex; align-items: center; gap: 8px; }
.m-dica-linha strong { font: 500 14px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.m-dica-linha span:last-child { color: rgba(255,255,255,.7); }
.m-chave { width: 12px; height: 2px; flex: none; }
.m-dica-extra { margin-top: 4px; color: rgba(255,255,255,.7); }
/* Tabela por vaga: recuo padrão do base.css; números à direita; cabeçalho ordena */
.m-tabela { margin: 14px 0 0; overflow-x: auto; }
.m-vagas tbody tr { cursor: default; }
.m-vagas .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-ordem { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: var(--r); background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; transition: color .15s var(--ease); }
.m-ordem:hover, [aria-sort=ascending] .m-ordem, [aria-sort=descending] .m-ordem { color: var(--ink); }
.m-ordem:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.m-ordem .i { width: 12px; height: 12px; opacity: 0; }
.n .m-ordem { flex-direction: row-reverse; } /* seta à esquerda: o texto alinha com os números */
.m-ordem:hover .i, [aria-sort=ascending] .m-ordem .i, [aria-sort=descending] .m-ordem .i { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.m-conteudo, .m-fundo, .m-numeros summary::after { transition: none; }
}
@media (max-width: 1280px) {
.m-indicadores { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.m-graficos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.m-indicadores { grid-template-columns: 1fr; }
.m-escolha, .m-escolha .combo-botao, .m-filtros .combo { width: 100%; max-width: none; }
.m-periodo { flex-direction: column; }
.m-atalhos { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 6px; }
.m-lista { width: calc(100vw - 48px); }
}