/* ============================================================ MOTOR-RELATORIO — motor.css (v1 · 30/07/2026) TODOS os componentes de exibição do relatório, servidos aos 3+ jogos. Extraído do melhor dos 3 (xadrez) e generalizado. Spec: ghost-core/MOTOR-RELATORIO.md (as 10 leis). REGRAS DESTE ARQUIVO: - Prefixo `m-` em toda classe (não colide com legado na migração). - O motor NUNCA usa cor crua de jogo: tudo deriva de --acc (tingido pelo jogo via --pri/--green) + os semânticos FIXOS da casa: dourado = ALVO (lei 3), vermelho = abaixo, azul = tag neutra. Espelhos translúcidos por color-mix, nunca rgba de acento hardcoded. - Identidade (lei 10): grain · anéis de escada no radar · glifos da escada · rail lateral · dourado-alvo. ============================================================ */ /* ---------- tokens semânticos ---------- .report é o escopo canônico; .m-tt e .m-sticky são anexados ao (fora do .report) e por isso repetem a declaração. */ .report, .m-tt, .m-sticky { /* acento da vertical: o jogo tinge --pri (ou o legado --green) no app.css dele */ --acc: var(--pri, var(--green, #2ea043)); --acc-2: var(--pri-2, var(--green-2, color-mix(in srgb, var(--acc) 70%, #ffffff))); --acc-dim: color-mix(in srgb, var(--acc) 14%, transparent); /* texto sobre superfície de acento (botões): quase-preto puxado do próprio acento */ --acc-contrast: color-mix(in srgb, var(--acc) 18%, #05090d); /* semânticos FIXOS da casa (lei 3) — nunca retintados por jogo */ --m-gold: var(--gold, #d29922); --m-gold-2: var(--gold-2, #e3b341); --m-gold-dim: color-mix(in srgb, var(--m-gold) 14%, transparent); --m-red: var(--red, #f85149); --m-red-dim: color-mix(in srgb, var(--m-red) 13%, transparent); --m-blue: var(--blue, #58a6ff); --m-blue-dim: color-mix(in srgb, var(--m-blue) 14%, transparent); /* harmonização 04/08 (reprovação do dono: "pesado", "cores diferentes"): preenchimentos GRANDES (barras) usam versão dessaturada/escurecida da cor de estado — a cor cheia fica reservada pro que é pontual (marcador, chip, texto). Trilhos de stat (4px) usam a variante "rail", um meio-termo mais discreto que ainda lê como cor plena em elemento fino. */ --m-red-fill: color-mix(in srgb, var(--m-red) 58%, var(--m-bg-2)); --m-acc-fill: color-mix(in srgb, var(--acc) 58%, var(--m-bg-2)); --m-red-rail: color-mix(in srgb, var(--m-red) 75%, var(--m-panel)); --m-acc-rail: color-mix(in srgb, var(--acc) 75%, var(--m-panel)); --m-gold-rail: color-mix(in srgb, var(--m-gold) 75%, var(--m-panel)); --m-blue-rail: color-mix(in srgb, var(--m-blue) 75%, var(--m-panel)); /* base neutra (herda do app.css do jogo; fallback = paleta da casa) */ --m-bg: var(--bg, #0d1117); --m-bg-2: var(--bg-2, #0f151d); --m-panel: var(--panel, #161b22); --m-panel-2: var(--panel-2, #1b222c); --m-raise: var(--raise, #212b36); --m-line: var(--line, rgba(240, 246, 252, .08)); --m-line-2: var(--line-2, rgba(240, 246, 252, .15)); --m-ink: var(--ink, #e6edf3); --m-ink-2: var(--ink-2, #c2ccd6); --m-muted: var(--muted, #8b949e); --m-disp: var(--disp, 'Space Grotesk', system-ui, sans-serif); --m-body: var(--body, 'Inter', system-ui, -apple-system, sans-serif); --m-r: var(--r, 16px); --m-r-sm: var(--r-sm, 11px); --m-shadow: var(--shadow, 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 44px rgba(0, 0, 0, .4)); } /* ---------- grain de identidade (traço fixo nº 1) ---------- */ .m-grain { position: fixed; inset: 0; z-index: -1; opacity: .4; pointer-events: none; background-image: linear-gradient(rgba(232, 244, 238, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 244, 238, .02) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(700px 460px at 50% 0, #000, transparent 72%); mask-image: radial-gradient(700px 460px at 50% 0, #000, transparent 72%); } /* ---------- tipografia utilitária ---------- */ .m-eyebrow { font-family: var(--m-disp); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--acc-2); display: inline-flex; gap: 8px; align-items: center; } .m-eyebrow--gold { color: var(--m-gold-2); } .m-eyebrow--red { color: var(--m-red); } .m-muted { color: var(--m-muted); } .m-tnum { font-variant-numeric: tabular-nums; } .m-hint { font-size: .8rem; color: var(--m-muted); } .m-center { text-align: center; } .m-mt { margin-top: 16px; } .m-mt-s { margin-top: 8px; } /* ---------- painel + rail (traço fixo nº 4) ---------- */ .m-panel { background: linear-gradient(180deg, var(--m-panel-2), var(--m-panel)); border: 1px solid var(--m-line); border-radius: var(--m-r); padding: 22px; box-shadow: var(--m-shadow); } .m-panel + .m-panel { margin-top: 16px; } .m-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .m-panel-head h2, .m-panel-head h3 { font-family: var(--m-disp); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; font-size: clamp(1.1rem, 3vw, 1.35rem); margin: 0; } .m-rail { position: relative; padding-left: 20px; } .m-rail::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 4px; background: var(--acc); } .m-rail--red::before { background: var(--m-red); } .m-rail--gold::before { background: var(--m-gold); } .m-rail--blue::before { background: var(--m-blue); } /* ---------- botões / links ---------- */ .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; font-family: var(--m-disp); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; padding: 16px 22px; border: none; border-radius: 13px; cursor: pointer; text-align: center; text-decoration: none; color: var(--acc-contrast); background: linear-gradient(180deg, var(--acc-2), var(--acc)); box-shadow: 0 2px 0 rgba(0, 0, 0, .28), 0 12px 26px color-mix(in srgb, var(--acc) 26%, transparent); transition: transform .16s, box-shadow .16s, filter .16s; } .m-btn:hover { transform: translateY(-2px); box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 16px 32px color-mix(in srgb, var(--acc) 34%, transparent); } .m-btn:active { transform: translateY(0); } .m-btn:disabled { filter: saturate(.5) brightness(.8); cursor: default; transform: none; } .m-btn--gold { color: color-mix(in srgb, var(--m-gold) 22%, #0d0800); background: linear-gradient(180deg, var(--m-gold-2), var(--m-gold)); box-shadow: 0 2px 0 rgba(0, 0, 0, .28), 0 12px 26px color-mix(in srgb, var(--m-gold) 24%, transparent); } .m-btn--ghost { background: none; color: var(--m-ink-2); border: 1px solid var(--m-line-2); box-shadow: none; font-size: .9rem; font-weight: 600; padding: 12px 18px; } .m-btn--ghost:hover { border-color: var(--m-ink-2); transform: none; color: var(--m-ink); } .m-btn--sm { width: auto; padding: 11px 18px; font-size: .9rem; } .m-txt-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--m-disp); font-weight: 600; font-size: .86rem; color: var(--acc-2); cursor: pointer; padding: 8px 4px; text-decoration: none; } .m-txt-link:hover { color: var(--m-ink); text-decoration: underline; } /* CTA suave (dourado) usado na prosa da fila e nos rodapés */ .m-plano-link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; background: var(--m-gold-dim); border: 1px solid color-mix(in srgb, var(--m-gold) 35%, transparent); border-radius: 10px; padding: 12px 14px; font-family: var(--m-disp); font-weight: 600; font-size: .88rem; color: var(--m-gold-2); cursor: pointer; text-align: left; transition: transform .15s, background .15s; } .m-plano-link:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--m-gold) 22%, transparent); } .m-pay-note { font-size: .78rem; color: var(--m-muted); text-align: center; margin-top: 8px; } /* ---------- tags / chips ---------- */ .m-chip { font-size: .74rem; font-weight: 600; border: 1px solid var(--m-line-2); border-radius: 999px; padding: 5px 13px; color: var(--m-ink-2); display: inline-flex; gap: 6px; align-items: center; } .m-tag { font-family: var(--m-disp); font-weight: 600; font-size: .72rem; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; } .m-tag--acc { color: var(--acc-2); background: var(--acc-dim); } .m-tag--gold { color: var(--m-gold-2); background: var(--m-gold-dim); } .m-tag--red { color: var(--m-red); background: var(--m-red-dim); } .m-tag--blue { color: var(--m-blue); background: var(--m-blue-dim); } /* chip de degrau da escada (cor vem do dado da escada, via --c inline do motor.js) */ .m-pilar-chip { font-family: var(--m-disp); font-weight: 700; font-size: .74rem; border-radius: 999px; padding: 4px 12px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--c, var(--m-muted)) 40%, transparent); color: var(--c, var(--m-ink-2)); background: color-mix(in srgb, var(--c, var(--m-muted)) 14%, transparent); } .m-pilar-chip--abaixo { --c: var(--m-red); } /* tier é ordem, não categoria (harmonização 04/08): o degrau "no alvo/acima" não precisa de cor própria — o glifo+nome já diz qual é. Neutraliza o --c inline (hex por-degrau vindo da página do jogo, ex.: resultado.html). !important pq custom property em style="" inline vence regra normal de mesma origem; :not(--abaixo) preserva o vermelho, que continua vindo por classe (sem inline). */ .m-pilar-chip:not(.m-pilar-chip--abaixo) { --c: var(--m-ink-2) !important; } /* ---------- stat tiles (KPIs, comparativo) ---------- */ .m-stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .m-stat { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: var(--m-r-sm); padding: 14px 16px; position: relative; overflow: hidden; } .m-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--m-line-2); border-radius: 0 3px 3px 0; } .m-stat--acc::before { background: var(--m-acc-rail); } .m-stat--gold::before { background: var(--m-gold-rail); } .m-stat--red::before { background: var(--m-red-rail); } .m-stat--blue::before { background: var(--m-blue-rail); } .m-stat .m-v { font-family: var(--m-disp); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; color: var(--m-ink); } .m-stat .m-k { font-size: .74rem; color: var(--m-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .m-stat .m-sub { font-size: .7rem; color: var(--m-muted); margin-top: 4px; line-height: 1.3; } .m-stat .m-delta { font-family: var(--m-disp); font-size: .86rem; font-weight: 700; margin-left: 8px; vertical-align: 2px; } .m-stat .m-delta--up { color: var(--acc-2); } .m-stat .m-delta--down { color: var(--m-red); } .m-stat[role=button] { cursor: pointer; transition: transform .18s, border-color .18s; } .m-stat[role=button]:hover { border-color: var(--m-line-2); transform: translateY(-2px); } /* ---------- scoreboard ---------- */ .m-sb { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; } .m-sb-panel { position: relative; } .m-ring-col { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; } .m-ring-wrap { position: relative; width: 170px; height: 170px; flex-shrink: 0; cursor: default; transition: transform .3s cubic-bezier(.2, .8, .2, 1); display: flex; align-items: center; justify-content: center; } .m-ring-wrap::before { content: ""; position: absolute; inset: -24px; border-radius: 50%; background: radial-gradient(circle, var(--ring-glow, color-mix(in srgb, var(--m-gold) 22%, transparent)), transparent 65%); pointer-events: none; transition: opacity .3s; opacity: .8; } .m-ring-wrap:hover { transform: scale(1.05); } .m-ring-wrap:hover::before { opacity: 1; } .m-score-band { font-family: var(--m-disp); font-weight: 700; font-size: .74rem; letter-spacing: .05em; border-radius: 999px; padding: 5px 16px; white-space: nowrap; } .m-band--ok { background: var(--acc-dim); color: var(--acc-2); } .m-band--meio { background: var(--m-gold-dim); color: var(--m-gold-2); } .m-band--baixo { background: var(--m-red-dim); color: var(--m-red); } .m-band--insuf { background: var(--m-bg-2); color: var(--m-ink-2); } .m-nick { font-family: var(--m-disp); font-weight: 700; font-size: 1.05rem; color: var(--m-ink); margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; cursor: default; } .m-nick b { color: var(--acc-2); letter-spacing: .01em; } .m-arche { font-family: var(--m-disp); font-weight: 700; font-size: clamp(1.35rem, 4vw, 1.85rem); color: var(--m-gold-2); line-height: 1.1; } .m-arche-sub { color: var(--m-muted); font-size: .9rem; margin-top: 6px; } .m-tier-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .m-tier-big { font-family: var(--m-disp); font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 8px; background: var(--acc-dim); color: var(--acc-2); border-radius: 999px; padding: 7px 16px; } .m-tier-next { font-size: .8rem; color: var(--m-muted); } .m-tier-prog { height: 8px; border-radius: 6px; background: var(--m-bg-2); overflow: hidden; margin-top: 8px; } .m-tier-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc-2)); border-radius: 6px; width: var(--w, 0%); } .m-share-btn { position: absolute; top: 14px; right: 14px; z-index: 3; font-family: var(--m-disp); font-weight: 700; font-size: .78rem; color: var(--m-gold-2); background: var(--m-gold-dim); border: 1px solid color-mix(in srgb, var(--m-gold) 42%, transparent); border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: transform .15s, background .15s; } .m-share-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--m-gold) 24%, transparent); } /* ---------- radar (.m-rx-*) — anéis de escada, alvo tracejado, gap, ponto pulsante ---------- */ .m-rx-ctl { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; } .m-rx-ctl-l { font-family: var(--m-disp); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); } .m-rx-chips { display: inline-flex; gap: 4px; background: var(--m-bg-2); border: 1px solid var(--m-line); border-radius: 10px; padding: 4px; flex-wrap: wrap; } .m-rx-chips button { font-family: var(--m-disp); font-weight: 600; font-size: .78rem; color: var(--m-muted); background: none; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; transition: background .18s, color .18s; } .m-rx-chips button:hover { color: var(--m-ink); } .m-rx-chips button.on { background: var(--m-gold-dim); color: var(--m-gold-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-gold-2) 28%, transparent); } .m-rx { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; } .m-rx-plot { position: relative; isolation: isolate; } .m-rx-plot::before { content: ''; position: absolute; inset: 2% 0 14%; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(color-mix(in srgb, var(--acc-2) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--acc-2) 55%, transparent) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 12%, transparent 62%); mask-image: radial-gradient(circle at 50% 46%, #000 12%, transparent 62%); } .m-rx-svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; font-family: var(--m-disp); } .m-rx-t-lbl { font-family: var(--m-disp); font-size: 15px; font-weight: 600; fill: var(--m-ink-2); transition: fill .18s; } .m-rx-t-tier { font-family: var(--m-disp); font-size: 12.5px; font-weight: 500; fill: var(--m-muted); } .m-rx-t-chip { font-family: var(--m-disp); font-size: 12.5px; font-weight: 700; letter-spacing: .015em; } .m-rx-s0 { stop-color: var(--acc); stop-opacity: .04; } .m-rx-s1 { stop-color: var(--acc); stop-opacity: .19; } .m-rx-s2 { stop-color: var(--acc-2); stop-opacity: .42; } .m-rx-a0 { stop-color: var(--acc-2); stop-opacity: .09; } .m-rx-a1 { stop-color: var(--acc-2); stop-opacity: .028; } .m-rx-a2 { stop-color: var(--acc-2); stop-opacity: 0; } .m-rx-ring { fill: none; stroke: var(--m-ink); stroke-opacity: var(--o, .06); stroke-width: 1; } .m-rx-ring.is-hoje { stroke: var(--m-ink-2); stroke-opacity: .30; stroke-width: 1.5; } .m-rx-spoke { stroke: var(--m-ink); stroke-opacity: .055; stroke-width: 1; } .m-rx-core { fill: var(--m-line-2); } .m-rx-ring-alvo .halo { fill: none; stroke: var(--m-gold-2); stroke-opacity: .14; stroke-width: 8; stroke-linejoin: round; } .m-rx-ring-alvo .linha { fill: none; stroke: var(--m-gold-2); stroke-width: 2; stroke-dasharray: 7 5; stroke-linejoin: round; } .m-rx-gap { stroke: var(--m-red); stroke-opacity: .42; stroke-width: 2.5; stroke-linecap: round; } .m-rx-shape .halo { fill: none; stroke: var(--acc-2); stroke-opacity: .13; stroke-width: 8; stroke-linejoin: round; } .m-rx-shape .corpo { fill: url(#mRxFill); stroke: var(--acc-2); stroke-width: 2.5; stroke-linejoin: round; } .m-rx-dot { fill: var(--acc-2); stroke: var(--m-bg); stroke-width: 2; pointer-events: none; } .m-rx-dot.is-baixo { fill: var(--m-red); } .m-rx-alert { fill: none; stroke: var(--m-red); stroke-width: 1.5; stroke-opacity: .5; pointer-events: none; animation: mRxAlert 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); } .m-rx-hit { cursor: pointer; } .m-rx-chip rect { fill: var(--m-bg); fill-opacity: .94; stroke-width: 1; } .m-rx-chip.is-alvo rect { stroke: var(--m-gold-2); stroke-opacity: .55; } .m-rx-chip.is-alvo text { fill: var(--m-gold-2); } .m-rx-chip.is-hoje rect { stroke: var(--m-line-2); } .m-rx-chip.is-hoje text { fill: var(--m-ink-2); } .m-rx-lead { stroke-width: 1; stroke-dasharray: 2 3; } .m-rx-lead.is-alvo { stroke: var(--m-gold-2); stroke-opacity: .5; } .m-rx-lead.is-hoje { stroke: var(--m-line-2); } .m-rx-lbl { cursor: pointer; } .m-rx-lbl.is-baixo .m-rx-t-lbl { fill: var(--m-red); } .m-rx-lbl:hover .m-rx-t-lbl { fill: var(--m-ink); } .m-rx-lbl:hover .m-rx-t-tier { fill: var(--m-ink-2); } @keyframes mRxFade { from { opacity: 0; } to { opacity: 1; } } @keyframes mRxGrow { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } } @keyframes mRxPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } } @keyframes mRxAlert { 0%, 100% { stroke-opacity: .5; } 50% { stroke-opacity: .12; } } .m-rx-amb, .m-rx-grid { animation: mRxFade .55s ease both; } .m-rx-ring-alvo { transform-origin: 200px 200px; animation: mRxGrow .6s cubic-bezier(.2, .7, .3, 1) .05s both; } .m-rx-shape { transform-origin: 200px 200px; animation: mRxGrow .75s cubic-bezier(.2, .7, .3, 1) .16s both; } .m-rx-gaps { animation: mRxFade .5s ease .55s both; } .m-rx-chip, .m-rx-lead { animation: mRxFade .5s ease .6s both; } .m-rx-dot, .m-rx-alert, .m-rx-hit { transform-box: fill-box; transform-origin: center; } .m-rx-dot { animation: mRxPop .4s cubic-bezier(.2, 1.4, .4, 1) var(--d, .34s) both; } .m-rx-lbl { animation: mRxFade .5s ease var(--d, .4s) both; } @media (prefers-reduced-motion: reduce) { .m-rx-amb, .m-rx-grid, .m-rx-ring-alvo, .m-rx-shape, .m-rx-gaps, .m-rx-chip, .m-rx-lead, .m-rx-dot, .m-rx-lbl { animation: none !important; opacity: 1; transform: none; } .m-rx-alert { animation: none !important; } } .m-rx-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--m-ink-2); margin-top: 10px; justify-content: center; align-items: center; } .m-rx-leg i { display: inline-block; width: 16px; height: 0; vertical-align: 4px; margin-right: 6px; border-top: 3px solid; } .m-rx-leg i.l-voce { border-color: var(--acc-2); } .m-rx-leg i.l-alvo { border-color: var(--m-gold-2); border-top-style: dashed; } /* painel-resumo sob o radar (X de N pilares abaixo — comece por ) */ .m-rx-resumo { margin-top: 14px; background: var(--m-panel); border: 1px solid color-mix(in srgb, var(--m-gold-2) 30%, transparent); border-left: 3px solid var(--m-gold-2); border-radius: 12px; padding: 14px 16px; } .m-rx-resumo--ok { border-color: color-mix(in srgb, var(--acc-2) 35%, transparent); border-left-color: var(--acc-2); } .m-rx-resumo > b { font-family: var(--m-disp); font-size: .95rem; display: block; } .m-rx-resumo p { font-size: .86rem; color: var(--m-ink-2); margin: 6px 0 10px; } .m-rx-resumo .m-btn { width: auto; display: inline-block; } /* ---------- fila tri-state (.m-fl-*) — lei 3: vermelho abaixo · neutro no alvo · verde acima; DOURADO = só a marca do alvo. Layout v2 do xadrez: valor na ponta da barra, glifos da escada nos centros dos segmentos, urgência decrescente (u1/u2). ---------- */ .m-fl-head { font-size: .84rem; color: var(--m-ink-2); background: var(--m-bg-2); border: 1px dashed color-mix(in srgb, var(--m-gold-2) 40%, transparent); border-radius: 10px; padding: 9px 13px; margin-bottom: 6px; } .m-fl-head b { color: var(--m-gold-2); font-family: var(--m-disp); } .m-fl-row { display: grid; width: 100%; gap: 4px 12px; align-items: center; text-align: left; grid-template-columns: 20px minmax(0, 1fr) auto 14px; grid-template-areas: "n nome st ch" ". bar bar bar" ". meta meta meta"; background: none; border: none; border-bottom: 1px solid var(--m-line); padding: 13px 2px 15px; cursor: pointer; color: inherit; font: inherit; } .m-fl-row:last-child { border-bottom: none; } .m-fl-row:hover { background: rgba(255, 255, 255, .022); } .m-fl-n { grid-area: n; font-family: var(--m-disp); font-weight: 700; font-size: .78rem; color: var(--m-muted); text-align: right; } .m-fl-nome { grid-area: nome; font-family: var(--m-disp); font-weight: 600; font-size: .98rem; min-width: 0; } .m-fl-nome small { display: block; font-family: var(--m-body); font-weight: 400; font-size: .76rem; color: var(--m-muted); margin-top: 2px; } .m-fl-ch { grid-area: ch; color: var(--m-muted); font-size: 1.1rem; justify-self: end; } .m-fl-row:hover .m-fl-ch { color: var(--m-ink-2); } .m-fl-st { grid-area: st; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--m-disp); font-weight: 700; font-size: .72rem; } .m-fl-now { color: var(--m-ink-2); background: var(--m-bg-2); border: 1px solid var(--m-line-2); border-radius: 999px; padding: 3px 9px; } .m-fl-bar { grid-area: bar; position: relative; height: 10px; border-radius: 6px; margin-top: 26px; overflow: visible; background: var(--m-bg-2); border: 1px solid var(--m-line); background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg, 16.666%) - 1px), var(--m-line) calc(var(--seg, 16.666%) - 1px) var(--seg, 16.666%)); } .m-fl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; width: var(--w, 0%); } .m-fl-ab .m-fl-fill { background: var(--m-red-fill); } .m-fl-no .m-fl-fill { background: var(--m-ink-2); } .m-fl-ac .m-fl-fill { background: var(--m-acc-fill); } /* urgência decrescente: só os 2 primeiros abaixo do alvo gritam */ .m-fl-u2 .m-fl-fill { opacity: .5; } .m-fl-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--m-gold-2); border-radius: 2px; z-index: 2; left: var(--w, 0%); } .m-fl-mark::after { content: ''; position: absolute; left: -3px; top: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--m-gold-2); } .m-fl-glifo { position: absolute; top: 50%; transform: translate(-50%, -50%); font-style: normal; text-decoration: none; font-size: .62rem; color: color-mix(in srgb, var(--m-ink) 30%, transparent); pointer-events: none; line-height: 1; left: var(--x, 0%); } .m-fl-glifo.on-fill { color: color-mix(in srgb, var(--m-bg) 62%, transparent); } .m-fl-tip { position: absolute; top: -21px; transform: translateX(-50%); font-style: normal; font-family: var(--m-disp); font-weight: 700; font-size: .86rem; color: var(--m-ink); white-space: nowrap; line-height: 1; left: var(--x, 0%); } .m-fl-tip small { font-family: var(--m-body); font-weight: 400; font-size: .66rem; color: var(--m-muted); margin-left: 5px; } .m-fl-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; margin-top: 9px; font-size: .76rem; line-height: 1.35; color: var(--m-muted); } .m-fl-flag { font-family: var(--m-disp); font-weight: 700; font-size: .72rem; letter-spacing: .02em; white-space: nowrap; } .m-fl-flag.ab, .m-fl-flag.u1 { color: var(--m-red); } .m-fl-flag.u2 { color: var(--m-red); opacity: .72; } .m-fl-flag.no { color: var(--m-ink-2); } .m-fl-flag.ac { color: var(--acc-2); } .m-fl-sep { color: var(--m-line-2); } .m-fl-falta { color: var(--m-muted); } .m-fl-falta b { color: var(--m-gold-2); font-weight: 700; } .m-fl-prox { color: var(--m-muted); } /* prosa do furo anexada à linha (uma hierarquia só) */ .m-fl-prosa { margin: -4px 0 10px 32px; background: var(--m-panel); border: 1px solid color-mix(in srgb, var(--m-red) 28%, transparent); border-left: 3px solid var(--m-red); border-radius: 0 12px 12px 12px; padding: 13px 16px; } .m-fl-selo { display: inline-block; font-family: var(--m-disp); font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; background: var(--m-red-dim); color: var(--m-red); border-radius: 999px; padding: 3px 10px; margin-bottom: 7px; } .m-fl-prosa b { font-family: var(--m-disp); font-size: .95rem; display: block; } .m-fl-prosa p { font-size: .86rem; color: var(--m-ink-2); margin: 5px 0 8px; } .m-fl-prosa .m-plano-link { font-size: .8rem; } /* ---------- nota do pilar (.m-np-*) — header de aba, estado insuf de 1ª classe ---------- */ .m-np-panel { margin-bottom: 18px; } .m-np { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; } .m-np-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; } .m-np-ring::before { content: ""; position: absolute; top: -14px; left: 50%; width: 144px; height: 144px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, var(--ring-glow, transparent), transparent 65%); pointer-events: none; } .m-np-ring svg { display: block; position: relative; } .m-np-ring-vazio { width: 116px; height: 116px; border-radius: 50%; border: 2px dashed var(--m-line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--m-disp); font-size: 2.2rem; color: var(--m-muted); } .m-np-band { font-family: var(--m-disp); font-weight: 700; font-size: .66rem; letter-spacing: .05em; border-radius: 999px; padding: 4px 13px; white-space: nowrap; } .m-np-h { font-family: var(--m-disp); font-weight: 700; font-size: 1.16rem; margin: 5px 0 9px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .m-np-tier { font-family: var(--m-disp); font-weight: 600; font-size: .76rem; border: 1px solid color-mix(in srgb, var(--c, var(--m-muted)) 45%, transparent); border-radius: 999px; padding: 3px 11px; color: var(--c, var(--m-ink-2)); background: color-mix(in srgb, var(--c, var(--m-muted)) 14%, transparent); } /* mesmo motivo do .m-pilar-chip: neutraliza o --c inline por-degrau (sem estado "abaixo" alternativo aqui, então sempre neutro). */ .m-np-tier { --c: var(--m-ink-2) !important; } .m-np-sig { font-size: .88rem; line-height: 1.55; color: var(--m-ink-2); margin: 0; } .m-np-falta { margin: 11px 0 0; font-size: .85rem; line-height: 1.5; background: var(--m-raise); border: 1px solid var(--m-line); border-left: 3px solid var(--m-gold-2); border-radius: 8px; padding: 9px 12px; } .m-np-falta--ok { border-left-color: var(--acc-2); } /* ---------- zoneBar (.m-zb-*) — zonas da escada + dot você + tick meta ---------- */ .m-zb { position: relative; padding: 16px 0 6px; } .m-zb-track { display: flex; height: 16px; border-radius: 8px; overflow: hidden; border: 1px solid var(--m-line); } .m-zb-zone { position: relative; height: 100%; width: var(--w, 0%); background: var(--c, var(--m-bg-2)); } .m-zb-zone span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--m-disp); font-weight: 700; font-size: .56rem; letter-spacing: .05em; color: rgba(255, 255, 255, .68); text-transform: uppercase; } /* tier é ordem, não categoria (harmonização 04/08 — reprovação "arco-íris" na barra de tier da aba Cabeça): neutraliza o --c inline por-degrau (6 hexs soltos vindos da página do jogo) por uma escala neutra em 2 tons, só pra separar os segmentos. Quem diz "onde você está" é o --m-zb-dot (halo --acc-2) e a meta é o --m-zb-tick (dourado) — os dois já plotados por cima; a zona não precisa carregar semântica. */ /* TIER = ORDEM. Zebrado par/ímpar tirou o arco-íris mas matou a direção: os 6 degraus ficaram iguais e não dava para ver para que lado é "melhor" (04/08). Agora é uma RAMPA monocromática: cada degrau um passo mais claro que o anterior. Uma cor só, seis intensidades — progressão legível sem poluir. */ .m-zb-zone:nth-child(1) { --c: color-mix(in srgb, var(--m-ink) 7%, var(--m-bg-2)) !important; } .m-zb-zone:nth-child(2) { --c: color-mix(in srgb, var(--m-ink) 12%, var(--m-bg-2)) !important; } .m-zb-zone:nth-child(3) { --c: color-mix(in srgb, var(--m-ink) 17%, var(--m-bg-2)) !important; } .m-zb-zone:nth-child(4) { --c: color-mix(in srgb, var(--m-ink) 22%, var(--m-bg-2)) !important; } .m-zb-zone:nth-child(5) { --c: color-mix(in srgb, var(--m-ink) 27%, var(--m-bg-2)) !important; } .m-zb-zone:nth-child(6) { --c: color-mix(in srgb, var(--m-ink) 32%, var(--m-bg-2)) !important; } .m-zb-zone:nth-child(n+7) { --c: color-mix(in srgb, var(--m-ink) 37%, var(--m-bg-2)) !important; } .m-zb-dot { position: absolute; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--m-ink); border: 2.5px solid var(--m-bg); box-shadow: 0 0 0 2px var(--acc-2), 0 2px 8px rgba(0, 0, 0, .6); transform: translateX(-50%); transition: left .8s cubic-bezier(.2, .8, .2, 1); left: var(--x, 0%); } .m-zb-dot::after { content: attr(data-l); position: absolute; top: -19px; left: 50%; transform: translateX(-50%); font-family: var(--m-disp); font-weight: 700; font-size: .62rem; color: var(--acc-2); white-space: nowrap; } .m-zb-tick { position: absolute; top: 12px; width: 3px; height: 22px; background: var(--m-gold-2); border-radius: 2px; transform: translateX(-50%); left: var(--x, 0%); } .m-zb-tick::after { content: attr(data-l); position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: .6rem; color: var(--m-gold-2); font-weight: 700; white-space: nowrap; } .m-zb-metric { margin: 22px 0 8px; padding-bottom: 14px; border-bottom: 1px dashed var(--m-line); } .m-zb-metric:last-of-type { border-bottom: none; } .m-zb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .m-zb-head b { font-family: var(--m-disp); font-size: .98rem; } .m-zb-tit { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; } .m-zb-val { font-family: var(--m-disp); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--c, var(--m-ink)); } .m-zb-val--abaixo { --c: var(--m-red); } /* mesmo motivo do .m-pilar-chip acima: sem o --c inline por-degrau; :not(--abaixo) preserva o vermelho (que já vem por classe, não por inline). */ .m-zb-val:not(.m-zb-val--abaixo) { --c: var(--acc-2) !important; } .m-zb-meta-line { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; color: var(--m-muted); margin-top: 8px; flex-wrap: wrap; } .m-zb-meta-line b { color: var(--m-gold-2); font-variant-numeric: tabular-nums; } .m-zb-note { font-family: var(--m-disp); font-weight: 600; font-size: .68rem; letter-spacing: .02em; color: var(--m-muted); background: var(--m-bg-2); border: 1px solid var(--m-line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .m-zb-rail-labels { display: flex; justify-content: space-between; font-family: var(--m-disp); font-weight: 700; font-size: .66rem; letter-spacing: .03em; color: var(--acc-2); margin: 0 0 2px; } .m-zb-rail-labels span:last-child { color: var(--m-muted); } .m-zb-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .76rem; color: var(--m-ink-2); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--m-line); } .m-zb-legend .sw { display: inline-flex; align-items: center; gap: 6px; } .m-zb-legend .dot-you { width: 13px; height: 13px; border-radius: 50%; background: var(--m-ink); box-shadow: 0 0 0 2px var(--acc-2); } .m-zb-legend .tick-meta { width: 3px; height: 14px; background: var(--m-gold-2); border-radius: 2px; } /* ---------- cmp: você + marca DOURADA do alvo na MESMA trilha (1 linha) ---------- */ .m-cmp-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; margin: 20px 0 14px; } .m-cmp-lbl { font-size: .85rem; color: var(--m-ink-2); } .m-cmp-lbl small { display: block; font-size: .72rem; color: var(--m-muted); } .m-cmp-bars { position: relative; } .m-cmp-bars .track { height: 24px; border-radius: 7px; background: var(--m-bg-2); position: relative; overflow: hidden; } .m-cmp-bars .you { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 7px; display: flex; align-items: center; padding-left: 9px; font-family: var(--m-disp); font-weight: 700; font-size: .78rem; color: var(--m-bg); width: var(--w, 0%); background: var(--m-ink-2); } .m-cmp-ab .you { background: var(--m-red-fill); } .m-cmp-ac .you { background: var(--m-acc-fill); } .m-cmp-bars .mark { position: absolute; top: -4px; bottom: -4px; width: 2.5px; background: var(--m-gold-2); left: var(--x, 0%); } .m-cmp-bars .mark::after { content: attr(data-l); position: absolute; top: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .66rem; color: var(--m-gold-2); font-weight: 600; } /* ---------- bar / parDuplo ---------- */ .m-bar-row { display: grid; grid-template-columns: 1fr; gap: 9px; } .m-bar-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: .88rem; } .m-bar-item .lbl { color: var(--m-ink-2); } .m-bar-item .lbl small { color: var(--m-muted); font-size: .82em; } .m-bar-item .val { font-family: var(--m-disp); font-weight: 700; font-variant-numeric: tabular-nums; } .m-bar-item .val.muted { color: var(--m-muted); font-family: var(--m-body); font-weight: 500; font-size: .82rem; } .m-bar-track { grid-column: 1/-1; display: block; height: 9px; border-radius: 6px; background: var(--m-bg-2); overflow: hidden; } /* PRINCÍPIO (04/08, terceira rodada com o dono: "muito poluído, deixe mais neutro, mais objetivo, mais fácil de ler"): a BARRA é geometria, não semáforo. Uma lista de 5 finais com 5 barras verdes e vermelhas vira uma parede de cor onde nada se destaca. Então: preenchimento SEMPRE neutro, e o estado (bom/ruim) fica no NÚMERO, que é pequeno e é onde o olho já vai. Cor forte volta a ser exceção — marcador de meta e o furo #1 —, não o padrão de cada linha. */ .m-bar-fill { display: block; height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--m-ink) 34%, var(--m-bg-2)); transition: width .8s cubic-bezier(.2, .8, .2, 1); width: var(--w, 0%); } .m-bar-fill.is-red, .m-bar-fill.is-gold { background: color-mix(in srgb, var(--m-ink) 34%, var(--m-bg-2)); } /* BRANCAS × PRETAS não é estado, é categoria — e usava o verde do "bom" contra o azul da "tag neutra" (colisão apontada pelo dono em 04/08: a mesma cor com dois significados na mesma tela). Vira a metáfora do próprio jogo: peça clara × peça escura, em neutros. Nenhum dos dois lados é bom ou ruim. */ .m-bar-fill.is-blue { background: var(--m-blue); } .m-bar-row .m-bar-fill { background: color-mix(in srgb, var(--m-ink) 62%, var(--m-bg-2)); } .m-bar-row .m-bar-fill.is-blue { background: color-mix(in srgb, var(--m-ink) 26%, var(--m-bg-2)); } .m-bar-fill.is-neutro { background: var(--m-ink-2); } .m-par-tit { font-size: .88rem; margin-bottom: 2px; } .m-par-tit b { color: var(--m-ink); } /* ---------- mensagens: insight (bom) / alerta / insuf (lei 5) ---------- */ .m-insight { background: var(--acc-dim); border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent); border-radius: 11px; padding: 13px 15px; font-size: .88rem; color: var(--m-ink-2); margin-top: 14px; } .m-insight b { color: var(--acc-2); } .m-alerta { background: var(--m-gold-dim); border: 1px solid color-mix(in srgb, var(--m-gold-2) 30%, transparent); border-radius: 11px; padding: 13px 15px; font-size: .88rem; color: var(--m-ink-2); margin-top: 14px; } .m-alerta b { color: var(--m-gold-2); } .m-insuf { background: var(--m-bg-2); border: 1px dashed var(--m-line-2); border-radius: 11px; padding: 13px 15px; font-size: .88rem; color: var(--m-ink-2); margin-top: 14px; } .m-insuf b { color: var(--m-ink); } /* ---------- âncora do furo + CTA (lei 6) ---------- */ .m-ancora { margin-top: 16px; background: var(--m-panel); border: 1px solid color-mix(in srgb, var(--m-red) 28%, transparent); border-left: 3px solid var(--m-red); border-radius: 0 12px 12px 12px; padding: 13px 16px; } .m-ancora .m-fl-selo { margin-bottom: 7px; } .m-ancora b { font-family: var(--m-disp); font-size: .95rem; display: block; } .m-ancora p { font-size: .86rem; color: var(--m-ink-2); margin: 5px 0 0; } .m-cta-treino { max-width: 520px; margin: 16px auto 0; display: block; } /* ---------- sticky CTA ---------- */ .m-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--m-bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--m-line); display: none; text-align: center; } .m-sticky.on { display: block; } .m-sticky .m-btn { display: flex; max-width: 640px; margin: 0 auto; } /* ---------- lockpanel skeleton (sem vazar conteúdo) ---------- */ .m-lock { position: relative; border: 1px solid var(--m-line); border-radius: var(--m-r); overflow: hidden; margin-top: 14px; } .m-lock-fake { filter: blur(7px) saturate(.7); opacity: .55; pointer-events: none; user-select: none; padding: 20px; } .m-lock-row { display: flex; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--m-line); } .m-lock-row b { color: var(--acc-2); font-family: var(--m-disp); font-size: .82rem; white-space: nowrap; } .m-lock-bar { height: 12px; border-radius: 6px; background: var(--m-raise); width: var(--w, 50%); } .m-lock-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--m-bg) 25%, transparent), color-mix(in srgb, var(--m-bg) 72%, transparent)); text-align: center; padding: 20px; } .m-lock-veil .lk { font-size: 1.6rem; } .m-lock-veil b { font-family: var(--m-disp); font-size: 1.02rem; } .m-lock-veil p { font-size: .82rem; color: var(--m-ink-2); max-width: 36ch; } .m-lock-veil .m-btn { max-width: 400px; } /* painel sem linhas falsas (dias:0): o veil entra no fluxo e dá altura ao bloco */ .m-lock--flat { overflow: visible; } .m-lock--flat .m-lock-veil { position: static; background: none; padding: 22px 20px; } .m-price-strike { color: var(--m-muted); text-decoration: line-through; font-size: 1rem; } .m-price-now { font-family: var(--m-disp); font-weight: 700; font-size: 2rem; color: var(--acc-2); letter-spacing: -.02em; } /* ---------- abas 1 linha (padrão compacto 30/07) ---------- */ .m-tabs-label { font-family: var(--m-disp); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--m-muted); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; } .m-tabs-label::after { content: ""; flex: 1; height: 1px; background: var(--m-line); } .m-tabs { position: sticky; top: 52px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: color-mix(in srgb, var(--m-bg) 96%, transparent); backdrop-filter: blur(10px); padding: 7px 20px 8px; margin: 0 -20px 14px; border-bottom: 1px solid var(--m-line); } .m-tabs button { font-family: var(--m-disp); font-weight: 600; font-size: .78rem; line-height: 1.1; color: var(--m-ink-2); background: var(--m-panel); border: 1.5px solid var(--m-line-2); border-radius: 10px; padding: 7px 12px; min-height: 34px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .15s, background .15s, color .15s, border-color .15s, box-shadow .15s; display: inline-flex; gap: 5px; align-items: center; justify-content: center; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); flex: 1 1 auto; } .m-tabs button:hover { border-color: var(--acc); color: var(--m-ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .25), 0 8px 18px color-mix(in srgb, var(--acc) 15%, transparent); } .m-tabs button.on { background: linear-gradient(180deg, var(--acc-2), var(--acc)); color: var(--acc-contrast); border-color: transparent; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 8px 20px color-mix(in srgb, var(--acc) 35%, transparent); } /* a aba do plano é o produto pago: dourado */ .m-tabs button.plano { background: linear-gradient(180deg, color-mix(in srgb, var(--m-gold) 22%, transparent), color-mix(in srgb, var(--m-gold) 10%, transparent)); border-color: var(--m-gold); color: var(--m-gold-2); box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 14px color-mix(in srgb, var(--m-gold) 18%, transparent); } .m-tabs button.plano:hover { border-color: var(--m-gold-2); color: var(--m-gold-2); box-shadow: 0 4px 0 rgba(0, 0, 0, .25), 0 8px 20px color-mix(in srgb, var(--m-gold) 30%, transparent); } .m-tabs button.plano.on { background: linear-gradient(180deg, var(--m-gold-2), var(--m-gold)); color: color-mix(in srgb, var(--m-gold) 22%, #0d0800); border-color: transparent; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 8px 20px color-mix(in srgb, var(--m-gold) 42%, transparent); } .m-tabs button.locked { opacity: .75; } .m-tabs button.locked::after { content: "🔒"; font-size: .7rem; margin-left: 2px; } .m-tabpanel { display: none; } .m-tabpanel.on { display: block; animation: mFadeup .35s ease; scroll-margin-top: 190px; } @keyframes mFadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- tooltip singleton (lei 8: mouse E toque) ---------- */ .m-tt { position: fixed; z-index: 9999; pointer-events: none; background: color-mix(in srgb, var(--m-bg-2) 98%, transparent); border: 1px solid var(--m-line-2); border-radius: 11px; padding: 12px 14px; max-width: 260px; box-shadow: 0 10px 34px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .12s; font-size: .8rem; color: var(--m-ink-2); line-height: 1.5; } .m-tt.on { opacity: 1; } .m-tt b { color: var(--m-ink); display: block; font-family: var(--m-disp); margin-bottom: 3px; } [data-tt] { cursor: help; } /* ---------- plano 14 dias: acordeão + acompanhamento ---------- */ .m-pd { border: 1px solid var(--m-line); border-radius: var(--m-r-sm); margin-bottom: 9px; background: var(--m-bg-2); overflow: hidden; } .m-pd summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 13px 16px; transition: background .15s; } .m-pd summary::-webkit-details-marker { display: none; } .m-pd summary:hover { background: var(--m-panel-2); } .m-pd-dia { font-family: var(--m-disp); font-weight: 700; font-size: .78rem; color: var(--acc-2); } .m-pd--rest .m-pd-dia { color: var(--m-gold-2); } .m-pd-t { font-family: var(--m-disp); font-weight: 600; font-size: .94rem; } .m-pd-foco { font-size: .7rem; color: var(--m-muted); margin-top: 1px; } .m-pd-arrow { color: var(--m-muted); transition: transform .25s; font-size: .8rem; } .m-pd[open] .m-pd-arrow { transform: rotate(90deg); } .m-pd-body { padding: 2px 16px 16px 84px; } .m-pd-body li { font-size: .87rem; color: var(--m-ink-2); padding: 4px 0; list-style: none; position: relative; padding-left: 20px; } .m-pd-body li::before { content: "→"; position: absolute; left: 0; color: var(--acc-2); } .m-pd-rec { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-family: var(--m-disp); font-weight: 600; font-size: .8rem; color: var(--acc-contrast); background: var(--acc-2); border-radius: 999px; padding: 7px 14px; text-decoration: none; transition: transform .15s; } .m-pd-rec:hover { transform: translateY(-2px); } .m-pd-rec--sec { background: none; color: var(--acc-2); border: 1px solid var(--m-line-2); } .m-p14-head { margin-bottom: 16px; } .m-p14-range { text-align: center; font-family: var(--m-disp); font-weight: 600; font-size: .78rem; color: var(--m-ink-2); margin-top: 2px; } .m-p14-prog { max-width: 420px; margin: 0 auto; } .m-p14-prog .m-bar-item { gap: 8px 12px; } .m-p14-prog .m-bar-item .lbl { font-family: var(--m-disp); font-weight: 600; color: var(--m-ink); font-size: .9rem; } .m-p14-prog .m-bar-item .val { font-size: 1.05rem; color: var(--m-gold-2); } .m-p14-prog .m-bar-track { height: 16px; background: var(--m-panel-2); border: 1px solid var(--m-line-2); border-radius: 9px; } .m-p14-prog .m-bar-fill { background: linear-gradient(90deg, var(--m-gold-2), var(--m-gold)); box-shadow: 0 0 12px color-mix(in srgb, var(--m-gold) 40%, transparent); } .m-p14-prog .m-bar-fill.is-acc { background: linear-gradient(90deg, var(--acc-2), var(--acc)); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 40%, transparent); } .m-p14-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .m-p14-chip { font-family: var(--m-disp); font-weight: 700; font-size: .8rem; color: var(--m-ink); background: var(--m-panel); border: 1px solid color-mix(in srgb, var(--m-gold-2) 35%, transparent); border-radius: 999px; padding: 7px 14px; } .m-p14-chip--streak { color: var(--m-gold-2); background: var(--m-gold-dim); } .m-p14-ctx { display: block; font-family: var(--m-disp); font-weight: 600; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--m-muted); margin-bottom: 2px; } .m-p14-selo { color: var(--m-gold-2); } .m-p14-badge-done { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--acc-2); color: var(--acc-contrast); font-size: .6rem; font-weight: 700; margin-left: 4px; vertical-align: 2px; } .m-pd.m-p14-done { border-color: color-mix(in srgb, var(--acc-2) 35%, transparent); } .m-p14-acao { display: inline-flex; align-items: center; gap: 7px; margin: 10px 10px 0 0; font-family: var(--m-disp); font-weight: 700; font-size: .84rem; color: color-mix(in srgb, var(--m-gold) 22%, #0d0800); background: linear-gradient(180deg, var(--m-gold-2), var(--m-gold)); border-radius: 999px; padding: 9px 16px; text-decoration: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .22); transition: transform .15s; } .m-p14-acao:hover { transform: translateY(-2px); } .m-p14-meta { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-panel-2); } .m-p14-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .m-p14-meta-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--m-ink-2); } .m-p14-meta-input { width: 60px; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--m-line-2); background: var(--m-bg-2); color: var(--m-ink); font-family: var(--m-disp); font-weight: 600; text-align: center; } .m-p14-meta-btn { font-family: var(--m-disp); font-weight: 700; font-size: .78rem; color: var(--acc-contrast); background: var(--acc-2); border: none; border-radius: 999px; padding: 7px 14px; cursor: pointer; } .m-p14-meta-btn:hover { filter: brightness(1.08); } .m-p14-meta-status { font-size: .78rem; color: var(--acc-2); font-weight: 600; } .m-p14-meta-micro { display: block; font-size: .72rem; color: var(--m-muted); margin-top: 6px; font-weight: 400; } .m-p14-fecho { display: flex; gap: 10px 22px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--m-line); } .m-p14-done-chk { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; } .m-p14-done-chk input { width: 16px; height: 16px; accent-color: var(--acc-2); } .m-p14-done-chk--primary { font-family: var(--m-disp); font-weight: 700; font-size: 1rem; color: var(--m-ink); gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--m-line-2); border-radius: 999px; background: var(--m-panel-2); } .m-p14-done-chk--primary input { width: 20px; height: 20px; } .m-pd.m-p14-done .m-p14-done-chk--primary { border-color: color-mix(in srgb, var(--acc-2) 40%, transparent); background: var(--acc-dim); color: var(--acc-2); } .m-p14-rating-lbl { display: inline-flex; gap: 10px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--m-ink-2); white-space: nowrap; margin-left: auto; } .m-p14-rating-input { width: 112px; background: var(--m-bg-2); border: 1.5px solid var(--m-line-2); border-radius: 8px; color: var(--m-ink); font-family: var(--m-disp); font-weight: 700; font-size: .95rem; padding: 8px 10px; text-align: center; transition: border-color .15s, box-shadow .15s; } .m-p14-rating-input:focus { outline: 2px solid var(--acc); outline-offset: 1px; } .m-p14-rating-input.has-val { border-color: var(--m-gold-2); color: var(--m-gold-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-gold-2) 25%, transparent); } .m-p14-recap { margin-top: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--m-gold) 35%, transparent); border-radius: 12px; background: var(--m-gold-dim); } .m-p14-recap h4 { font-family: var(--m-disp); font-size: .92rem; color: var(--m-gold-2); margin: 0 0 10px; } .m-p14-recap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-bottom: 10px; } .m-p14-recap-grid div { text-align: center; } .m-p14-recap-grid b { display: block; font-family: var(--m-disp); font-size: 1.15rem; color: var(--m-ink); } .m-p14-recap-grid span { display: block; font-size: .68rem; color: var(--m-muted); margin-top: 2px; } .m-p14-honest { font-size: .86rem; color: var(--m-ink-2); font-style: italic; border-left: 3px solid var(--m-gold-2); padding-left: 10px; } .m-meta14 { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: var(--m-gold-dim); border: 1px solid color-mix(in srgb, var(--m-gold) 35%, transparent); border-radius: var(--m-r-sm); padding: 16px; margin-bottom: 16px; font-family: var(--m-disp); } .m-meta14 .m-de, .m-meta14 .m-para { font-weight: 700; font-size: 1.35rem; } .m-meta14 .m-para { color: var(--m-gold-2); } .m-meta14 .m-arrow { color: var(--m-gold-2); font-size: 1.3rem; } .m-meta14 .m-lbl { font-size: .7rem; color: var(--m-muted); display: block; font-weight: 500; text-align: center; } /* ---------- curva SVG (rating/elo do ciclo) ---------- */ .m-curva { margin-top: 14px; background: var(--m-bg-2); border: 1px solid var(--m-line); border-radius: 12px; padding: 12px 14px; } .m-curva--vazia p { font-size: .8rem; color: var(--m-muted); margin: 0; text-align: center; } .m-curva-h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--m-disp); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m-muted); margin-bottom: 8px; } .m-curva-h b { font-size: 1rem; letter-spacing: 0; } .m-curva-h b.up { color: var(--acc-2); } .m-curva-h b.down { color: var(--m-red); } .m-curva-legend { font-size: .7rem; color: var(--m-muted); margin: 0 0 6px; } .m-curva svg { width: 100%; height: auto; display: block; } .m-curva-linha { fill: none; stroke: var(--acc-2); stroke-width: 2.5; stroke-linejoin: round; } .m-curva-eixo { stroke: var(--m-line); } .m-curva-dot { fill: var(--acc-2); } .m-curva-dot--base { fill: var(--m-muted); } .m-curva-txt { font-family: var(--m-body); font-size: 10px; fill: var(--m-muted); } .m-curva-l { display: flex; justify-content: space-between; font-size: .72rem; color: var(--m-muted); margin-top: 6px; } /* ---------- comparativo de fechamento de ciclo ---------- */ .m-panel--ciclo { border-color: color-mix(in srgb, var(--m-gold) 40%, transparent); } /* ---------- expirado (2 casos) ---------- */ .m-expira { max-width: 560px; margin: 60px auto; background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 16px; padding: 28px; text-align: center; } .m-expira h2 { font-family: var(--m-disp); font-size: 1.4rem; margin: 8px 0 10px; } .m-expira p { color: var(--m-ink-2); font-size: .94rem; margin-bottom: 18px; } .m-expira .m-btn { max-width: 340px; margin: 0 auto; } /* ---------- card compartilhável (preview do canvas) ---------- */ .m-card-panel { text-align: center; } .m-card-panel canvas { display: block; width: 100%; max-width: 288px; height: auto; margin: 0 auto 18px; border-radius: 14px; border: 1px solid var(--m-line-2); box-shadow: 0 14px 38px rgba(0, 0, 0, .5); } .m-card-panel .m-btn { max-width: 380px; margin: 0 auto; } /* ---------- drill-down flash (lei 7) ---------- */ .m-flash { animation: mFlash 1.2s ease; } @keyframes mFlash { 0%, 60% { outline: 2.5px solid var(--m-gold-2); outline-offset: 4px; } 100% { outline: 2.5px solid transparent; outline-offset: 4px; } } /* ---------- responsivo (mesmos breakpoints do xadrez) ---------- */ @media (min-width: 900px) { .m-rx { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } } @media (min-width: 800px) { .m-panel { padding: 28px 30px; } .m-panel + .m-panel { margin-top: 20px; } .m-stat .m-v { font-size: 1.8rem; } .m-tabs { top: 56px; } } @media (max-width: 640px) { .m-np { grid-template-columns: 1fr; justify-items: center; gap: 16px; } .m-np-h { justify-content: center; text-align: center; } .m-np-body { width: 100%; } .m-pd-body { padding-left: 16px; } } @media (max-width: 560px) { .m-rx-t-lbl { font-size: 16px; } .m-rx-t-tier { font-size: 13.2px; } .m-rx-t-chip { font-size: 13.2px; } .m-fl-row { grid-template-columns: 18px minmax(0, 1fr) 12px; grid-template-areas: "n nome ch" ". st st" ". bar bar" ". meta meta"; gap: 3px 9px; padding: 12px 2px 14px; } .m-fl-st { flex-wrap: wrap; white-space: normal; margin-top: 5px; font-size: .7rem; } .m-fl-meta { font-size: .72rem; margin-top: 8px; } .m-fl-tip { font-size: .8rem; } .m-fl-tip small { display: none; } .m-fl-prosa { margin-left: 0; } .m-sb { grid-template-columns: 1fr; text-align: center; justify-items: center; } .m-cmp-row { grid-template-columns: 1fr; gap: 4px; margin-top: 26px; } .m-share-btn { position: static; display: block; width: 100%; margin-bottom: 12px; } .m-tabs { gap: 3px; padding: 6px 12px 7px; margin: 0 -12px 12px; } .m-tabs button { font-size: .675rem; padding: 6px 5px; min-height: 30px; gap: 3px; border-radius: 9px; letter-spacing: -.01em; } .m-tabs button.locked::after { font-size: .6rem; margin-left: 1px; } .m-tabs-label { font-size: .66rem; margin: 12px 0 6px; } .m-tabpanel.on { scroll-margin-top: 178px; } .m-p14-rating-lbl { margin-left: 0; width: 100%; justify-content: space-between; } .m-card-panel canvas { max-width: 230px; } } @media (prefers-reduced-motion: reduce) { .m-tabpanel.on { animation: none; } .m-flash { animation: none; } .m-btn, .m-plano-link, .m-stat[role=button], .m-pd-rec, .m-p14-acao { transition: none; } }