/* App mobile (M31) — Relatório da Planilha de Controle, só leitura.
   Paleta e desenho de cada seção copiados de MODULOS\M31-mobile-mockup.html
   (a moldura de celular do mockup não existe aqui: a página INTEIRA é a tela). */
:root{ color-scheme: light dark;
  --bg:#ffffff; --painel:#eef1f4; --card:#ffffff; --linha:#c9d1d9; --linha-forte:#aab4bf;
  --texto:#0d1216; --fraco:#5b6570; --corpo:#2b333b; --zebra:#f2f5f8;
  --sel:#124a9c; --sel-bg:#dce8fb; --sel-bd:#7aa5e6;
  --verde:#0f6b25; --verde-bg:#cdeecf; --verde-bd:#7cc689;
  --vermelho:#a3271b; --vermelho-bg:#f6d3ce; --vermelho-bd:#e29a90;
  --amarelo:#7a5200; --amarelo-bg:#fae6b8; --amarelo-bd:#e0bf6e;
  --anel-amarelo:#c48f10;
  --azul:#124a9c; --azul-bg:#d3e2fb; --azul-bd:#8fb4ea;
  --roxo:#5626a0; --roxo-bg:#e4d6fa; --roxo-bd:#b79ae8;
  --cinza:#4a555f;
  --sombra:0 2px 8px rgba(16,24,32,.08);
  --nota-bg:#fdf2df; --nota-tx:#8a5a10; --nota-bd:#e6cf9c;
  --appbar:#002b7f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1317; --painel:#161b21; --card:#131920; --linha:#333c45; --linha-forte:#465059;
    --texto:#f0f3f6; --fraco:#93a0ad; --corpo:#cbd3db; --zebra:#171d24;
    --sel:#7fb0ff; --sel-bg:#16273e; --sel-bd:#345182;
    --verde:#84e096; --verde-bg:#123420; --verde-bd:#2c6a3c;
    --vermelho:#f2988c; --vermelho-bg:#3a1712; --vermelho-bd:#6e352c;
    --amarelo:#f2c265; --amarelo-bg:#3a2b0f; --amarelo-bd:#63501f;
    --anel-amarelo:#f2c265;
    --azul:#7fb0ff; --azul-bg:#16273e; --azul-bd:#345182;
    --roxo:#c6a4f0; --roxo-bg:#271a3a; --roxo-bd:#4d3a6d;
    --cinza:#aeb8c1;
    --sombra:0 2px 8px rgba(0,0,0,.45);
    --nota-bg:#33260f; --nota-tx:#f0b866; --nota-bd:#5c4a1e;
    --appbar:#0a1a3a;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1317; --painel:#161b21; --card:#131920; --linha:#333c45; --linha-forte:#465059;
  --texto:#f0f3f6; --fraco:#93a0ad; --corpo:#cbd3db; --zebra:#171d24;
  --sel:#7fb0ff; --sel-bg:#16273e; --sel-bd:#345182;
  --verde:#84e096; --verde-bg:#123420; --verde-bd:#2c6a3c;
  --vermelho:#f2988c; --vermelho-bg:#3a1712; --vermelho-bd:#6e352c;
  --amarelo:#f2c265; --amarelo-bg:#3a2b0f; --amarelo-bd:#63501f;
  --anel-amarelo:#f2c265;
  --azul:#7fb0ff; --azul-bg:#16273e; --azul-bd:#345182;
  --roxo:#c6a4f0; --roxo-bg:#271a3a; --roxo-bd:#4d3a6d;
  --cinza:#aeb8c1;
  --sombra:0 2px 8px rgba(0,0,0,.45);
  --nota-bg:#33260f; --nota-tx:#f0b866; --nota-bd:#5c4a1e;
  --appbar:#0a1a3a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--texto);
     font:13px/1.45 "Segoe UI",-apple-system,Roboto,Arial,sans-serif;
     display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden}

/* app bar */
.appbar{background:var(--appbar);color:#fff;flex-shrink:0;padding:calc(10px + env(safe-area-inset-top)) 14px 12px;display:flex;align-items:center;gap:10px}
.appbar .logo-tcjm{flex-shrink:0;filter:drop-shadow(0 0 1px rgba(128,128,128,.5))}
.appbar .tit{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.appbar .tit small{display:block;font-size:11.5px;font-weight:400;opacity:.8;margin-top:1px}
.appbar .ic{background:rgba(255,255,255,.14);border:none;color:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:17px;flex-shrink:0}
.appbar .ic:active{transform:rotate(180deg);transition:transform .2s}

.corpo{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;background:var(--painel);-webkit-overflow-scrolling:touch}

/* chips (ano + empresa) */
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:10px 12px;background:var(--card);border-bottom:1px solid var(--linha);align-items:center}
.chips .rot{font-size:10px;font-weight:700;color:var(--fraco);text-transform:uppercase;margin-right:2px}
.chip{flex-shrink:0;background:var(--bg);border:1px solid var(--linha-forte);border-radius:16px;padding:6px 13px;font-size:12.5px;color:var(--corpo);font-weight:600;white-space:nowrap;cursor:pointer}
.chip.on{background:var(--sel);border-color:var(--sel);color:#fff}
.chips .sp{flex:1}

.secao-tit{padding:14px 13px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fraco);font-weight:700}
.secao-tit small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:11px;margin-top:2px}

/* cartão genérico do relatório (= .rcard do desktop) */
.rcard{background:var(--card);border:1px solid var(--linha);border-radius:13px;padding:13px 13px;margin:0 12px 10px;box-shadow:var(--sombra);min-width:0}
.rcard h3{margin:0 0 2px;font-size:13.5px}
.rcard .dica{margin:0 0 10px;font-size:11px;color:var(--fraco)}

/* ===== 1. Meta do mês — o card principal (donut grande) ===== */
.card-meta-mes{text-align:center;display:flex;flex-direction:column;align-items:center;margin-top:12px}
.card-meta-mes h3 span{font-weight:400;color:var(--fraco)}
.donut-meta{position:relative;width:172px;height:172px;margin:6px auto 10px}
.donut-meta svg{transform:rotate(-90deg)}
.donut-meta .pc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.donut-meta .pc b{font-size:40px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.donut-meta .pc b i{font-style:normal;font-size:18px;font-weight:700;margin-left:1px}
.card-meta-mes .valor{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.card-meta-mes .valrot{font-size:10px;color:var(--fraco);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}

/* ===== 2. KPIs 2×2 ===== */
.kpis-m{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px 4px}
.kpi-m{min-width:0;background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:10px 11px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sombra)}
.kpi-m .rot{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--fraco);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-m b{font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.3px}
.kpi-m .sub{font-size:10px;color:var(--fraco);line-height:1.3}
.kpi-m.amarelo b{color:var(--amarelo)} .kpi-m.verde b{color:var(--verde)} .kpi-m.azul b{color:var(--azul)}

/* ===== 3. Meta por mês — cards de mês (a tabela do desktop, empilhada) ===== */
.mescard{background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:10px 12px;margin:0 12px 8px;display:flex;gap:10px;align-items:center;box-shadow:var(--sombra)}
.mescard .bloco{flex:1;min-width:0}
.mescard .l1{display:flex;align-items:baseline;gap:8px}
.mescard .m{font-size:14px;font-weight:800}
.mescard .m.mes{text-transform:capitalize}
.mescard .tot{margin-left:auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--texto)}
.mescard .brk{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px}
.mescard .brk:empty{display:none}
.mescard .bk{font-size:10.5px;color:var(--corpo);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px;white-space:nowrap}
.mescard .bk.fora{color:var(--fraco)}         /* suspenso/desclassificado: fora do total */
.mescard .bk.homol{color:var(--verde);font-weight:600}
.mescard .dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.mescard.tgm{background:var(--zebra);border-color:var(--linha-forte)}
.mescard.saldom{background:var(--amarelo-bg);border-color:var(--amarelo-bd)}
.mescard.saldom .m,.mescard.saldom .tot{color:var(--amarelo)}
.mescard.saldom .sub{font-size:10.5px;color:var(--amarelo);opacity:.85;margin-top:2px}
.anelcell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0}
.anelcell svg{transform:rotate(-90deg)}
.anelcell .p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.anelcell .p i{font-style:normal;font-size:8px;font-weight:700;margin-left:1px}

/* ===== 4. Meta ao longo do ano ===== */
.linha{display:block;width:100%;height:170px}
.legchart{display:flex;gap:12px;margin-top:6px;font-size:10.5px;color:var(--fraco);flex-wrap:wrap}
.legchart .li{display:flex;align-items:center;gap:5px} .legchart .sw{width:11px;height:11px;border-radius:3px}

/* ===== 5. Por andamento (donut) ===== */
.donut-wrap{display:flex;gap:14px;align-items:center}
.donut{width:118px;height:118px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.donut .centro{width:74px;height:74px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut .centro b{font-size:12.5px} .donut .centro span{font-size:9px;color:var(--fraco)}
.leg-and{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.leg-and .li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--corpo)}
.leg-and .li .pt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.leg-and .li .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* ===== 6–8. barras ===== */
.barra{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:11.5px}
.barra .lab{flex:0 0 118px;color:var(--corpo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .track{flex:1;background:var(--painel);border-radius:6px;height:13px;overflow:hidden;min-width:0}
.barra .fill{height:100%;border-radius:6px;background:var(--azul)}
.barra .num{flex:0 0 58px;text-align:right;font-variant-numeric:tabular-nums;color:var(--corpo);white-space:nowrap}

/* ===== 9. Categoria × andamento — cabe na largura, sem rolar ===== */
table.matriz{width:100%;table-layout:fixed;border-collapse:collapse;font-size:11px}
table.matriz th{padding:5px 2px;color:var(--fraco);font-weight:700;font-size:9.5px;text-transform:uppercase;text-align:center;border-bottom:2px solid var(--linha-forte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.matriz th:first-child{text-align:left;width:31%}
table.matriz td{padding:4px 2px;text-align:center;border-bottom:1px solid var(--linha);white-space:nowrap}
table.matriz td.cat{text-align:left;color:var(--corpo);overflow:hidden;text-overflow:ellipsis;font-size:10.5px}
.heat{display:inline-block;min-width:40px;padding:3px 4px;border-radius:5px;font-variant-numeric:tabular-nums;font-weight:700;color:#fff;text-shadow:0 1px 1.5px rgba(0,0,0,.45);font-size:10.5px}
.heat.vazio{background:transparent;color:var(--fraco);text-shadow:none;font-weight:400}

.nota{background:var(--nota-bg);border:1px solid var(--nota-bd);color:var(--nota-tx);border-radius:10px;padding:10px 13px;font-size:11.5px;margin:6px 12px 18px;line-height:1.5}
.nota b{color:var(--nota-tx)}

/* aviso de erro/cache — nunca silencioso */
.faixa{margin:10px 12px;padding:11px 13px;border-radius:10px;font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:8px}
.faixa b{display:block;margin-bottom:2px}
.faixa.erro{background:var(--vermelho-bg);border:1px solid var(--vermelho-bd);color:var(--vermelho)}
.faixa.cache{background:var(--amarelo-bg);border:1px solid var(--amarelo-bd);color:var(--amarelo)}
.faixa button{align-self:flex-start;background:var(--card);border:1px solid currentColor;color:inherit;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}

/* loader — o quadrado do logo TCJM girando, nunca círculo genérico */
.loader-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:70px 20px;color:var(--fraco);font-size:12.5px}
.loader-svg{animation:girar 1.1s linear infinite;filter:drop-shadow(0 0 1px rgba(128,128,128,.5))}
@keyframes girar{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* aba Controle — fora desta visita */
.vazio-ctrl{padding:70px 28px;text-align:center;color:var(--fraco);font-size:13px;line-height:1.6}
.vazio-ctrl b{display:block;color:var(--texto);font-size:15px;margin-bottom:6px}

/* aba Ajuda */
.ajuda{padding:16px 16px 30px;color:var(--corpo);font-size:12.5px;line-height:1.6}
.ajuda h4{margin:16px 0 6px;font-size:12.5px;color:var(--texto)}
.ajuda h4:first-child{margin-top:0}
.ajuda p{margin:0 0 8px}

/* tab bar inferior */
.tabbar{flex-shrink:0;background:var(--card);border-top:1px solid var(--linha);display:flex;padding:8px 0 calc(10px + env(safe-area-inset-bottom))}
.tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--fraco);cursor:pointer}
.tabbar .tb.on{color:var(--sel)} .tabbar .tb svg{width:22px;height:22px}
.tabbar .tb.dim{opacity:.55}