/* App mobile (M31) — aba INTELIGÊNCIA. Só os estilos que app.css/controle.css
 * ainda não têm (rcard, secao-tit, chips, kpis-m, mescard, barra, matriz,
 * faixa, nota, loader-wrap, anelcell já existem em app.css e são reusados).
 * Copiado de MODULOS\M31-inteligencia-mobile-mockup.html.
 */

/* ===== Nosso resultado — o card principal (anel de 4 segmentos, anima) ===== */
.card-res{text-align:center;display:flex;flex-direction:column;align-items:center;margin-top:12px}
.card-res h3 span{font-weight:400;color:var(--fraco)}
.donut-res{position:relative;width:172px;height:172px;margin:6px auto 8px}
.donut-res svg{transform:rotate(-90deg)}
.donut-res .pc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.donut-res .pc b{font-size:40px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--verde)}
.donut-res .pc b i{font-style:normal;font-size:18px;font-weight:700;margin-left:1px}
.donut-res .pc span{font-size:10px;color:var(--fraco);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.card-res .valor{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.card-res .valor small{font-weight:400;color:var(--fraco);font-size:11px}
.leg-res{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:10px;width:100%;max-width:260px}
.leg-res .li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--corpo)}
.leg-res .li .pt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.leg-res .li .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}

/* KPI vermelho — app.css já tem .amarelo/.verde/.azul, faltava este */
.kpi-m.vermelho b{color:var(--vermelho)}

/* mescard clicável (a Disputa por mês troca o mês ao tocar) + seleção */
.mescard[onclick]{cursor:pointer}
.mescard.selmes{border-color:var(--sel-bd);box-shadow:0 0 0 2px var(--sel-bg),var(--sombra)}
.mescard .bk.g{color:var(--verde);font-weight:700}
.mescard .bk.p{color:var(--vermelho)}
.mescard .bk.d{color:var(--anel-amarelo)}
.mescard .mesa{margin-top:5px;font-size:10.5px;color:var(--fraco)}
.mescard .mesa b{color:var(--vermelho);font-variant-numeric:tabular-nums}

/* rodapé pequeno de cartão (nota do "(sem marca)") */
.rcard .rodape{margin:8px 0 0;font-size:10.5px;color:var(--fraco)}