/* Painel da meta na home, página do plano dos 6 meses e mapa de plataformas.

   Espaço, raio, sombra, cor e tipografia saem dos tokens do painel. O que nasce
   aqui é só a escala dos números grandes (a tela pedida é "visual e bem grande")
   e as três cores de faixa, que reaproveitam tokens que o painel e a Semana já
   tinham: verde de publicado, âmbar de revisão e vermelho da WLC. Nenhum valor
   de cor novo. */
.fm{
  --fm-cor:var(--accent); --fm-ink:var(--accent-aa);
  margin-bottom:var(--sp-8);
}
.fm-plano{margin-bottom:var(--sp-12)}
.fm [data-fm-faixa="no-ritmo"]{--fm-cor:var(--fs-sex,#3E8560);--fm-ink:var(--fs-sex-ink,#2F6B4C)}
.fm [data-fm-faixa="abaixo"]{--fm-cor:var(--st-rev);--fm-ink:#8A5E0F}
.fm [data-fm-faixa="muito-abaixo"]{--fm-cor:var(--fs-ter,#C0392B);--fm-ink:var(--fs-ter-ink,#922B21)}
.fm [data-fm-faixa="sem"]{--fm-cor:var(--fg3);--fm-ink:var(--fg2)}

/* ---------- cabeçalho ---------- */
.fm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.fm-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--orange-ink)}
.fm-head h2{font-weight:900;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1.05;margin-top:6px}
.fm-head h2 span{font-family:'Chalkiez',cursive;font-weight:400;color:var(--lilac-mid);font-size:1.1em}
/* rótulo, estado e data usam --fg2 e --accent-aa, e não --fg3 nem --accent-deep:
   medidos nesta tela, os dois últimos ficam em 4,4:1 sobre o branco e sobre os
   fundos tingidos, abaixo do mínimo AA para texto pequeno. */
.fm-k{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--fg2)}
.fm-s{font-size:12.5px;color:var(--fg2);line-height:1.5;margin-top:var(--sp-1)}
.fm-nota{font-size:12px;color:var(--fg2);line-height:1.5;margin-top:var(--sp-3)}
/* o selo nunca quebra dentro da própria borda (achado 1 do gate da Vera) */
.fm-selo{white-space:nowrap;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);border:1px solid}
.fm-selo.m{color:var(--fs-sex-ink,#2F6B4C);background:color-mix(in srgb,var(--fs-sex,#3E8560) 12%,var(--white));border-color:color-mix(in srgb,var(--fs-sex,#3E8560) 40%,transparent)}
.fm-selo.t{color:var(--lilac-deep);background:color-mix(in srgb,var(--lilac) 18%,var(--white));border-color:color-mix(in srgb,var(--lilac-deep) 35%,transparent)}
.fm-selo.c{color:var(--fg2);background:var(--beige);border-color:var(--line-strong)}
.fm-selo.r{color:var(--accent-aa);background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent-aa) 35%,transparent)}

/* ---------- herói: o número grande ---------- */
.fm-hero{background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 12%,var(--white)),var(--white) 62%);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-md);margin-bottom:var(--sp-4)}
.fm-hero-num{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.fm-big{font-weight:900;font-size:clamp(46px,9vw,88px);line-height:.92;letter-spacing:-.03em;color:var(--accent-aa);font-variant-numeric:tabular-nums}
.fm-hero-sub{font-size:13.5px;color:var(--fg2);margin-top:var(--sp-2)}
/* conta sem medição: "sem medição" no lugar do número grande, no corpo de texto e
   não no corpo de número, para não parecer um valor */
.fm-big.nulo{font-size:clamp(22px,3.4vw,34px);font-weight:800;letter-spacing:-.01em;color:var(--fg2)}
.fm-barra{position:relative;height:16px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--fg3) 18%,var(--white));border:1px solid var(--line-strong);margin-top:var(--sp-4);overflow:hidden}
.fm-barra-fill{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent-aa),var(--lilac-mid))}
.fm-tick{position:absolute;top:0;bottom:0;width:2px;background:color-mix(in srgb,var(--dark) 45%,transparent)}
.fm-pontas{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2);font-size:12px;color:var(--fg2)}
.fm-pontas b{color:var(--accent-aa);font-weight:900}

/* ---------- grade de números ---------- */
.fm-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.fm-cel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.fm-v{font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.02em;margin-top:var(--sp-2);color:var(--fg1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* valor que é texto de estado ("sem medição") não usa tamanho de número
   (achado 2 do gate da Vera) */
.fm-v.nulo{font-size:15px;font-weight:700;color:var(--fg2);letter-spacing:0;margin-top:var(--sp-3)}

/* a conta da marca escolhida no topo, destacada na faixa comparativa */
.fm-cel-atual{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 0 2px var(--accent-wash),var(--shadow-sm)}
/* @conta é nome próprio: fica como a pessoa escreve, não em caixa alta de rótulo */
.fm-cel-conta>.fm-k{text-transform:none;letter-spacing:.02em;font-size:12.5px;color:var(--fg1)}
.fm-comp{margin-top:var(--sp-8)}

/* ---------- faixa e checagem ---------- */
.fm-duo{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-4);align-items:stretch}
/* conta com prazo e sem régua: sobra só a checagem, e ela ocupa a linha
   inteira em vez de ficar numa coluna de 1fr com um buraco do lado */
.fm-duo-so{grid-template-columns:minmax(0,1fr)}
.fm-faixa,.fm-checagem{background:var(--white);border:1px solid color-mix(in srgb,var(--fm-cor) 34%,var(--line));border-left:6px solid var(--fm-cor);border-radius:var(--r-md);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.fm-faixa-top{display:flex;flex-direction:column;gap:var(--sp-2)}
.fm-faixa-nome{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-weight:900;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:var(--fm-ink)}
.fm-faixa-num{list-style:none;margin:var(--sp-4) 0 0;display:flex;flex-direction:column;gap:var(--sp-2);font-size:13px;color:var(--fg2);line-height:1.5}
.fm-faixa-num b{color:var(--fm-ink);font-weight:900}
.fm-faixa-acao{margin-top:var(--sp-4);font-size:13.5px;line-height:1.55;color:var(--fg1)}
.fm-faixa-acao>span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fm-ink);margin-bottom:var(--sp-1)}
.fm-estado{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--fm-cor) 16%,var(--white));color:var(--fm-ink);border:1px solid color-mix(in srgb,var(--fm-cor) 38%,transparent);white-space:nowrap}
.fm-checagem{--fm-cor:var(--lilac-mid);--fm-ink:var(--lilac-deep);display:flex;flex-direction:column}
.fm-checagem .fm-v{font-size:clamp(40px,6vw,64px);color:var(--lilac-deep)}

/* ---------- ações de hoje ---------- */
.fm-acoes{background:var(--white);border:1px solid var(--line);border-left:6px solid var(--fs-cor,var(--accent));border-radius:var(--r-md);padding:var(--sp-6);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4)}
.fm-acoes-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.fm-conta{font-size:12px;font-weight:800;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:color-mix(in srgb,var(--fs-cor,var(--accent)) 16%,var(--white));color:var(--fs-ink,var(--accent-aa));border:1px solid color-mix(in srgb,var(--fs-cor,var(--accent)) 34%,transparent)}
.fm-cand{font-size:14px;line-height:1.5;color:var(--fg1);margin-bottom:var(--sp-4)}
.fm-cand>span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fs-ink,var(--accent-aa));margin-bottom:var(--sp-1)}
.fm-previa{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);font-size:13px;color:var(--fg2);line-height:1.5}
.fm-previa b{color:var(--fg1)}
.fm-acoes .fs-checks{margin-top:var(--sp-2)}
/* caixa marcada não risca o texto, igual à Semana: a hora da marcação precisa
   continuar legível */
.fm-acoes .fs-check.feito span{text-decoration:none}

/* ---------- blocos, alavancas e marcos ---------- */
.fm-bloco{margin-bottom:var(--sp-4)}
.fm-bloco>.fm-k{margin-bottom:var(--sp-3)}
.fm-alavs,.fm-marcos,.fm-faixas{list-style:none;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.fm-alav{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--line-strong);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.fm-alav.on{border-top-color:var(--fs-sex,#3E8560);background:linear-gradient(160deg,color-mix(in srgb,var(--fs-sex,#3E8560) 8%,var(--white)),var(--white) 70%)}
.fm-alav-top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.fm-alav-top b{flex:1 1 12ch;font-size:13.5px;font-weight:800;line-height:1.35}
.fm-alav-n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);background:var(--beige);color:var(--fg2);font-weight:900;font-size:12px;border:1px solid var(--line-strong)}
.fm-alav.on .fm-alav-n{background:var(--fs-sex-ink,#2F6B4C);color:var(--white);border-color:transparent}
.fm-alav.on .fm-estado{--fm-cor:var(--fs-sex,#3E8560);--fm-ink:var(--fs-sex-ink,#2F6B4C)}
.fm-alav .fm-estado{--fm-cor:var(--fg3);--fm-ink:var(--fg2)}
.fm-det{margin-top:var(--sp-3);font-size:12.5px;color:var(--fg2);line-height:1.5}
.fm-det>summary{cursor:pointer;font-weight:800;color:var(--accent-aa)}
.fm-det>summary:focus-visible{outline:2px solid var(--accent-aa);outline-offset:3px;border-radius:var(--r-sm)}
.fm-det p{margin-top:var(--sp-2)}
.fm-marco{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow-sm);border-top:4px solid var(--line-strong)}
.fm-marco.atual{border-top-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash),var(--shadow-md)}
.fm-marco.passado{opacity:.86}
.fm-marco-qd{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-aa)}
.fm-marco-v{font-weight:900;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.1;margin-top:var(--sp-1);font-variant-numeric:tabular-nums}
/* marco que só tem data: "sem medição" é texto de estado e não usa corpo de
   número, pela mesma regra de .fm-v.nulo (achado 2 do gate da Vera) */
.fm-marco-v.nulo{font-size:14px;font-weight:700;color:var(--fg2);letter-spacing:0;margin-top:var(--sp-2)}
.fm-faixas .fm-faixa.agora{box-shadow:0 0 0 2px color-mix(in srgb,var(--fm-cor) 35%,transparent),var(--shadow-md)}
.fm-chec{display:grid;gap:var(--sp-2)}
.fm-chec>div{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-sm)}
.fm-chec dt{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.fm-chec dd{font-size:13px;color:var(--fg1);line-height:1.5;margin-top:var(--sp-1)}
.fm-vazio{padding:var(--sp-6);border:1px dashed var(--line-strong);border-radius:var(--r-md);color:var(--fg2);font-weight:600;background:var(--white)}

/* ---------- mapa de plataformas ---------- */
.fm-plat{margin-top:var(--sp-4)}
.fp-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:var(--sp-3)}
.fp-card{--fp-cor:var(--accent);background:var(--white);border:1px solid color-mix(in srgb,var(--fp-cor) 30%,var(--line));border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;padding:var(--sp-6);position:relative}
.fp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--fp-cor),color-mix(in srgb,var(--fp-cor) 35%,var(--lilac)))}
.fp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.fp-head h3{font-size:20px;font-weight:900;letter-spacing:-.02em;margin-top:var(--sp-1)}
.fp-status{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--fp-cor) 14%,var(--white));color:var(--fg1);border:1px solid color-mix(in srgb,var(--fp-cor) 40%,transparent);white-space:nowrap}
.fp-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.fp-linha{margin-top:var(--sp-3)}
.fp-linha p{font-size:13px;color:var(--fg1);line-height:1.5;margin-top:var(--sp-1)}
.fp-tags{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.fp-tag{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);background:var(--beige);color:var(--fg2);border:1px solid var(--line-strong)}
.fp-tag.sim{background:color-mix(in srgb,var(--fs-sex,#3E8560) 12%,var(--white));color:var(--fs-sex-ink,#2F6B4C);border-color:color-mix(in srgb,var(--fs-sex,#3E8560) 38%,transparent)}
.fp-tag.nao{background:color-mix(in srgb,var(--fs-ter,#C0392B) 10%,var(--white));color:var(--fs-ter-ink,#922B21);border-color:color-mix(in srgb,var(--fs-ter,#C0392B) 38%,transparent)}

/* ---------- responsivo e acessibilidade ---------- */
@media(max-width:860px){
  .fm-duo{grid-template-columns:minmax(0,1fr)}
  .fm-hero,.fm-faixa,.fm-checagem,.fm-acoes,.fp-card{padding:var(--sp-4)}
}
@media(max-width:520px){
  .fm-head{align-items:flex-start}
  .fm-head .fs-btn,.fm-plano .view-head .fs-btn{width:100%}
  .fm-pontas{flex-direction:column;gap:var(--sp-1)}
}
@media(prefers-contrast:more){
  .fm-cel,.fm-faixa,.fm-checagem,.fm-acoes,.fm-alav,.fm-marco,.fp-card,.fm-chec>div{border-color:var(--fg1)}
  .fm-selo,.fm-estado,.fp-tag,.fp-status{border-color:currentColor}
}
@media(prefers-reduced-motion:reduce){.fm *{transition:none!important;animation:none!important}}

/* ===== Visual premium (Laise 2026-09-19: "deixa mais colorido, premium") =====
   Só aparência: números, selos e textos são os mesmos. Cada célula ganha uma cor
   da paleta (coral, lilás, azul, verde, âmbar) em rodízio, com o número em
   degradê e um brilho suave; o herói vira uma faixa com malha de cor. */
.fm-hero{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),
    radial-gradient(90% 120% at 100% 0%,rgba(142,111,209,.20),transparent 60%),
    radial-gradient(80% 120% at 60% 120%,rgba(62,123,214,.14),transparent 60%),var(--white);
  box-shadow:0 18px 50px color-mix(in srgb,var(--accent) 16%,transparent),0 2px 0 rgba(255,255,255,.7) inset}
.fm-big{background:linear-gradient(100deg,var(--accent-aa),var(--accent) 45%,#8E6FD1);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--accent) 30%,transparent))}
.fm-big.nulo{background:none;color:var(--fg2);filter:none}
.fm-barra{height:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,var(--white)),rgba(142,111,209,.14),rgba(62,123,214,.14));box-shadow:inset 0 1px 3px rgba(30,27,46,.12)}
.fm-barra-fill{background:linear-gradient(90deg,var(--accent),#8E6FD1,#3E7BD6);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.fm-grade .fm-cel{--c:var(--accent);position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 26%,var(--line));border-top:5px solid var(--c);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 11%,var(--white)),var(--white) 62%);
  box-shadow:0 10px 28px color-mix(in srgb,var(--c) 14%,transparent);transition:transform .18s,box-shadow .18s}
.fm-grade .fm-cel:hover{transform:translateY(-2px);box-shadow:0 16px 36px color-mix(in srgb,var(--c) 22%,transparent)}
.fm-grade .fm-cel:nth-child(5n+2){--c:#8E6FD1}
.fm-grade .fm-cel:nth-child(5n+3){--c:#3E7BD6}
.fm-grade .fm-cel:nth-child(5n+4){--c:#2E9E5B}
.fm-grade .fm-cel:nth-child(5n+5){--c:#D9A23A}
.fm-grade .fm-cel::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);pointer-events:none}
.fm-grade .fm-v:not(.nulo){background:linear-gradient(100deg,var(--dark),color-mix(in srgb,var(--c) 85%,var(--dark)));-webkit-background-clip:text;background-clip:text;color:transparent}
.fm-grade .fm-k{color:color-mix(in srgb,var(--c) 70%,var(--dark))}
.fm-faixa,.fm-checagem{background:linear-gradient(160deg,color-mix(in srgb,var(--fm-cor) 12%,var(--white)),var(--white) 65%);box-shadow:0 12px 32px color-mix(in srgb,var(--fm-cor) 16%,transparent)}
.fm-checagem .fm-v{background:linear-gradient(100deg,var(--lilac-deep),#3E7BD6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:reduce){.fm-grade .fm-cel{transition:none}.fm-grade .fm-cel:hover{transform:none}}
.fm-marcos .fm-marco{--c:var(--accent);border-top:5px solid var(--c);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 10%,var(--white)),var(--white) 60%);box-shadow:0 10px 26px color-mix(in srgb,var(--c) 13%,transparent)}
.fm-marcos .fm-marco:nth-child(5n+2){--c:#8E6FD1}
.fm-marcos .fm-marco:nth-child(5n+3){--c:#3E7BD6}
.fm-marcos .fm-marco:nth-child(5n+4){--c:#2E9E5B}
.fm-marcos .fm-marco:nth-child(5n+5){--c:#D9A23A}