/* Planejamento: versao premium e minimalista.
   O tema.css tem um "toque pixel" espalhado por centenas de regras (fonte
   Pixelify, cantos retos, bordas em degraus, piscar em steps). Esta folha
   carrega por ultimo e sobrepoe so o acabamento — layout e comportamento
   continuam os do tema. O prefixo `:root body` ganha das regras do tema que
   usam !important com uma classe so. */

:root body .pm { --pmx-borda: rgba(255, 255, 255, .075); --pmx-vidro: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  --pmx-sombra: 0 18px 44px -28px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); --pmx-raio: 18px; }

@keyframes pmx-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pmx-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes pmx-brilho { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }

/* ---- 1. tipografia: fora a fonte pixel ---- */
:root body .pm, :root body .pm *, :root body .pq, :root body .pq *, :root body .pm-janela, :root body .pm-janela *, :root body .pn, :root body .pn * {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
:root body .pm-titulo h2 { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.025em !important; text-shadow: none !important; }
:root body .pm-titulo h2::after { display: none !important; }
:root body .pm-titulo p { opacity: .7; }
/* rotulos pequenos em caixa alta: discretos, com espacamento */
:root body .pn-topo small, :root body .pq-titulo, :root body .pm-cliente-txt small, :root body .pm-mes small, :root body .pm-painel-topo small {
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .14em !important; color: #ff9a6b !important; }

/* ---- 2. molduras: cantos suaves, vidro, sombra macia ---- */
:root body .pm-resumo-cartao, :root body .pm-tabela-caixa, :root body .pm-cal, :root body .pm-item, :root body .pm-painel, :root body .pm-novo,
:root body .pm-cliente, :root body .pm-mes, :root body .pm-vistas, :root body .pn, :root body .pm-janela, :root body .pm-janela.pq {
  border-radius: var(--pmx-raio, 18px) !important; border: 1px solid var(--pmx-borda, rgba(255, 255, 255, .075)) !important;
  background: var(--pmx-vidro, linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012))), #10141b !important;
  box-shadow: var(--pmx-sombra, 0 18px 44px -28px rgba(0, 0, 0, .9)) !important; margin: 0 !important; }
:root body .pm-cliente, :root body .pm-mes { border-radius: 16px !important; transition: border-color .25s, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
:root body .pm-cliente:hover, :root body .pm-mes:hover { border-color: rgba(255, 122, 61, .35) !important; transform: translateY(-2px); }
:root body .pm-cliente-foto, :root body .pm-op-foto { border-radius: 50% !important; image-rendering: auto !important; }
:root body .pm-cliente-anel { border-radius: 50% !important; }

/* tracejados viram linhas finas */
:root body .pn-topo, :root body .pn-pe { border-color: rgba(255, 255, 255, .06) !important; border-style: solid !important; border-width: 0 0 1px !important; }
:root body .pn-pe { border-width: 1px 0 0 !important; }
:root body .pn-col + .pn-col { border-left: 1px solid rgba(255, 255, 255, .06) !important; }
:root body .pn .pq-bloco + .pq-bloco, :root body .pn-col .pq-bloco { border-color: rgba(255, 255, 255, .06) !important; border-style: solid !important; }

/* ---- 3. o painel "Novo planejamento" ---- */
:root body .pn { overflow: hidden; animation: pmx-sobe .45s cubic-bezier(.2, .8, .2, 1) both !important; }
:root body .pn-topo { background: radial-gradient(90% 140% at 0% 0%, rgba(255, 90, 31, .14), transparent 60%) !important; padding: 24px 26px !important; }
:root body .pn-selo { width: 54px !important; height: 54px !important; border-radius: 16px !important;
  background: linear-gradient(160deg, #ff8a4f, #ff5a1f 60%, #e2460f) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px #ff5a1f !important; }
:root body .pn-topo h3 { font-size: 26px !important; letter-spacing: -.02em; }
:root body .pn-numeros div { border-radius: 16px !important; background: rgba(255, 255, 255, .025) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
:root body .pn-numeros div:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 28px -18px #000 !important; }
:root body .pn-numeros strong { font-size: 30px !important; letter-spacing: -.03em; }
:root body .pn-numeros small { font-size: 11.5px !important; font-weight: 600; opacity: .6; }
:root body .pn-plano { border-radius: 0 !important; }

/* ---- 4. controles: contador, segmentado, chave ---- */
:root body .pq-contador { border-radius: 12px !important; overflow: hidden; background: rgba(0, 0, 0, .28) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; padding: 3px; gap: 2px; }
:root body .pq-contador button { width: 30px !important; height: 30px !important; border-radius: 9px !important; background: rgba(255, 255, 255, .06) !important; color: #ffb38a !important;
  font-size: 17px !important; font-weight: 600 !important; transition: background .15s, color .15s, transform .15s !important; }
:root body .pq-contador button:hover { background: #ff5a1f !important; color: #fff !important; }
:root body .pq-contador button:active { transform: scale(.88); }
:root body .pq-contador output { font-weight: 800; font-variant-numeric: tabular-nums; }
:root body .pq-contador output.pulo { animation: pmx-pula .3s cubic-bezier(.3, 1.6, .5, 1) !important; }
@keyframes pmx-pula { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
:root body .pq-seg { border-radius: 12px !important; padding: 3px !important; background: rgba(0, 0, 0, .28) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; gap: 2px; }
:root body .pq-seg button { border-radius: 9px !important; font-weight: 700 !important; transition: background .25s, color .25s, box-shadow .25s !important; }
:root body .pq-seg button.ativo, :root body .pq-seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, #ff8247, #ff5a1f) !important; color: #fff !important; box-shadow: 0 6px 14px -8px #ff5a1f !important; }
:root body .pq-chave i { width: 38px !important; height: 22px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .12) !important; box-shadow: none !important; transition: background .25s !important; }
:root body .pq-chave i::after { top: 3px !important; left: 3px !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1) !important; }
:root body .pq-chave input:checked + i, :root body .pq-chave.ligada i, :root body .pq-chave[aria-checked="true"] i { background: #ff5a1f !important; }

/* ---- 5. botoes ---- */
:root body .pm-botao, :root body .pm-modo, :root body .pm-cancelar, :root body .pq-cancelar, :root body .pm-vistas button, :root body .pm-mes button,
:root body .pq-x, :root body .pm-fechar, :root body .pm-item-abrir, :root body .pm-cal-peca, :root body .pm-reel-num {
  border-radius: 11px !important; margin: 0 !important; box-shadow: none !important; transition: background .2s, transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, color .2s !important; }
:root body .pm-botao, :root body .pm-modo { border: 1px solid rgba(255, 255, 255, .1) !important; background: rgba(255, 255, 255, .04) !important; }
:root body .pm-botao:hover:not(:disabled), :root body .pm-modo:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .18) !important; }
:root body .pm-botao:active, :root body .pq-salvar:active { transform: scale(.96); }
:root body .pm-botao.ia, :root body .pm-botao.primario, :root body .pq-salvar, :root body .pm-salvar {
  position: relative; overflow: hidden; border-radius: 12px !important; border: 1px solid #ff7a3d !important; color: #fff !important;
  background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #ef4a12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px #ff5a1f !important; }
:root body .pm-botao.ia::after, :root body .pm-botao.primario::after, :root body .pq-salvar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: pmx-brilho 5s ease-in-out infinite; }
:root body .pm-botao.ia:hover, :root body .pm-botao.primario:hover, :root body .pq-salvar:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 32px -12px #ff5a1f !important; }
:root body .pm-mes button { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .08) !important; }
:root body .pm-mes button:hover { background: rgba(255, 90, 31, .16) !important; border-color: rgba(255, 90, 31, .4) !important; }

/* ---- 6. resumo, barras e pecas ---- */
:root body .pm-resumo-cartao { animation: pmx-sobe .45s cubic-bezier(.2, .8, .2, 1) both; transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s !important; }
:root body .pm-resumo-cartao:nth-child(2) { animation-delay: .05s; } :root body .pm-resumo-cartao:nth-child(3) { animation-delay: .1s; } :root body .pm-resumo-cartao:nth-child(4) { animation-delay: .15s; }
:root body .pm-resumo-cartao:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .15) !important; }
:root body .pm-resumo-icone { border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
:root body .pm-barra { height: 8px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .07) !important; box-shadow: none !important; }
:root body .pm-barra i { border-radius: 999px !important; background: linear-gradient(90deg, #10b981, #34d399) !important; box-shadow: 0 0 10px rgba(52, 211, 153, .5); }
:root body .pm-peca, :root body .pmt-peca.tem { border-radius: 14px !important; margin: 0 !important; border: 1px solid rgba(255, 255, 255, .07) !important; background: rgba(255, 255, 255, .03) !important;
  box-shadow: none !important; transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s, background .25s !important; }
:root body .pm-peca:hover, :root body .pmt-peca.tem:hover { transform: translateY(-2px) !important; border-color: rgba(255, 255, 255, .16) !important; background: rgba(255, 255, 255, .05) !important;
  box-shadow: 0 14px 28px -18px #000 !important; }
:root body .pm-peca.aberta, :root body .pmt-peca.tem.aberta { border-color: rgba(255, 122, 61, .6) !important; box-shadow: 0 0 0 3px rgba(255, 90, 31, .12), 0 14px 28px -18px rgba(255, 90, 31, .6) !important; }
:root body .pm-peca-status i, :root body .pm-status-linha .pm-peca-status i { border-radius: 50% !important; }
:root body .pm-num { border-radius: 999px !important; box-shadow: none !important; }
:root body .pm-sem-pub { border-radius: 14px !important; border: 1px dashed rgba(255, 255, 255, .1) !important; }
:root body td.pm-solta { border-radius: 10px !important; box-shadow: inset 0 0 0 2px rgba(255, 122, 61, .8) !important; }
:root body .pm-previa, :root body .pm-papel, :root body .pm-status-linha .pm-peca-status { border-radius: 12px !important; }
:root body .pm-dia em { border-radius: 999px !important; padding: 1px 7px !important; }

/* celulas da grade do mes */
:root body .pm-px { border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px -6px rgba(0, 0, 0, .6) !important;
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), filter .2s, box-shadow .2s !important; }
:root body .pm-px:hover { transform: translateY(-2px) scale(1.04) !important; filter: brightness(1.08); }

/* o piscar em degraus vira um pulso suave */
:root body .pm *, :root body .pq *, :root body .pn *, :root body .pm-janela * { animation-timing-function: ease-in-out !important; }
:root body .pm .cor-amarelo .pm-peca-status i, :root body .pm .cor-amarelo.pm-px:not(.vazia), :root body .pm .cor-amarelo .pmt-status { animation-name: pmx-pulso !important; }

/* tabelas: cabecalho limpo */
:root body .pmt th, :root body .pmc-tabela th, :root body .pm-tabela th { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase; opacity: .7; }

/* janelas do planejamento */
:root body .pm-janela, :root body .pm-janela.pq { animation: pmx-sobe .35s cubic-bezier(.2, .8, .2, 1) both; }
:root body .pq-topo h3 { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.01em !important; }
:root body .pq-topo h3::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root body .pm *, :root body .pn, :root body .pm-janela { animation: none !important; }
}

/* =========================================================
   Novo planejamento v2: um clique no caso comum, previa do mes
   ========================================================= */
@keyframes pn2-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pn2-dia { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pn2-pula { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes pn2-brilho { 0%, 65% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(340%) skewX(-18deg); } }
@keyframes pn2-gira { to { transform: rotate(360deg); } }
@keyframes pn2-barra { from { transform: scaleX(0); } }

.pn2 { display: flex; flex-direction: column; gap: 14px; max-width: 1080px; }
.pn2 > * { animation: pn2-entra .45s cubic-bezier(.2, .8, .2, 1) both; }
.pn2 > *:nth-child(2) { animation-delay: .05s; } .pn2 > *:nth-child(3) { animation-delay: .1s; } .pn2 > *:nth-child(4) { animation-delay: .15s; }

.pn2-heroi { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 24px 26px; border-radius: 22px;
  border: 1px solid rgba(255, 122, 61, .22);
  background: radial-gradient(90% 160% at 0% 0%, rgba(255, 90, 31, .18), transparent 60%), linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), #10141b;
  box-shadow: 0 24px 60px -34px #000, inset 0 1px 0 rgba(255, 255, 255, .06); }
.pn2-heroi-texto { flex: 1; min-width: 0; }
.pn2-heroi small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff9a6b; }
.pn2-heroi h3 { margin: 2px 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.pn2-plano { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; opacity: .9; }
.pn2-plano .sem { opacity: .6; }
.pn2-frase { margin: 10px 0 0; font-size: 14px; opacity: .8; transition: opacity .2s; }
.pn2-frase b { color: #fff; }
.pn2.calculando .pn2-frase, .pn2.calculando .pn2-dias, .pn2.calculando .pn2-barras { opacity: .55; }

.pn2-gerar { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 16px; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 800; color: #fff; border: 1px solid #ff7a3d; filter: none;
  background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #ef4a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 34px -14px #ff5a1f;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, opacity .2s; }
.pn2-gerar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; }
.pn2-gerar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent); animation: pn2-brilho 4.5s ease-in-out infinite; }
.pn2-gerar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 40px -14px #ff5a1f; }
.pn2-gerar:active:not(:disabled) { transform: scale(.97); }
.pn2-gerar:disabled { opacity: .5; cursor: default; }
.pn2-gerar.gerando span { opacity: .4; }
.pn2-gerar.gerando svg { animation: pn2-gira .8s linear infinite; }

.pn2-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn2-atalho { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer; text-align: left; color: inherit; font: inherit; filter: none;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); box-shadow: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, background .25s, box-shadow .25s; }
.pn2-atalho svg { width: 20px; height: 20px; flex: none; padding: 8px; box-sizing: content-box; border-radius: 11px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(255, 255, 255, .06); transition: background .25s, color .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pn2-atalho b { display: block; font-size: 13.5px; }
.pn2-atalho small { display: block; margin-top: 1px; font-size: 11.5px; opacity: .55; }
.pn2-atalho:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255, 255, 255, .16); }
.pn2-atalho:hover:not(:disabled) svg { transform: rotate(-8deg) scale(1.06); }
.pn2-atalho.ativo { border-color: rgba(255, 122, 61, .55); background: rgba(255, 90, 31, .08); box-shadow: 0 0 0 3px rgba(255, 90, 31, .1); }
.pn2-atalho.ativo svg { background: #ff5a1f; color: #fff; }
.pn2-atalho:disabled { opacity: .45; cursor: default; }

.pn2-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.pn2-mes, .pn2-barras { padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), #10141b; box-shadow: 0 18px 44px -28px #000; transition: opacity .2s; }
.pn2-mes header, .pn2-barras header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pn2-mes header > span, .pn2-barras header > span { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.pn2-legenda { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 11px; opacity: .65; }
.pn2-legenda i { width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; display: inline-block; }
.pn2-semana, .pn2-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.pn2-semana span { text-align: center; font-size: 10.5px; font-weight: 800; opacity: .4; padding-bottom: 4px; }
.pn2-dia { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 52px; padding: 6px 7px; border-radius: 11px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); animation: pn2-dia .3s calc(var(--k, 0) * 10ms) both; transition: transform .2s, border-color .2s, background .2s; }
.pn2-dia:not(.nada):not(.fora):hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.pn2-dia b { font-size: 11.5px; font-weight: 700; opacity: .75; }
.pn2-dia.nada { background: none; border: 0; }
.pn2-dia.fora { opacity: .3; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 4px, transparent 4px 8px); }
.pn2-dia.hoje b { color: #ff9a6b; opacity: 1; }
.pn2-dia.feriado { border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .07); }
.pn2-dia.comemorativa { border-color: rgba(250, 204, 21, .35); background: rgba(250, 204, 21, .06); }
.pn2-pontos { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pn2-pontos i { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.pn2-pontos i.s { width: auto; height: 14px; padding: 0 4px; border-radius: 6px; display: inline-grid; place-items: center; }
.pn2-pontos i.s em { font-style: normal; font-size: 9px; font-weight: 800; color: #1a0e06; }
.pn2 i.s { background: #ffb38a; } .pn2 i.f { background: #f9a8d4; } .pn2 i.r { background: #c4b5fd; } .pn2 i.c { background: #fde047; }

.pn2-barras { display: flex; flex-direction: column; gap: 14px; }
.pn2-barras header { margin-bottom: 0; }
.pn2-barra-topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.pn2-barra-topo span { font-size: 13px; font-weight: 700; }
.pn2-barra-topo b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pn2-barra-topo b small { font-size: 12px; font-weight: 600; opacity: .5; }
.pn2-barra-topo em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.pn2-barra-topo em.mais { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.pn2-barra-topo em.menos { color: #93c5fd; background: rgba(147, 197, 253, .12); }
.pn2-barra-topo em.ok { color: #4ade80; background: rgba(74, 222, 128, .12); }
.pn2-barra-trilho { display: flex; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pn2-barra-trilho i { display: block; height: 100%; transform-origin: left; animation: pn2-barra .8s cubic-bezier(.2, .8, .2, 1) both; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.pn2-barra.s .pn2-barra-trilho i:first-child { background: linear-gradient(90deg, #ff8a4f, #ffb38a); }
.pn2-barra.f .pn2-barra-trilho i:first-child { background: linear-gradient(90deg, #ec4899, #f9a8d4); }
.pn2-barra.r .pn2-barra-trilho i:first-child { background: linear-gradient(90deg, #8b5cf6, #c4b5fd); }
.pn2-barra-trilho i.sobra { background: repeating-linear-gradient(135deg, #fbbf24 0 5px, #f59e0b 5px 10px); }
.pn2-barra.passou .pn2-barra-trilho { box-shadow: 0 0 0 1px rgba(251, 191, 36, .4); }
.pn2-cards { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 12.5px; opacity: .75; }
.pn2-cards svg { width: 15px; height: 15px; fill: #fde047; stroke: none; }

.pn2-personalizar { border-radius: 20px; border: 1px solid rgba(255, 255, 255, .075); background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), #10141b; overflow: hidden; }
.pn2-personalizar summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; transition: background .2s; }
.pn2-personalizar summary::-webkit-details-marker { display: none; }
.pn2-personalizar summary:hover { background: rgba(255, 255, 255, .03); }
.pn2-personalizar summary svg { width: 18px; height: 18px; fill: none; stroke: #ff9a6b; stroke-width: 2; stroke-linecap: round; }
.pn2-personalizar summary span { font-size: 14.5px; font-weight: 800; }
.pn2-personalizar summary small { font-size: 12px; opacity: .5; }
.pn2-seta { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .5; transition: transform .3s; }
.pn2-personalizar[open] .pn2-seta { transform: rotate(-135deg); }
.pn2-perguntas { display: grid; grid-template-columns: 1fr 1.6fr 1fr; border-top: 1px solid rgba(255, 255, 255, .06); animation: pn2-entra .35s both; }
.pn2-pergunta { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pn2-pergunta + .pn2-pergunta { border-left: 1px solid rgba(255, 255, 255, .06); }
.pn2-pergunta h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; }
.pn2-pergunta h4 em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: rgba(255, 90, 31, .85); }
.pn2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pn2-chips button { height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; filter: none; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: background .2s, border-color .2s, color .2s, transform .15s; }
.pn2-chips button:hover { border-color: rgba(255, 255, 255, .22); }
.pn2-chips button:active { transform: scale(.95); }
.pn2-chips button.ativo { color: #fff; border-color: #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f); box-shadow: 0 6px 14px -8px #ff5a1f; }
.pn2-chips.mini button { height: 30px; padding: 0 10px; font-size: 12px; }
.pn2-intervalo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; animation: pn2-entra .25s both; }
.pn2-data { height: 34px; padding: 0 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; color: #ffb38a; filter: none; box-shadow: none;
  border: 1px solid rgba(255, 122, 61, .35); background: rgba(255, 90, 31, .08); }
.pn2-data:hover { background: rgba(255, 90, 31, .16); }

.pn2-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn2-tipo { --c: #ffb38a; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: 16px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); transition: border-color .25s, transform .25s; }
.pn2-tipo.f { --c: #f9a8d4; } .pn2-tipo.r { --c: #c4b5fd; }
.pn2-tipo:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); transform: translateY(-2px); }
.pn2-tipo-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pn2-tipo-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pn2-tipo strong { font-size: 13px; }
.pn2-passo { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); }
.pn2-passo button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 17px; font-weight: 700; color: inherit; background: rgba(255, 255, 255, .06); box-shadow: none; filter: none; transition: background .15s, color .15s, transform .15s; }
.pn2-passo button:hover { background: var(--c); color: #111; }
.pn2-passo button:active { transform: scale(.88); }
.pn2-passo output { min-width: 34px; text-align: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pn2-passo output.pulou { animation: pn2-pula .3s cubic-bezier(.3, 1.6, .5, 1); color: var(--c); }
.pn2-un { display: flex; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.pn2-un button { height: 26px; padding: 0 9px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; color: inherit; opacity: .55; background: none; box-shadow: none; filter: none; transition: opacity .2s, background .2s; }
.pn2-un button.ativo { opacity: 1; background: rgba(255, 255, 255, .12); }
.pn2-un.so span { height: 26px; display: grid; place-items: center; padding: 0 10px; font-size: 11.5px; font-weight: 700; opacity: .6; }

.pn2-extra { display: flex; flex-direction: column; gap: 8px; }
.pn2-extra > span { font-size: 12.5px; font-weight: 700; opacity: .75; }
.pn2-chave { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.pn2-chave input { position: absolute; opacity: 0; pointer-events: none; }
.pn2-chave i { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, .12); transition: background .25s; }
.pn2-chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.pn2-chave input:checked + i { background: #ff5a1f; }
.pn2-chave input:checked + i::after { transform: translateX(16px); }
.pn2-chave input:focus-visible + i { outline: 2px solid #ff7a3d; outline-offset: 2px; }

.pn2-pe { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 14px 12px 20px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(16, 20, 27, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px -24px #000; }
.pn2-pe-resumo { margin-right: auto; font-size: 13px; opacity: .6; }
.pn2-pe .pn2-gerar { height: 46px; }
.pn2 > p.erro { margin: 0; color: #ff8a8a; font-size: 13px; }
.pn2 > p.erro:empty { display: none; }

@media (max-width: 980px) {
  .pn2-grade, .pn2-perguntas { grid-template-columns: 1fr; }
  .pn2-pergunta + .pn2-pergunta { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
  .pn2-atalhos { grid-template-columns: 1fr; }
  .pn2-heroi { flex-direction: column; align-items: stretch; }
  .pn2-heroi .pn2-gerar { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pn2 *, .pn2 > * { animation: none !important; } }

/* ---- calendario da previa: v2, limpo ---- */
.pn2 { --pn2-s: #ffb38a; --pn2-f: #f9a8d4; --pn2-r: #c4b5fd; --pn2-c: #fde047; }
.pn2-legenda { gap: 14px; opacity: 1; }
.pn2-legenda > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.pn2-legenda svg { width: 13px; height: 13px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn2-legenda .f svg { stroke: var(--pn2-f); } .pn2-legenda .r svg { stroke: var(--pn2-r); } .pn2-legenda .c svg { fill: var(--pn2-c); stroke: none; }
.pn2-legenda .s i { width: 3px !important; height: 10px !important; margin: 0 !important; border-radius: 2px !important; background: var(--pn2-s) !important; }
.pn2-legenda .s i:nth-child(3) { margin-right: 3px !important; }

.pn2-semana { gap: 6px; }
.pn2-semana span { font-size: 10px; letter-spacing: .1em; opacity: .38; }
.pn2-semana span:nth-child(n+6) { opacity: .22; }
.pn2-dias { gap: 6px; }

.pn2-dia { min-height: 64px; padding: 8px 9px 7px; gap: 6px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.pn2-dia:not(.nada):not(.fora):hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .18); box-shadow: 0 12px 24px -16px #000, inset 0 1px 0 rgba(255, 255, 255, .05); }
.pn2-dia-topo { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pn2-dia-topo b { font-size: 13px; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }
.pn2-dia-topo small { min-width: 0; font-size: 9.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.pn2-dia.fora { opacity: 1; background: transparent; border: 1px dashed rgba(255, 255, 255, .06); box-shadow: none; }
.pn2-dia.fora b { opacity: .25; }
.pn2-dia.hoje { border-color: rgba(255, 122, 61, .7); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.pn2-dia.hoje b { color: #ff9a6b; opacity: 1; }
.pn2-dia.feriado { background: linear-gradient(180deg, rgba(248, 113, 113, .12), rgba(248, 113, 113, .03)); border-color: rgba(248, 113, 113, .3); }
.pn2-dia.feriado small { color: #fca5a5; }
.pn2-dia.comemorativa { background: linear-gradient(180deg, rgba(250, 204, 21, .1), rgba(250, 204, 21, .02)); border-color: rgba(250, 204, 21, .28); }
.pn2-dia.comemorativa small { color: #fde68a; }

.pn2-pecas { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 18px; }
.pn2-st { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.pn2-st i { width: 3px; height: 12px; border-radius: 2px; background: var(--pn2-s); opacity: .9; transform-origin: bottom; animation: pn2-tick .4s calc(var(--k, 0) * 10ms + .1s) cubic-bezier(.3, 1.4, .5, 1) both; }
.pn2-st i:nth-child(even) { height: 10px; opacity: .7; }
@keyframes pn2-tick { from { transform: scaleY(0); } }
.pn2-fx { display: inline-flex; gap: 3px; margin-left: auto; }
.pn2-fx i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; }
.pn2-fx i svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pn2-fx i.f { color: var(--pn2-f); background: rgba(249, 168, 212, .14); }
.pn2-fx i.r { color: var(--pn2-r); background: rgba(196, 181, 253, .14); }
.pn2-fx i.c { color: var(--pn2-c); background: rgba(253, 224, 71, .14); }
.pn2-fx i.c svg { fill: currentColor; stroke: none; }
/* os pontos antigos nao existem mais */
.pn2-pontos { display: none; }
@media (max-width: 700px) { .pn2-dia { min-height: 54px; padding: 6px; } .pn2-dia-topo small { display: none; } }

/* ---- Personalizar: premium e animado ---- */
@keyframes pn2-pergunta { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pn2-icone { 0% { transform: rotate(0); } 40% { transform: rotate(-90deg); } 100% { transform: rotate(-180deg); } }
.pn2-personalizar { position: relative; transition: border-color .3s, box-shadow .3s; }
.pn2-personalizar[open] { border-color: rgba(255, 122, 61, .25); box-shadow: 0 24px 60px -36px rgba(255, 90, 31, .45), 0 18px 44px -28px #000; }
.pn2-personalizar summary { padding: 18px 20px; }
.pn2-personalizar summary svg { padding: 7px; box-sizing: content-box; border-radius: 10px; background: rgba(255, 90, 31, .12); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), background .3s; }
.pn2-personalizar[open] summary svg { transform: rotate(180deg); background: #ff5a1f; stroke: #fff; }
.pn2-perguntas { overflow: hidden; animation: none; }
/* as perguntas entram uma de cada vez ao abrir */
.pn2-personalizar.entrando .pn2-pergunta { animation: pn2-pergunta .45s cubic-bezier(.2, .8, .2, 1) both; }
.pn2-personalizar.entrando .pn2-pergunta:nth-child(2) { animation-delay: .07s; }
.pn2-personalizar.entrando .pn2-pergunta:nth-child(3) { animation-delay: .14s; }
.pn2-personalizar.entrando .pn2-tipo { animation: pn2-pergunta .4s cubic-bezier(.2, .8, .2, 1) both; }
.pn2-personalizar.entrando .pn2-tipo:nth-child(1) { animation-delay: .12s; }
.pn2-personalizar.entrando .pn2-tipo:nth-child(2) { animation-delay: .17s; }
.pn2-personalizar.entrando .pn2-tipo:nth-child(3) { animation-delay: .22s; }

.pn2-pergunta { padding: 20px; gap: 14px; }
.pn2-pergunta h4 { font-size: 13px; letter-spacing: -.005em; }
.pn2-pergunta h4 em { width: 24px; height: 24px; font-size: 11.5px; background: linear-gradient(160deg, #ff8a4f, #e2460f); box-shadow: 0 6px 14px -6px #ff5a1f; }

/* quando: opcoes em lista vertical, com icone de marcacao */
.pn2-pergunta [data-quando] { flex-direction: column; align-items: stretch; gap: 6px; }
.pn2-pergunta [data-quando] button { justify-content: flex-start; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 12px; text-align: left; }
.pn2-pergunta [data-quando] button::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); transition: border-color .2s, box-shadow .2s, background .2s; }
.pn2-pergunta [data-quando] button.ativo { background: rgba(255, 90, 31, .1); color: #fff; border-color: rgba(255, 122, 61, .55); box-shadow: none; }
.pn2-pergunta [data-quando] button.ativo::before { border-color: #ff7a3d; background: radial-gradient(circle, #ff7a3d 0 40%, transparent 45%); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }

/* quanto: cartoes mais limpos, unidade sem quebrar linha */
.pn2-tipos { gap: 10px; }
.pn2-tipo { gap: 10px; padding: 16px 10px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, transparent), rgba(255, 255, 255, .015)); border-color: color-mix(in srgb, var(--c) 14%, rgba(255, 255, 255, .06)); }
.pn2-tipo:hover { box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--c) 70%, transparent); }
.pn2-tipo-ic { width: 40px; height: 40px; border-radius: 13px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.pn2-tipo strong { font-size: 13.5px; }
.pn2-passo output { color: var(--c); }
.pn2-un { width: 100%; box-sizing: border-box; }
.pn2-un button { flex: 1; padding: 0 4px; white-space: nowrap; font-size: 11px; }
.pn2-un.so { justify-content: center; }
.pn2-un.so span { white-space: nowrap; }

/* extras */
.pn2-extra { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.pn2-extra .pn2-chips { gap: 4px; }
.pn2-chave { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); transition: background .2s, border-color .2s; }
.pn2-chave:hover { background: rgba(255, 255, 255, .045); }
.pn2-chave:has(input:checked) { border-color: rgba(255, 122, 61, .35); background: rgba(255, 90, 31, .06); }

/* rodape: resumo com destaque */
.pn2-pe-resumo { opacity: .75; }
.pn2-pe-resumo b { font-size: 15px; color: #fff; }

/* ---- o que sai no dia (cartao ao passar o cursor) ---- */
@keyframes pn2-dica { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pn2-dica-baixo { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.pn2 { position: relative; }
.pn2-dica { position: absolute; z-index: 30; width: 230px; padding: 12px 14px; border-radius: 14px; pointer-events: none;
  background: rgba(16, 20, 28, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 22px 50px -18px #000, 0 0 0 1px rgba(0, 0, 0, .3); }
.pn2-dica.viva { animation: pn2-dica .18s cubic-bezier(.2, .8, .2, 1) both; }
.pn2-dica.viva.abaixo { animation-name: pn2-dica-baixo; }
.pn2-dica strong { display: block; font-size: 13px; font-weight: 800; }
.pn2-dica em { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; }
.pn2-dica em.feriado { color: #fca5a5; background: rgba(248, 113, 113, .14); }
.pn2-dica em.comemorativa { color: #fde68a; background: rgba(250, 204, 21, .14); }
.pn2-dica ul { list-style: none; margin: 10px 0 0; padding: 10px 0 0; display: grid; gap: 7px; border-top: 1px solid rgba(255, 255, 255, .07); }
.pn2-dica li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.pn2-dica li > span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 8px; }
.pn2-dica li svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn2-dica li.s > span { color: var(--pn2-s); background: rgba(255, 179, 138, .14); }
.pn2-dica li.f > span { color: var(--pn2-f); background: rgba(249, 168, 212, .14); }
.pn2-dica li.r > span { color: var(--pn2-r); background: rgba(196, 181, 253, .14); }
.pn2-dica li.c > span { color: var(--pn2-c); background: rgba(253, 224, 71, .14); }
.pn2-dica li.c svg { fill: currentColor; stroke: none; }
.pn2-dica li small { margin-left: auto; font-size: 10.5px; opacity: .55; }
.pn2-dica-vazio { margin: 8px 0 0; font-size: 12px; opacity: .55; }
.pn2-dia:not(.nada) { cursor: default; }

/* =========================================================
   Planejamento gerado: jornada do mes, menu "Mais" e acabamento
   ========================================================= */
@keyframes pmj-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pmj-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .5), 0 10px 24px -10px #ff5a1f; } 60% { box-shadow: 0 0 0 8px rgba(255, 90, 31, 0), 0 10px 24px -10px #ff5a1f; } }
@keyframes pmj-trilha { from { transform: scaleX(0); } }
@keyframes pmj-brilho { 0%, 65% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(340%) skewX(-18deg); } }

/* menu "Mais acoes" */
.pmj-mais { position: relative; }
.pmj-mais-botao { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: inherit; filter: none;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); box-shadow: none; transition: background .2s, border-color .2s, transform .2s; }
.pmj-mais-botao svg { width: 16px; height: 16px; fill: currentColor; transition: transform .3s; }
.pmj-mais-botao:hover, .pmj-mais-botao.aberto { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.pmj-mais-botao.aberto svg { transform: rotate(90deg); }
.pmj-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 270px; padding: 6px; border-radius: 16px; display: grid; gap: 2px;
  background: #141821; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -20px #000; animation: pmj-entra .2s cubic-bezier(.2, .8, .2, 1) both; }
.pmj-menu > i { height: 1px; margin: 4px 8px; background: rgba(255, 255, 255, .07); }
.pmj-menu button { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 11px; cursor: pointer; text-align: left; font: inherit; color: inherit; background: none; box-shadow: none; filter: none; transition: background .15s; }
.pmj-menu button:hover { background: rgba(255, 255, 255, .06); }
.pmj-menu button > svg { width: 18px; height: 18px; flex: none; padding: 7px; box-sizing: content-box; border-radius: 10px; background: rgba(255, 255, 255, .06); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pmj-menu button span { font-size: 13px; font-weight: 700; }
.pmj-menu button small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; opacity: .5; }
.pmj-menu button.perigo { color: #fca5a5; }
.pmj-menu button.perigo:hover { background: rgba(248, 113, 113, .1); }

/* jornada */
.pmj { margin-bottom: 14px; padding: 18px 20px; border-radius: 22px; border: 1px solid rgba(255, 122, 61, .2);
  background: radial-gradient(70% 140% at 0% 0%, rgba(255, 90, 31, .12), transparent 60%), linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), #10141b;
  box-shadow: 0 22px 54px -34px #000, inset 0 1px 0 rgba(255, 255, 255, .05); animation: pmj-entra .45s cubic-bezier(.2, .8, .2, 1) both; }
.pmj-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pmj-topo small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff9a6b; }
.pmj-topo strong { display: block; margin-top: 2px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.pmj-pct { font-size: 12.5px; opacity: .65; }
.pmj-pct b { font-size: 16px; color: #4ade80; opacity: 1; }

.pmj-trilha { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 16px; padding: 0; list-style: none; }
.pmj-trilha::before, .pmj-trilha::after { content: ""; position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; }
.pmj-trilha::before { background: rgba(255, 255, 255, .08); }
.pmj-trilha::after { right: auto; width: calc(75% * var(--prog, 0)); background: linear-gradient(90deg, #34d399, #ff7a3d); transform-origin: left; animation: pmj-trilha .9s .2s cubic-bezier(.2, .8, .2, 1) both; }
.pmj-trilha li { position: relative; z-index: 1; display: flex; justify-content: center; animation: pmj-entra .4s calc(.1s + var(--i) * 70ms) cubic-bezier(.2, .8, .2, 1) both; }
.pmj-trilha button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 6px 6px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; color: inherit; background: none; box-shadow: none; filter: none; transition: transform .2s; }
.pmj-trilha button:hover { transform: translateY(-2px); }
.pmj-bola { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: rgba(255, 255, 255, .55);
  background: #161b24; border: 2px solid rgba(255, 255, 255, .12); transition: background .3s, border-color .3s, color .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pmj-bola svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pmj-nome { font-size: 13px; font-weight: 800; }
.pmj-num { font-size: 11px; font-weight: 600; opacity: .5; }
.pmj-trilha li.feito .pmj-bola { color: #052e1c; background: #34d399; border-color: #34d399; }
.pmj-trilha li.atual .pmj-bola { color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f); border-color: #ff7a3d; animation: pmj-pulso 2.2s ease-in-out infinite; }
.pmj-trilha li.atual .pmj-num { color: #ffb38a; opacity: 1; }
.pmj-trilha li.visto .pmj-nome { text-decoration: underline; text-decoration-color: rgba(255, 122, 61, .7); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.pmj-trilha button:hover .pmj-bola { transform: scale(1.08); }

.pmj-acao { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); animation: pmj-entra .3s both; }
.pmj-acao-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: #ffb38a; background: rgba(255, 90, 31, .12); }
.pmj-acao-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pmj-acao-texto { flex: 1; min-width: 0; }
.pmj-acao-texto strong { display: block; font-size: 14px; font-weight: 800; }
.pmj-acao-texto span { display: block; margin-top: 1px; font-size: 12.5px; opacity: .65; }
.pmj-acao-botoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pmj-botao { position: relative; overflow: hidden; height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: inherit; filter: none;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); box-shadow: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .2s; }
.pmj-botao:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .09); }
.pmj-botao:active { transform: scale(.96); }
.pmj-botao.primaria { color: #fff; border-color: #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #ef4a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px #ff5a1f; }
.pmj-botao.primaria::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: pmj-brilho 4.5s ease-in-out infinite; }
.pmj-tudo-ok { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #4ade80; background: rgba(74, 222, 128, .1); }

/* faixa do plano e legenda mais leves */
:root body .pm-plano-faixa { border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .07) !important; background: rgba(255, 255, 255, .025) !important; box-shadow: none !important; }
:root body .pm-extra { border-radius: 999px !important; padding: 4px 10px !important; }

/* tabela: linhas respirando e hover por linha */
:root body .pm-tabela-caixa { overflow: hidden; }
:root body .pm-tabela tbody tr, :root body .pmt tbody tr { transition: background .2s; }
:root body .pm-tabela tbody tr:hover, :root body .pmt tbody tr:hover { background: rgba(255, 255, 255, .025); }
:root body .pm-tabela td, :root body .pmt td { border-color: rgba(255, 255, 255, .05) !important; }

@media (max-width: 860px) {
  .pmj-acao { flex-direction: column; align-items: stretch; }
  .pmj-acao-botoes { justify-content: stretch; }
  .pmj-botao { flex: 1; }
  .pmj-nome { font-size: 11.5px; }
  .pmj-num { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pmj, .pmj * { animation: none !important; } }

/* =========================================================
   Painel da peca (montador do post): limpo, sem pixel
   ========================================================= */
@keyframes pi-entra { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes pi-troca { from { opacity: .3; transform: translateX(14px); } to { opacity: 1; transform: none; } }
:root body .pi, :root body .pi * { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: normal; }
:root body .pm-painel.pi { border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, .1) !important; overflow: hidden;
  background: radial-gradient(70% 40% at 0% 0%, rgba(255, 90, 31, .1), transparent 60%), #10131a !important; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95) !important; }
:root body .pm-painel.pi::before, :root body .pm-painel.pi::after { display: none !important; }
:root body .pi.trocando .pmo-corpo { opacity: .5; transition: opacity .15s; }
:root body .pi .pmo-form, :root body .pi .pmo-previa { animation: pi-troca .3s cubic-bezier(.2, .8, .2, 1) both; }

/* topo */
:root body .pi-topo { gap: 12px !important; padding: 16px 18px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; background: transparent !important; box-shadow: none !important; }
:root body .pi-topo::before, :root body .pi-topo::after { display: none !important; }
:root body .pi-icone { width: 42px !important; height: 42px !important; border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(255, 90, 31, .7) !important; }
:root body .pi-tag { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.01em !important; color: #fff !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
:root body .pi-info small { font-size: 12px !important; opacity: .6; }
:root body .pi-topo .pm-peca-status { border-radius: 999px !important; padding: 4px 10px !important; font-size: 11px !important; font-weight: 700 !important; background: rgba(255, 255, 255, .06) !important; box-shadow: none !important; }
.pi-nav { display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin-left: 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.pi-nav span { padding: 0 8px; font-size: 12px; opacity: .65; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pi-nav span b { color: #fff; opacity: 1; }
.pi-nav button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; cursor: pointer; color: inherit; background: none; box-shadow: none; filter: none; transition: background .15s, transform .15s; }
.pi-nav button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pi-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.pi-nav button:active:not(:disabled) { transform: scale(.9); }
.pi-nav button:disabled { opacity: .25; cursor: default; }
:root body .pi .pm-fechar { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .1) !important; transition: transform .3s !important; }
:root body .pi .pm-fechar:hover { transform: rotate(90deg); }

/* corpo */
:root body .pi .pmo-corpo { border: 0 !important; }
:root body .pi .pmo-previa { border: 0 !important; border-right: 1px solid rgba(255, 255, 255, .06) !important; background: rgba(0, 0, 0, .18) !important; }
:root body .pi .pmo-celular { border-radius: 30px !important; box-shadow: 0 0 0 6px #191d26, 0 0 0 7px rgba(255, 255, 255, .08), 0 30px 60px -24px #000 !important; border: 0 !important; }
:root body .pi .pmo-sem-arte { opacity: .55; }

:root body .pi-tema-caixa { display: flex; flex-direction: column; gap: 8px; }
:root body .pi .pi-tema { height: auto !important; padding: 4px 0 10px !important; border: 0 !important; border-bottom: 2px solid rgba(255, 255, 255, .1) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.02em !important; color: #fff !important; transition: border-color .25s !important; }
:root body .pi .pi-tema::placeholder { color: rgba(255, 255, 255, .25); }
:root body .pi .pi-tema:focus { border-bottom-color: #ff7a3d !important; }
.pi-papel { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11.5px; color: rgba(255, 255, 255, .7); background: rgba(250, 204, 21, .08); border: 1px solid rgba(250, 204, 21, .2); }
.pi-papel svg { width: 13px; height: 13px; fill: none; stroke: #fde047; stroke-width: 2; stroke-linecap: round; }
.pi-papel b { color: #fde68a; }

:root body .pi .pi-rotulo { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase; color: rgba(255, 255, 255, .5) !important; }
:root body .pi .pi-campo { gap: 8px !important; }
:root body .pi .pi-ideia, :root body .pi .pi-hash { border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, .09) !important; background: rgba(255, 255, 255, .03) !important; background-image: none !important;
  box-shadow: none !important; padding: 12px 14px !important; font-size: 14px !important; line-height: 1.55 !important; transition: border-color .2s, box-shadow .25s, background .2s !important; }
:root body .pi .pi-ideia:focus, :root body .pi .pi-hash:focus { outline: none !important; border-color: rgba(255, 122, 61, .6) !important; background: rgba(255, 90, 31, .04) !important; box-shadow: 0 0 0 4px rgba(255, 90, 31, .12) !important; }
:root body .pi .pi-conta { font-size: 11px !important; opacity: .4; }

/* artes */
:root body .pi .pmo-subir { border-radius: 16px !important; border: 1.5px dashed rgba(255, 122, 61, .4) !important; background: rgba(255, 90, 31, .05) !important; box-shadow: none !important; transition: background .2s, border-color .2s, transform .2s !important; }
:root body .pi .pmo-subir:hover { background: rgba(255, 90, 31, .12) !important; border-color: #ff7a3d !important; transform: translateY(-2px); }
:root body .pi .pmo-arte { border-radius: 12px !important; box-shadow: 0 8px 18px -10px #000 !important; }
:root body .pi .pmo-form.soltando { box-shadow: inset 0 0 0 2px rgba(255, 122, 61, .6) !important; border-radius: 16px; }

/* rodape */
:root body .pi-pe { gap: 10px !important; padding: 14px 18px !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; background: rgba(0, 0, 0, .2) !important; }
:root body .pi-pe::before { display: none !important; }
:root body .pi .pi-dica { margin-right: auto; font-size: 12px !important; opacity: .55; }
:root body .pi .pi-dica b { color: #ffb38a; }
:root body .pi kbd { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
:root body .pi .pm-cancelar { height: 42px !important; padding: 0 16px !important; border-radius: 12px !important; font-weight: 700 !important; }
:root body .pi .pmo-salvar { height: 42px !important; padding: 0 18px !important; border-radius: 12px !important; font-weight: 700 !important; border: 1px solid rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .06) !important; box-shadow: none !important; }
:root body .pi .pmo-salvar:hover { background: rgba(255, 255, 255, .11) !important; }
.pmo-proxima { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 18px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: #fff; filter: none;
  border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #ef4a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px #ff5a1f; transition: transform .2s, box-shadow .2s; }
.pmo-proxima svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .25s; }
.pmo-proxima:hover { transform: translateY(-2px); }
.pmo-proxima:hover svg { transform: translateX(3px); }
.pmo-proxima:active { transform: scale(.96); }
:root body .pi .pq-salvar { height: 42px !important; border-radius: 12px !important; font-size: 13px !important; padding: 0 16px !important; }
/* com "Salvar e proxima" em destaque, o "enviar" vira secundario */
:root body .pi .pi-pe:has(.pmo-proxima) .pq-salvar { color: #ffb38a !important; border: 1px solid rgba(255, 122, 61, .4) !important; background: rgba(255, 90, 31, .08) !important; box-shadow: none !important; }
:root body .pi .pi-pe:has(.pmo-proxima) .pq-salvar::after { display: none; }
@media (max-width: 760px) { .pi-nav span { display: none; } :root body .pi .pi-dica { display: none; } }

/* ---- aviso de arte fora do formato ---- */
@keyframes pav2-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pav2-certa { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); } 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }
.pav2 { position: relative; display: flex; gap: 14px; padding: 16px 44px 16px 16px; margin-top: 4px; border-radius: 18px;
  border: 1px solid rgba(251, 191, 36, .28); background: linear-gradient(165deg, rgba(251, 191, 36, .09), rgba(251, 191, 36, .02)), #12151c;
  box-shadow: 0 16px 36px -24px #000; animation: pav2-entra .3s cubic-bezier(.2, .8, .2, 1) both; }
.pav2 + .pav2 { margin-top: 8px; }
.pav2.erro { border-color: rgba(248, 113, 113, .3); background: linear-gradient(165deg, rgba(248, 113, 113, .09), rgba(248, 113, 113, .02)), #12151c; }
.pav2-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #fbbf24; background: rgba(251, 191, 36, .14); }
.pav2.erro .pav2-ic { color: #f87171; background: rgba(248, 113, 113, .14); }
.pav2-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pav2-txt { display: grid; gap: 8px; min-width: 0; }
.pav2-txt strong { font-size: 14px; font-weight: 800; color: #fff; }
.pav2-txt p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.pav2-txt p b { color: #fff; font-weight: 700; word-break: break-word; }
.pav2-formas { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.pav2-forma { display: grid; justify-items: center; gap: 3px; }
.pav2-forma i { position: relative; display: grid; place-items: center; border-radius: 6px; }
.pav2-forma i em { font-style: normal; font-size: 10.5px; font-weight: 800; }
.pav2-forma.errada i { border: 2px dashed #f87171; background: rgba(248, 113, 113, .08); }
.pav2-forma.errada i em { color: #fca5a5; }
.pav2-forma.certa i { border: 2px solid #34d399; background: rgba(52, 211, 153, .1); animation: pav2-certa 2.2s ease-in-out infinite; }
.pav2-forma.certa i em { color: #6ee7b7; }
.pav2-forma b { margin-top: 4px; font-size: 11.5px; font-weight: 800; color: #fff; }
.pav2-forma.errada b { color: #fca5a5; }
.pav2-forma.certa b { color: #6ee7b7; }
.pav2-forma small { font-size: 10.5px; color: rgba(255, 255, 255, .5); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pav2-seta { align-self: center; margin-bottom: 30px; color: rgba(255, 255, 255, .35); }
.pav2-seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pav2-passos { margin: 2px 0 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 5px; }
.pav2-passos li { counter-increment: passo; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.pav2-passos li::before { content: counter(passo); display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; font-size: 10px; font-weight: 800; color: #1a1206; background: #fbbf24; }
.pav2-passos b { color: #fff; }
.pav2 [data-fechar-aviso] { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
  color: inherit; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); box-shadow: none; filter: none; transition: background .2s, transform .25s; }
.pav2 [data-fechar-aviso]:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }

/* ---- correcao: a janela da peca volta a ficar centrada ----
   A regra de molduras zerava a margem de .pm-painel, e o painel e
   `position: fixed; inset: 0; margin: auto` — sem a margem, ele grudava no
   canto e o rodape passava por cima do conteudo. */
:root body .pm-painel:not([hidden]) { margin: auto !important; }
:root body .pm-painel.pi.pi-montador:not([hidden]) { height: min(780px, calc(100vh - 40px)) !important; max-height: calc(100vh - 40px) !important; }
:root body .pi-montador .pmo-corpo { min-height: 0 !important; overflow: hidden !important; }
:root body .pi-montador .pmo-form { overflow-y: auto !important; min-height: 0; }
:root body .pi-montador .pmo-previa { overflow-y: auto !important; min-height: 0; }
:root body .pi-montador .pi-pe { position: relative; z-index: 3; background: #0f1219 !important; }
/* o aviso de formato, dentro do painel, um pouco mais compacto */
:root body .pi .pav2 { padding: 14px 42px 14px 14px; }
:root body .pi .pav2-formas { padding: 10px 12px; }
/* os dialogos do planejamento (excluir, link, editar quantidades) centram pela margem automatica */
:root body dialog.pm-janela, :root body dialog.pm-janela.pq { margin: auto !important; }
/* a coluna do formulario rola de verdade: a linha da grade precisa de altura definida */
:root body .pi-montador .pmo-corpo { grid-template-rows: minmax(0, 1fr) !important; height: 100%; }
:root body .pi-montador .pmo-corpo > .pmo-form, :root body .pi-montador .pmo-corpo > .pmo-previa { height: 100%; max-height: 100%; box-sizing: border-box; }
:root body .pi-montador .pmo-form { padding-bottom: 28px !important; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }

/* ---- barra de exibicao (acima da tabela) ---- */
@keyframes pmv-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pmv { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 12px; animation: pmv-entra .35s cubic-bezier(.2, .8, .2, 1) both; }
.pmv-seg { position: relative; display: grid; grid-template-columns: repeat(var(--abas, 2), minmax(0, 1fr)); padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.pmv-marca { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--abas, 2)); border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 122, 61, .3), rgba(255, 90, 31, .16)); border: 1px solid rgba(255, 122, 61, .5);
  box-shadow: 0 8px 18px -10px rgba(255, 90, 31, .8); transform: translateX(calc(100% * var(--pos, 0))); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.pmv-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: 10px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: inherit; opacity: .55; background: none; box-shadow: none; filter: none; white-space: nowrap; transition: opacity .25s, transform .15s; }
.pmv-seg button:hover { opacity: .85; }
.pmv-seg button:active { transform: scale(.96); }
.pmv-seg button.ativo { opacity: 1; color: #fff; }
.pmv-seg svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pmv-seg button.ativo svg { transform: scale(1.12); color: #ffb38a; }
.pmv-legenda { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.pmv-legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.pmv-legenda i { width: 8px; height: 8px; border-radius: 50%; }
.pmv-legenda .cor-cinza i { background: #8b93a3; }
.pmv-legenda .cor-amarelo i { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, .6); }
.pmv-legenda .cor-verde i { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .5); }
.pmv-legenda .cor-azul i { background: #60a5fa; box-shadow: 0 0 8px rgba(96, 165, 250, .5); }
.pmv-qtd { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; filter: none;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); box-shadow: none; transition: background .2s, border-color .2s, transform .2s; }
.pmv-qtd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s; }
.pmv-qtd:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.pmv-qtd:hover svg { transform: rotate(-12deg); }
/* a vista nova entra suave */
.pm-principal.pmv-entrou { animation: pmv-entra .3s cubic-bezier(.2, .8, .2, 1) both; }
/* a barra antiga das vistas nao existe mais */
:root body .pm-filtros .pm-vistas { display: none !important; }
@media (max-width: 900px) {
  .pmv-seg { width: 100%; }
  .pmv-seg button { padding: 0 6px; }
  .pmv-legenda { margin-left: 0; }
}
@media (max-width: 560px) { .pmv-seg button span { display: none; } }

/* ---- Editar quantidades: mesma identidade do "Novo planejamento" ---- */
@keyframes pa-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pa-gira { to { transform: rotate(360deg); } }
:root body dialog.pa { width: min(760px, calc(100vw - 32px)) !important; max-width: none !important; max-height: calc(100vh - 40px); padding: 0 !important; overflow: hidden;
  border-radius: 24px !important; border: 1px solid rgba(255, 122, 61, .22) !important;
  background: radial-gradient(80% 50% at 0% 0%, rgba(255, 90, 31, .12), transparent 60%), #10131a !important; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95) !important;
  animation: pa-entra .38s cubic-bezier(.2, .8, .2, 1) both !important; }
:root body dialog.pa::backdrop { background: rgba(5, 7, 10, .72); backdrop-filter: blur(6px); }
:root body dialog.pa > form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); margin: 0; }
.pa-topo { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pa-topo-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px #ff5a1f; }
.pa-topo-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-topo > div { flex: 1; min-width: 0; }
.pa-topo small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff9a6b; }
.pa-topo h3 { margin: 2px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.pa-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer; color: inherit; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; filter: none; transition: transform .3s; }
.pa-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pa-x:hover { transform: rotate(90deg); }
.pa-corpo { flex: 1; overflow-y: auto; padding: 6px 6px 4px; }
.pa .pn2-pergunta { padding: 16px; animation: pa-entra .4s cubic-bezier(.2, .8, .2, 1) both; }
.pa .pn2-pergunta:nth-child(2) { animation-delay: .06s; } .pa .pn2-pergunta:nth-child(3) { animation-delay: .12s; }
.pa .pn2-pergunta + .pn2-pergunta { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.pa .pn2-tipo { padding-bottom: 10px; }
.pa-delta { min-height: 18px; font-size: 11.5px; opacity: .6; font-variant-numeric: tabular-nums; }
.pa-delta b { color: #fff; }
.pa-delta em { margin-left: 2px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; }
.pa-delta.mais { opacity: 1; } .pa-delta.mais em { color: #4ade80; background: rgba(74, 222, 128, .14); }
.pa-delta.menos { opacity: 1; } .pa-delta.menos em { color: #fbbf24; background: rgba(251, 191, 36, .14); }
.pa.calculando .pa-delta, .pa.calculando .pa-resumo { opacity: .5; }
.pa-resumo { display: flex; align-items: flex-start; gap: 10px; margin: 6px 16px 10px; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); transition: opacity .2s, border-color .3s, background .3s; }
.pa-resumo svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pa-resumo b { color: #fff; }
.pa-resumo.mais { border-color: rgba(74, 222, 128, .28); background: rgba(74, 222, 128, .06); } .pa-resumo.mais svg { color: #4ade80; }
.pa-resumo.menos { border-color: rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .06); } .pa-resumo.menos svg { color: #fbbf24; }
.pa-resumo.igual svg { color: #4ade80; }
.pa .erro { margin: 0 16px 8px; color: #ff8a8a; font-size: 13px; }
.pa .erro:empty { display: none; }
.pa-pe { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .2); }
.pa-pe > span { flex: 1; }
.pa-pe button { height: 42px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; filter: none; transition: transform .2s, background .2s, box-shadow .2s; }
.pa-apagar { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: #fca5a5; background: none; border: 1px solid transparent; box-shadow: none; }
.pa-apagar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-apagar:hover { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .3); }
.pa-cancelar { padding: 0 16px; color: inherit; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; }
.pa-cancelar:hover { background: rgba(255, 255, 255, .09); }
.pa-salvar { position: relative; padding: 0 20px; color: #fff; border: 1px solid #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f 60%, #ef4a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px #ff5a1f; }
.pa-salvar:hover:not(:disabled) { transform: translateY(-2px); }
.pa-salvar.salvando span { opacity: 0; }
.pa-salvar.salvando::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: pa-gira .7s linear infinite; }
@media (max-width: 640px) { .pa .pn2-tipos { grid-template-columns: 1fr; } .pa-apagar { padding: 0 8px; } }

/* ---- botao Editar quantidades: mostra o que o mes tem ---- */
.pmv-qtd { position: relative; overflow: hidden; gap: 0; height: 40px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .09); }
.pmv-qtd-nums { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px 0 10px; }
.pmv-qtd-nums i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pmv-qtd-nums svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pmv-qtd-nums i.s { color: #ffb38a; } .pmv-qtd-nums i.f { color: #f9a8d4; } .pmv-qtd-nums i.r { color: #c4b5fd; }
.pmv-qtd-acao { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #ff8247, #ff5a1f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px #ff5a1f; transition: box-shadow .25s, filter .25s; }
.pmv-qtd-acao svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pmv-qtd:hover { transform: translateY(-2px); border-color: rgba(255, 122, 61, .4); background: rgba(255, 90, 31, .06); }
.pmv-qtd:hover .pmv-qtd-acao { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -8px #ff5a1f; filter: brightness(1.05); }
.pmv-qtd:hover .pmv-qtd-acao svg { transform: rotate(-15deg) scale(1.1); }
.pmv-qtd:hover svg { transform: none; }
.pmv-qtd:active { transform: scale(.97); }

/* ---- botao Exportar PDF no topo ---- */
:root body #pm-acoes { display: flex; align-items: center; gap: 8px; }
.pmj-pdf { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; filter: none;
  border: 1px solid rgba(255, 122, 61, .45); background: linear-gradient(180deg, rgba(255, 122, 61, .22), rgba(255, 90, 31, .1)); box-shadow: 0 10px 22px -14px #ff5a1f;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background .2s; }
.pmj-pdf svg { width: 17px; height: 17px; fill: none; stroke: #ffb38a; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pmj-pdf::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); transform: translateX(-140%) skewX(-18deg); }
.pmj-pdf:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255, 122, 61, .32), rgba(255, 90, 31, .16)); box-shadow: 0 14px 28px -14px #ff5a1f; }
.pmj-pdf:hover svg { transform: translateY(2px); }
.pmj-pdf:hover::after { animation: pmj-brilho .9s ease; }
.pmj-pdf:active { transform: scale(.96); }
@media (max-width: 560px) { .pmj-pdf span { display: none; } .pmj-pdf { padding: 0 11px; } }

/* ---- jornada: anel no passo que esta sendo visto, deslizando entre eles ---- */
@keyframes pmj-anel-gira { to { transform: rotate(360deg); } }
@keyframes pmj-anel-pousa { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.18); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes pmj-acao-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pmj-anel { position: absolute; z-index: 2; top: -5px; left: calc(12.5% + 25% * var(--vis, 0)); width: 54px; height: 54px; transform: translateX(-50%); pointer-events: none;
  transition: left .5s cubic-bezier(.34, 1.4, .5, 1); }
.pmj-anel i { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 15%, #ff7a3d 35%, #ffd3b8 50%, #ff7a3d 65%, transparent 85%);
  -webkit-mask: radial-gradient(circle, transparent 23.5px, #000 24.5px); mask: radial-gradient(circle, transparent 23.5px, #000 24.5px);
  filter: drop-shadow(0 0 6px rgba(255, 122, 61, .7)); animation: pmj-anel-gira 2.6s linear infinite; }
.pmj-anel::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 1px solid rgba(255, 122, 61, .25); }
.pmj-anel.pousou { animation: pmj-anel-pousa .5s .25s cubic-bezier(.3, 1.5, .5, 1); }
/* o passo visto ganha destaque no nome (o sublinhado antigo sai) */
.pmj-trilha li.visto .pmj-nome { text-decoration: none; color: #ffb38a; }
.pmj-trilha li .pmj-nome { transition: color .3s; }
.pmj-acao.entrando { animation: pmj-acao-entra .35s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .pmj-anel { transition: none; } .pmj-anel i { animation: none; } }

/* ---- painel "Enviar para aprovacao" ---- */
@keyframes pap-sobe { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
:root body dialog.pap { width: min(620px, calc(100vw - 32px)) !important; }
.pap-topo { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pap-topo-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px #ff5a1f; }
.pap-topo-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pap-topo > div { flex: 1; min-width: 0; }
.pap-topo small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff9a6b; }
.pap-topo h3 { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pap-corpo { flex: 1; overflow-y: auto; padding: 18px 22px 8px; display: flex; flex-direction: column; gap: 16px; }
.pap-frase { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .7); }
.pap-frase b { color: #fff; }

.pap-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.pap-tipo { --c: #ffb38a; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(255, 255, 255, .015)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  animation: pap-sobe .4s calc(.08s + var(--i) * 60ms) cubic-bezier(.3, 1.3, .5, 1) both; }
.pap-tipo.f { --c: #f9a8d4; } .pap-tipo.r { --c: #c4b5fd; } .pap-tipo.c { --c: #fde047; }
.pap-tipo span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); margin-bottom: 4px; }
.pap-tipo span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pap-tipo.c span svg { fill: currentColor; stroke: none; }
.pap-tipo b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--c); }
.pap-tipo small { font-size: 11.5px; font-weight: 700; opacity: .6; }

.pap-checks { display: grid; gap: 6px; }
.pap-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.pap-check svg { width: 16px; height: 16px; flex: none; margin-top: 1px; padding: 3px; box-sizing: content-box; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pap-check b { color: #fff; }
.pap-check.ok svg { color: #052e1c; background: #34d399; }
.pap-check.aviso svg { color: #1a1206; background: #fbbf24; }
.pap-check.neutro svg { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); stroke-width: 2; }

.pap-lista { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .15); overflow: hidden; }
.pap-lista summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; }
.pap-lista summary::-webkit-details-marker { display: none; }
.pap-lista summary i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .5; transition: transform .3s; }
.pap-lista[open] summary i { transform: rotate(-135deg); }
.pap-lista ul { list-style: none; margin: 0; padding: 0 8px 8px; max-height: 240px; overflow-y: auto; display: grid; gap: 3px; }
.pap-lista li { --c: #ffb38a; display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; font-size: 12.5px; transition: background .15s; }
.pap-lista li.f { --c: #f9a8d4; } .pap-lista li.r { --c: #c4b5fd; } .pap-lista li.c { --c: #fde047; }
.pap-lista li:hover { background: rgba(255, 255, 255, .04); }
.pap-data { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; opacity: .55; }
.pap-etq { flex: none; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pap-lista li strong { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pap-lista li em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; opacity: .45; }
.pap-lista li em.arte { opacity: 1; color: #4ade80; }

/* ---- jornada: cor de cada passo ----
   laranja = selecionado · vermelho pulsando = tem pendencia · verde = concluido */
@keyframes pmj-vermelho { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .55); } 60% { box-shadow: 0 0 0 9px rgba(248, 113, 113, 0); } }
@keyframes pmj-verde { 0%, 100% { box-shadow: 0 0 10px 0 rgba(52, 211, 153, .35); } 50% { box-shadow: 0 0 18px 3px rgba(52, 211, 153, .6); } }
@keyframes pmj-laranja { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .55), 0 10px 24px -10px #ff5a1f; } 60% { box-shadow: 0 0 0 8px rgba(255, 90, 31, 0), 0 10px 24px -10px #ff5a1f; } }
.pmj-trilha li .pmj-bola { animation: none; }
.pmj-trilha li.pendente .pmj-bola { color: #fca5a5; background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .7); animation: pmj-vermelho 1.8s ease-in-out infinite; }
.pmj-trilha li.pendente .pmj-num { color: #fca5a5; opacity: .85; }
.pmj-trilha li.ok .pmj-bola { color: #052e1c; background: #34d399; border-color: #34d399; animation: pmj-verde 2.6s ease-in-out infinite; }
.pmj-trilha li.ok .pmj-num { color: #6ee7b7; opacity: .85; }
/* selecionado: laranja por cima de qualquer estado */
.pmj-trilha li.visto .pmj-bola { color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f); border-color: #ff7a3d; animation: pmj-laranja 2.2s ease-in-out infinite; }
.pmj-trilha li.visto .pmj-nome { color: #ffb38a; }
.pmj-trilha li.visto .pmj-num { color: #ffb38a; opacity: 1; }
.pmj-trilha li .pmj-bola, .pmj-trilha li .pmj-num { transition: background .35s, border-color .35s, color .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
/* contagem de prontas no passo Aprovacao */
.pmj-num.destaque { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-weight: 800; opacity: 1 !important;
  color: #fff !important; background: rgba(255, 90, 31, .22); border: 1px solid rgba(255, 122, 61, .45); }
.pmj-num.destaque::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffb38a; box-shadow: 0 0 6px #ff7a3d; animation: pmx-pulso 1.6s ease-in-out infinite; }
.pmj-num-sub { margin-top: -2px; font-size: 10.5px; opacity: .45; }

/* ---- cartaozinho de cada passo da jornada ---- */
@keyframes pmj-cartao { from { opacity: 0; transform: translateY(4px) scale(.94); } to { opacity: 1; transform: none; } }
.pmj-trilha .pmj-num { display: none; }
.pmj-cartao { --c: #ffb38a; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 4px 11px 4px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: rgba(255, 255, 255, .78); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 14px -10px #000;
  animation: pmj-cartao .4s calc(.2s + var(--i, 0) * 70ms) cubic-bezier(.3, 1.4, .5, 1) both; transition: border-color .3s, background .3s, transform .25s; }
.pmj-cartao b { font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.pmj-cartao > i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.pmj-cartao.ideias { --c: #fde047; }
.pmj-cartao.aprovacao { --c: #ff9a6b; }
.pmj-cartao.producao { --c: #a78bfa; }
.pmj-cartao.agenda { --c: #60a5fa; }
.pmj-trilha button:hover .pmj-cartao { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.pmj-trilha li.visto .pmj-cartao { border-color: rgba(255, 122, 61, .55); background: linear-gradient(180deg, rgba(255, 122, 61, .24), rgba(255, 90, 31, .1)); }
.pmj-trilha li.visto .pmj-cartao > i { animation: pmx-pulso 1.6s ease-in-out infinite; }
.pmj-num-sub { margin-top: 1px; font-size: 10.5px; font-weight: 600; opacity: .42; }
.pmj-trilha li.ok .pmj-num-sub { color: #6ee7b7; opacity: .8; }
/* a etiqueta antiga sai */
.pmj-num.destaque { display: none; }
@media (max-width: 860px) { .pmj-cartao { font-size: 10.5px; padding: 3px 8px 3px 6px; } .pmj-cartao b { font-size: 12px; } }

/* ---- cartao do passo v2: numero, barra de progresso e o que falta ---- */
@keyframes pmj-barra2 { from { width: 0; } }
@keyframes pmj-brilho2 { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
.pmj-num-sub { display: none; }
.pmj-cartao { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 7px; width: 168px; margin-top: 6px; padding: 10px 12px 9px; border-radius: 14px;
  text-align: left; white-space: normal; color: inherit;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid color-mix(in srgb, var(--c) 22%, rgba(255, 255, 255, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 28px -18px #000; }
.pmj-cartao > i { display: none; }
.pmj-cartao::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: pmj-brilho2 6s calc(var(--i, 0) * .7s + 1.5s) ease-in-out infinite; }
.pmj-cartao-topo { display: flex; align-items: baseline; gap: 6px; }
.pmj-cartao-topo b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.pmj-cartao-topo small { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .78); line-height: 1.2; }
.pmj-cartao-barra { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pmj-cartao-barra i { display: block; width: var(--pct, 0%); min-width: 4px; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, transparent), var(--c)); box-shadow: 0 0 8px var(--c); animation: pmj-barra2 1s calc(.3s + var(--i, 0) * 80ms) cubic-bezier(.2, .8, .2, 1) both; }
.pmj-cartao-pe { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .45); }
.pmj-cartao-pe em { font-style: normal; font-weight: 800; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.pmj-cartao.completo { --c: #34d399; }
.pmj-cartao.completo .pmj-cartao-pe span { color: #6ee7b7; }
.pmj-trilha button:hover .pmj-cartao { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 32px -16px color-mix(in srgb, var(--c) 45%, #000); }
.pmj-trilha li.visto .pmj-cartao { border-color: rgba(255, 122, 61, .6); background: radial-gradient(120% 120% at 100% 0%, rgba(255, 122, 61, .28), transparent 60%), linear-gradient(180deg, rgba(255, 122, 61, .14), rgba(255, 90, 31, .04));
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .1), 0 16px 30px -16px rgba(255, 90, 31, .6); }
@media (max-width: 1000px) { .pmj-cartao { width: 138px; padding: 8px 9px; } .pmj-cartao-topo b { font-size: 18px; } }
@media (max-width: 700px) { .pmj-cartao { width: auto; } .pmj-cartao-topo small, .pmj-cartao-pe span { display: none; } }
.pmj-esperando { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.pmj-esperando::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; animation: pmx-pulso 1.6s ease-in-out infinite; }

/* ---- agendar: escolha do horario ---- */
.pag-hora { display: flex; flex-direction: column; gap: 8px; }
.pag-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.pag-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.pag-horas > button, .pag-outra { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: inherit; filter: none; box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: background .2s, border-color .2s, transform .15s, color .2s; }
.pag-horas > button:hover, .pag-outra:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.pag-horas > button.ativo, .pag-outra.ativo { color: #fff; border-color: #ff7a3d; background: linear-gradient(180deg, #ff8247, #ff5a1f); box-shadow: 0 8px 18px -10px #ff5a1f; }
.pag-outra { padding: 0 8px 0 12px; }
.pag-outra svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .7; }
.pag-outra input { width: 92px; height: 32px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; box-shadow: none; color-scheme: dark; }
.pag-outra input:focus { outline: none; }
/* painel de aprovacao/agenda: os blocos nao encolhem; quem rola e o corpo */
.pap-corpo { min-height: 0; }
.pap-corpo > * { flex-shrink: 0; }
.pap-lista ul { max-height: none; overflow: visible; }
.pap-corpo { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }