/* Mochila Mágica — Progresso (área dos pais). Mobile/tablet primeiro; gráficos só em CSS/SVG. Reutiliza style.css + conta.css. */
.pg{--ok:#2DBE6C;--mid:#FFC93C;--low:#FF6B2C}
.pg-back{margin:0}
.pg-back a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--navy)}
.pg-head{padding:4px 0 14px}
.pg-head h1{margin:0 0 6px}
.pg h2{font-size:1.35rem;margin:0 0 8px}
.pg-h3{font:600 1.05rem/1.2 var(--f-title);margin:18px 0 6px;color:var(--navy)}
.pg-card{margin-bottom:18px;padding:18px 16px}
@media (min-width:768px){.pg-card{padding:24px}}

/* seletor de criança */
.pg-kids{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;margin:0 0 6px;scrollbar-width:thin}
.pg-kid{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px 6px 6px;border-radius:999px;border:3px solid var(--line);background:#fff;
  font:600 1.02rem/1.1 var(--f-title);color:var(--navy);cursor:pointer;flex:none;touch-action:manipulation}
.pg-kid .ini{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#FFE9A8;font-weight:700}
.pg-kid[aria-pressed=true]{border-color:var(--orange);background:#FFF3E8}
.pg-kid small{font:700 .8rem/1 var(--f-body);color:var(--ink-2)}

/* resumo */
.pg-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media (min-width:768px){.pg-stats{grid-template-columns:repeat(4,1fr)}}
.pg-stat{background:#fff;border-radius:18px;padding:14px 14px 12px;box-shadow:var(--shadow);min-width:0}
.pg-stat b{display:block;font:700 1.75rem/1.1 var(--f-title);color:var(--navy)}
.pg-stat span{display:block;font-size:.92rem;color:var(--ink-2);font-weight:700}
.pg-stat.o{border-top:6px solid var(--orange)} .pg-stat.g{border-top:6px solid var(--green)} .pg-stat.b{border-top:6px solid var(--blue)} .pg-stat.y{border-top:6px solid var(--yellow)}

/* barras horizontais (precisão) */
.pg-disc{border-top:2px solid var(--line);padding:12px 0 6px}
.pg-disc:first-child{border-top:0;padding-top:0}
.pg-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.pg-row .nm{font-weight:800;min-width:0;overflow-wrap:anywhere}
.pg-row .val{font:700 1.05rem/1 var(--f-title);color:var(--navy);white-space:nowrap}
.pg-row .sub{grid-column:1/-1;font-size:.88rem;color:var(--ink-2)}
.hbar{grid-column:1/-1;height:14px;border-radius:999px;background:var(--cream-2);overflow:hidden}
.hbar i{display:block;height:100%;border-radius:999px;background:var(--ok);min-width:4px}
.hbar.mid i{background:var(--mid)} .hbar.low i{background:var(--low)}
.pg-disc details{margin-top:4px}
.pg-disc summary,.pg-tab summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--blue-d);list-style-position:inside}
.pg-temas{display:grid;gap:12px;padding:6px 0 8px 2px}
.pg-temas .pg-row .nm{font-weight:700}
.pg-temas .hbar{height:10px}
.tag{display:inline-block;font:800 .74rem/1 var(--f-body);text-transform:uppercase;letter-spacing:.05em;padding:4px 8px;border-radius:999px;background:#FFE3D3;color:#9A3412;margin-left:6px;vertical-align:2px}

/* temas a reforçar */
.pg-fracos{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.pg-fracos li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;background:#FFF7EC;border-radius:16px;padding:10px 12px;border:2px solid #FFE0CC}
.pg-fracos .pct{grid-row:1/3;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:700 1.05rem/1 var(--f-title);color:var(--navy);
  background:conic-gradient(var(--low) calc(var(--p)*1%),#FFE3D3 0)}
.pg-fracos .pct span{background:#FFF7EC;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.pg-fracos b{overflow-wrap:anywhere} .pg-fracos small{color:var(--ink-2)}
.pg-empty{background:#E3F7EC;color:#14653A;border-radius:16px;padding:12px 14px;font-weight:700;margin:8px 0 0}

/* gráficos de colunas (CSS) + linha (SVG) */
.vchart{position:relative;margin-top:8px}
.vbars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;align-items:end;height:160px;border-bottom:2px solid var(--line);position:relative}
.vbar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.vbar i{display:block;width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:var(--blue);min-height:2px}
.vbar.zero i{background:var(--line)}
.vbar em{font:700 .72rem/1 var(--f-body);font-style:normal;color:var(--navy);margin-bottom:3px;white-space:nowrap}
.vchart.orange .vbar i{background:var(--orange)} .vchart.yellow .vbar i{background:var(--yellow)}
.vlbl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:6px}
.vlbl span{font-size:.72rem;font-weight:700;color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden}
.vlbl.sparse span{overflow:visible}
.vline{position:absolute;left:0;top:0;width:100%;height:160px;pointer-events:none;overflow:visible}
.vline polyline{fill:none;stroke:var(--green-d);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vline line{stroke:var(--green-d);stroke-width:1;stroke-dasharray:4 4;opacity:.55;vector-effect:non-scaling-stroke}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:.86rem;font-weight:700;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;background:var(--blue)}
.legend .ln i{height:4px;border-radius:2px;background:var(--green-d);vertical-align:3px}
@media (max-width:480px){.vlbl.sparse span:nth-child(even){visibility:hidden}.vbar em.opt{display:none}}

/* tabelas alternativas */
.pg-tab{margin-top:10px}
.pg-tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.pg-tbl th,.pg-tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right}
.pg-tbl th:first-child,.pg-tbl td:first-child{text-align:left}
.pg-tbl caption{text-align:left;font-weight:800;padding:6px 0}
.pg-tblw{overflow-x:auto}

/* última sessão (simples) */
.pg-last{display:grid;gap:6px}
.pg-last p{margin:0}
.pg-last .big{font:700 1.3rem/1.2 var(--f-title);color:var(--navy)}

/* convite discreto à Família */
.pg-invite{border:2px dashed var(--line);border-radius:18px;padding:14px 16px;margin:0 0 18px;background:transparent;color:var(--ink-2)}
.pg-invite h2{font-size:1.05rem;margin:0 0 4px;color:var(--navy)}
.pg-invite p{margin:4px 0}
.pg-invite a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--blue-d)}

.pg-nota{margin-top:12px}
.pg-priv{text-align:center;margin-top:8px}
.pg [hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){.hbar i,.vbar i{transition:height .3s ease,width .3s ease}}