/* /events/planejador/planejador.css -- Planejador de Cupons (checkup etapa 5, mockup aprovado: docs/mockups/ferramentas/conversor-planejador.html).
   Usa .cv-n e .cv-chip-s4 do conversao.css. Campos em colunas iguais (pedido do dono: "alinhado e organizado").
   Letra mínima 15px (regra 18). */
.pl2{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
/* campo escondido (modo "Dias até uma meta", Pergaminho/Arena sem dia) some de verdade: o display:grid dos campos não pode vencer o hidden */
.pl2 [hidden]{display:none !important}
.pl2-col{display:grid;gap:14px;min-width:0}
.pl2-col > .card{margin:0}
.pl2-lado{position:sticky;top:12px;display:grid;gap:12px;min-width:0}
.pl2-lado > .card{margin:0}
.pl2-grade{display:grid;grid-template-columns:repeat(auto-fill,220px);gap:14px 20px;align-items:end;margin:10px 0}
.pl2-grade.pl2-2{grid-template-columns:repeat(2,220px)}
.pl2-campo{display:grid;gap:6px;align-content:start}
.pl2-campo > .field-label{margin:0;line-height:1.3}
#pl-campoDias{grid-column:span 2;align-self:start}
#pl-campoDias .quick-set{flex-wrap:wrap}
.pl2-grade select,.pl2-grade .lp-passo,.pl2-falta{width:220px;height:40px;margin:0}
.pl2-grade select{padding:0 32px 0 12px;line-height:38px}
.pl2-grade .lp-passo input{flex:1 1 0;min-width:0;width:0}
.pl2-grade .lp-passo button{flex:0 0 40px;width:40px;height:38px}
.pl2-grade .lp-passo-rot{display:block}
.pl2-sub{font:600 15px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-low);margin-top:8px}
.pl2-aviso{margin:0;color:#f0736a;font-size:15px;font-weight:600}
.pl2-eventos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.pl2-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--border);border-radius:11px;background:var(--s-800);padding:9px 10px;cursor:pointer;text-align:left;color:var(--t-hi);font:500 15px var(--body)}
.pl2-ev small{display:block;font:500 15px var(--body);color:var(--t-low)}
.pl2-tic{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-hi,var(--border));display:grid;place-items:center;font-size:15px;color:#062a33}
.pl2-ev[aria-pressed="true"]{border-color:var(--cyan)}
.pl2-ev[aria-pressed="true"] .pl2-tic{background:var(--cyan);border-color:var(--cyan)}
.pl2-ev[aria-pressed="true"] .pl2-tic::after{content:"✓"}
#pl-semana button small{font-size:15px}
.pl2-res .k{font:600 15px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.pl2-res .v{font:900 30px var(--display);font-variant-numeric:tabular-nums}
.pl2-res .s{color:var(--t-mid);font-size:15px}
.pl2-semanas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;align-items:end;height:170px;border-bottom:1px solid var(--border);padding-bottom:4px}
.pl2-semanas > div{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;height:100%;gap:3px;min-width:0}
.pl2-semanas b{font:600 15px var(--mono);color:var(--t-mid);font-variant-numeric:tabular-nums;white-space:nowrap}
/* muitas semanas (56/84 dias): o número de cada barra não cabe; fica no toque/mouse (title) e no total do topo */
.pl2-semanas.muitas b{visibility:hidden}
.pl2-semanas i{width:70%;align-self:end;border-radius:6px 6px 2px 2px;background:linear-gradient(0deg,var(--cyan) var(--g),var(--gold) var(--g))}
.pl2-semanas span{font:600 15px var(--mono);color:var(--t-low);white-space:nowrap}
.pl2-semanas.muitas span{font-size:15px;letter-spacing:-.04em}
.pl2-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:15px;color:var(--t-mid);margin-top:8px}
.pl2-legenda > span{display:inline-flex;gap:6px;align-items:center}
.pl2-legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.pl2-legenda i.g{background:var(--cyan)}.pl2-legenda i.p{background:var(--gold)}
.pl2-fontes{display:grid;gap:10px}
/* nome inteiro na 1ª linha (com valor e %), barra embaixo em toda a largura */
.pl2-f{display:grid;grid-template-columns:minmax(0,1fr) auto 46px;gap:4px 10px;align-items:baseline;font-size:15px;color:var(--t-mid)}
.pl2-f .t{grid-column:1 / -1;height:8px;border-radius:99px;background:var(--s-700);overflow:hidden}
.pl2-f .t i{display:block;height:100%;border-radius:99px}
.pl2-f b{color:var(--t-hi);font-variant-numeric:tabular-nums;text-align:right}
.pl2-f small{font-size:15px;color:var(--t-low);text-align:right}
@media (max-width:1100px){.pl2{grid-template-columns:1fr}.pl2-lado{position:static}}
@media (max-width:520px){.pl2-grade,.pl2-grade.pl2-2{grid-template-columns:1fr}#pl-campoDias{grid-column:auto}.pl2-grade select,.pl2-grade .lp-passo,.pl2-falta{width:100%}}
/* Planejador 2.13 (mockup aprovado em 07/10/2026): campo "Dias" livre, modo recarga (semana da recarga, agenda), Carteira por
   quantidade. Regra 20: todo bloco novo leva o feixe de luz (pl2-brilho), desligado em prefers-reduced-motion. */
.pl2-largo{grid-column:1 / -1}
.pl2-dias{align-items:center}
.pl2-outro{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card2,var(--s-800));color:var(--t-mid);border-radius:20px;padding:3px 6px 3px 14px;font:700 15px var(--body)}
.pl2-outro input{width:84px;height:30px;border:1px solid var(--border);border-radius:999px;background:var(--s-900,#0c0f16);color:var(--t-hi);text-align:center;font:700 15px var(--body)}
.pl2-outro.ativo{border-color:var(--cyan);color:var(--cyan)}
.pl2-feixe{background-image:linear-gradient(105deg,transparent 43%,rgba(32,211,224,.10) 47%,rgba(255,244,205,.22) 50%,rgba(227,179,65,.10) 53%,transparent 57%);background-size:240% 100%;background-repeat:no-repeat;background-position:130% 0;animation:pl2-brilho 6s ease-in-out infinite}
@keyframes pl2-brilho{0%{background-position-x:130%}30%,100%{background-position-x:-30%}}
.pl2-semrec{padding-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pl2-sr{position:relative;display:grid;gap:3px;text-align:left;border:1px solid var(--border);border-radius:12px;background-color:var(--s-800);padding:12px;color:var(--t-hi);font:500 15px var(--body);cursor:pointer}
.pl2-sr .n{color:var(--t-mid)}
.pl2-sr b{font:800 22px var(--display);font-variant-numeric:tabular-nums}
.pl2-sr small{color:var(--t-low);font-size:15px;line-height:1.35}
.pl2-sr em{position:absolute;top:-11px;right:10px;font:600 15px var(--mono);font-style:normal;background:var(--gold);color:#2a1f05;border-radius:999px;padding:0 9px}
.pl2-sr[aria-pressed="true"]{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(32,211,224,.4)}
.pl2-link{color:var(--cyan);font-weight:700}
.pl2-plano{display:grid;gap:6px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background-color:var(--s-800)}
.pl2-info{margin:0;border:1px solid rgba(32,211,224,.4);background:rgba(32,211,224,.08);border-radius:10px;padding:8px 12px;font-size:15px;color:var(--t-hi)}
.pl2-info b{color:var(--cyan)}
.pl2-ag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;border-bottom:1px solid var(--border);padding-block:7px;font-size:15px}
.pl2-ag:last-child{border-bottom:0}
.pl2-ag span{color:var(--t-mid)}
.pl2-ag i{font:600 15px var(--mono);font-style:normal;color:var(--cyan);text-align:right}
.pl2-ag b{grid-column:1 / -1;color:var(--t-hi);font-weight:600}
.pl2-ag.sobra b{color:var(--t-mid)}
.pl2-rende{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pl2-rende span{border:1px solid var(--border);border-radius:999px;padding:1px 10px;font:600 15px var(--mono);color:var(--t-hi)}
.pl2-vip{margin:0}
@media (prefers-reduced-motion:reduce){.pl2-feixe{animation:none}}