/* App mobile (M31) — aba RENOVAR. Só os estilos que app.css/inteligencia.css
 * ainda não têm (rcard, secao-tit, chips, kpis-m, mescard, anelcell, legchart,
 * faixa, nota, loader-wrap já existem em app.css e são reusados). Copiado de
 * MODULOS\M31-renovar-mobile-mockup.html. O `.mescard .tot` do RENOVAR tem
 * formato diferente do das outras abas (número grande / cota pequena) — por
 * isso vem escopado a `.corpo[data-aba="renovar"]`, para não mudar as outras.
 */

/* ===== 1. Cota do mês — o card principal (anel que anima) ===== */
.card-cota{text-align:center;display:flex;flex-direction:column;align-items:center;margin-top:12px}
.card-cota h3 span{font-weight:400;color:var(--fraco)}
.donut-cota{position:relative;width:172px;height:172px;margin:6px auto 8px}
.donut-cota svg{transform:rotate(-90deg)}
.donut-cota .pc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.donut-cota .pc b{font-size:40px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.donut-cota .pc b i{font-style:normal;font-size:18px;font-weight:700;margin-left:1px}
.donut-cota .pc span{font-size:10px;color:var(--fraco);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.card-cota .valor{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.card-cota .valor small{font-weight:400;color:var(--fraco);font-size:11.5px}
.card-cota .valrot{font-size:12px;color:var(--corpo);margin-top:2px;font-variant-numeric:tabular-nums}
.card-cota .falta{margin-top:8px;font-size:11.5px;border-radius:14px;padding:3px 12px;font-weight:700}
.falta.ok{background:var(--verde-bg);color:var(--verde);border:1px solid var(--verde-bd)}
.falta.nao{background:var(--amarelo-bg);color:var(--amarelo);border:1px solid var(--amarelo-bd)}

/* ===== 2. KPI apagado (Herdadas · à parte) — app.css já tem .amarelo/.verde/.azul ===== */
.kpi-m.apagado b{color:var(--fraco)}
/* o complemento do número ("· 38/mês", "de 8", "camas") é reto, pequeno e apagado — o app.css não tem esta regra */
.corpo[data-aba="renovar"] .kpi-m b i{font-style:normal;font-size:12px;color:var(--fraco);font-weight:600}
/* nome do mês com inicial maiúscula, como no mockup */
.corpo[data-aba="renovar"] .mescard .m{text-transform:capitalize}

/* ===== 3. gráfico: camas por mês contra a cota ===== */
.grafico{width:100%;height:auto;aspect-ratio:336/170;display:block}
.legchart i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.legchart i.tr{height:0;border-top:2px dashed var(--fraco);border-radius:0;vertical-align:3px}

/* ===== 4. Camas por mês — cards (formato do "tot" é próprio do RENOVAR) ===== */
.corpo[data-aba="renovar"] .mescard .tot{margin-left:auto;font-size:11px;font-weight:600;color:var(--fraco);white-space:nowrap}
.corpo[data-aba="renovar"] .mescard .tot b{font-size:15px;color:var(--texto);font-variant-numeric:tabular-nums;font-weight:800}
.corpo[data-aba="renovar"] .mescard .vl{margin-top:3px;font-size:11.5px;color:var(--corpo);font-variant-numeric:tabular-nums}
.corpo[data-aba="renovar"] .mescard .vl em{font-style:normal;font-size:10.5px;color:var(--fraco)}

/* ===== pílula NOVO! na tabbar (molde: web\administrativo\casca.js) ===== */
.tabbar .tb{position:relative}
.pill-novo{position:absolute;top:-5px;left:50%;margin-left:6px;background:#FF9900;color:#1a1200;font-size:8px;font-weight:800;line-height:1;padding:2px 5px;border-radius:8px;letter-spacing:.03em;white-space:nowrap}