/* ============================================================
   Cronograma e Produção — porte do estudo 21 (docs/estudos/visao-geral-21-cronograma-producao.html).
   Reaproveita as peças vp- da Visão geral (cartão, cabeçalho, resposta, carga por semana, legenda); aqui ficam só
   as peças das duas telas: op- (comuns), cr- (Cronograma) e pr- (Produção). O wrapper .vp é o container das queries.
   ============================================================ */

/* ----- comuns ----- */
.vp .op-cdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--c, var(--neutral)); }
.vp .op-col { display: flex; flex-direction: column; }
.vp .op-tool { display: flex; align-items: center; flex-wrap: wrap; gap: 12px var(--e2); margin-top: var(--e3); }
.vp .op-sp { flex: 1; }
.vp .op-sel { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.vp .op-sel select { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); padding: 0 18px 0 0; min-height: 44px; cursor: pointer; max-width: 22ch; }
.vp .op-sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }

.vp .op-leg { margin-top: var(--e2); font-size: 13px; color: var(--ink-3); }
.vp .op-leg b { color: var(--ink-2); font-weight: 600; }

/* ----- Cronograma: entregas e falta de prazo ----- */
.vp .cr-ent h3 { padding: var(--e2) 0 8px; }
.vp .cr-ent h3:first-child { padding-top: var(--e1); }
.vp .cr-ent li { border-top: 1px solid var(--line); }
.vp .cr-ent__a { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 8px 0; }
.vp .cr-ent__a:hover b { opacity: .72; }
.vp .cr-dia { font: 300 26px/1 var(--font-display); letter-spacing: -.04em; }
.vp .cr-dia small { display: block; margin-top: 4px; font: 600 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vp .cr-ent li.is-late .cr-dia { color: var(--danger-ink); }
.vp .cr-ent li.is-hoje .cr-dia, .vp .cr-ent li.is-hoje .cr-dia small { color: var(--info-ink); }
.vp .cr-ent b, .vp .cr-sd b { display: block; font-weight: 600; }
.vp .cr-ent small, .vp .cr-sd small { display: flex; align-items: center; font-size: 14px; color: var(--ink-2); }
.vp .cr-ent__vazio { padding: 14px 0; font-size: 14px; color: var(--ink-2); }
.vp .cr-sd { margin-top: var(--e1); }
.vp .cr-sd h3 { padding: var(--e1) 0 8px; }
.vp .cr-sd h3.cr-sd__2 { padding-top: var(--e3); }
.vp .cr-sd li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 8px 0; border-top: 1px solid var(--line); }
.vp .cr-sd__nota { margin: 12px 0 0; }
.vp .op-col > .cr-ent, .vp .op-col > .cr-sd { flex: 1; }

/* ----- Cronograma: linha do tempo ----- */
.vp .cr-gw { position: relative; margin-top: var(--e2); }
.vp .cr-g { --lw: 264px; --day: 20px; --days: 49; overflow-x: auto; scrollbar-width: thin; }
.vp .cr-g:focus-visible { outline-offset: 4px; }
.vp .cr-in { position: relative; width: calc(var(--lw) + var(--days) * var(--day)); }
.vp .cr-cols { position: absolute; top: 0; bottom: 0; width: calc(var(--days) * var(--day)); pointer-events: none; }
.vp .cr-cols i { position: absolute; top: 0; bottom: 0; width: var(--day); }
.vp .cr-cols i.wk { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.vp .cr-cols i.seg { border-left: 1px solid var(--line); }
.vp .cr-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); z-index: 1; pointer-events: none; }
.vp .cr-row { position: relative; display: grid; grid-template-columns: var(--lw) calc(var(--days) * var(--day)); min-height: 68px; border-bottom: 1px solid var(--line); }
.vp .cr-lab { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px 20px 10px 0; background: var(--surface); }
.vp .cr-lab b { font-weight: 600; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp .cr-lab small { display: flex; align-items: flex-start; font-size: 13px; color: var(--ink-2); overflow: hidden; }
.vp .cr-lab small .op-cdot { margin-top: 5px; }
.vp .cr-tr { position: relative; }
.vp .cr-axis { min-height: 52px; }
.vp .cr-axis .cr-lab { justify-content: flex-end; padding-bottom: 10px; }
.vp .cr-tick { position: absolute; bottom: 10px; font-size: 12px; color: var(--ink-3); white-space: nowrap; padding-left: 6px; }
.vp .cr-tick b { font-weight: 600; color: var(--ink-2); }
.vp .cr-hoje { position: absolute; top: 8px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--canvas); font: 600 12px/1.3 var(--font); z-index: 3; white-space: nowrap; }
.vp .cr-carga { min-height: 76px; }
.vp .cr-load { position: absolute; bottom: 12px; width: var(--day); display: flex; justify-content: center; }
.vp .cr-load i { display: block; width: calc(var(--day) - 6px); max-width: 14px; border-radius: 5px 5px 2px 2px; --bc: var(--neutral); background: var(--bc); }
.vp .cr-load.over i { --bc: var(--danger); }
.vp .cr-lim { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink-3); opacity: .55; }
.vp .cr-bar { position: absolute; top: 50%; height: 30px; margin-top: -15px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; --bc: var(--neutral); background: var(--bc); color: var(--ink); font: 600 12px/1 var(--font); white-space: nowrap; overflow: hidden; z-index: 1; touch-action: pan-y; }
.vp .cr-bar.is-drag { cursor: grab; }
.vp .cr-bar.is-arrastando { cursor: grabbing; opacity: .85; }
.vp .cr-bar.est { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--neutral) 70%, transparent) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1.5px var(--neutral); }
.vp .cr-bar.late { --bc: var(--danger); color: var(--on-danger); }
.vp .cr-bar.cut { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.vp .cr-bar__t { pointer-events: none; }
.vp .cr-h { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.vp .cr-h--l { left: 0; } .vp .cr-h--r { right: 0; }
.vp .cr-atr { position: absolute; top: 50%; height: 30px; margin-top: -15px; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 55%, transparent) 0 3px, transparent 3px 7px); }
.vp .cr-flag { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 8px; font: 600 12.5px var(--font); color: var(--danger-ink); white-space: nowrap; z-index: 1; }
.vp .cr-leg { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: var(--e2); font-size: 13.5px; color: var(--ink-2); }
.vp .cr-leg span { display: inline-flex; align-items: center; white-space: nowrap; }
.vp .cr-leg i { display: inline-block; width: 20px; height: 10px; border-radius: 999px; margin-right: 8px; --bc: var(--neutral); background: var(--bc); }
.vp .cr-leg i.est { background: repeating-linear-gradient(135deg, var(--neutral) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--neutral); }
.vp .cr-leg i.late { --bc: var(--danger); }
.vp .cr-leg i.now { width: 2px; height: 14px; border-radius: 0; background: var(--ink); }
.vp .cr-leg i.over { width: 8px; height: 12px; border-radius: 3px; background: var(--danger); }

/* ----- Produção: ações ----- */

/* ----- Produção: quadro ----- */
.vp .pr-kbwrap { position: relative; margin-top: var(--e2); }
.vp .pr-kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.vp .pr-kb:focus-visible { outline-offset: 6px; }

.pr-ghost { position: fixed; left: 0; top: 0; z-index: 90; margin: 0; pointer-events: none; opacity: .94; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .55); transition: none; border-radius: 20px; background: var(--card); padding: 14px; display: grid; gap: 10px; }
.pr-arrastando { cursor: grabbing; }

/* ----- responsivo: o container .vp, não a janela ----- */
@container (max-width: 1000px) {
  .vp .cr-ent__a { grid-template-columns: 56px minmax(0,1fr) auto; }
}
@container (max-width: 920px) {
  .vp .vp-duo { grid-template-columns: minmax(0,1fr); }
}
@container (max-width: 720px) {
  .vp .op-tool { gap: 12px; } .vp .op-sp { display: none; } .vp .op-sel { flex: 1 1 100%; } .vp .op-sel select { max-width: none; flex: 1; }
   
  .vp .pr-kb { grid-auto-columns: 86%; }
  
  
  
  
  
  
  
   
   
  .vp .cr-ent__a { grid-template-columns: 52px minmax(0,1fr); } .vp .cr-ent__a > .st { grid-column: 2; justify-self: start; }
  .vp .cr-dia { font-size: 22px; }
  .vp .cr-g { --day: 30px; border-top: 0; }
  .vp .cr-in { width: calc(var(--days) * var(--day)); }
  .vp .cr-row { display: block; min-height: 0; padding-bottom: 10px; }
  .vp .cr-lab { display: block; position: sticky; width: var(--vw, 300px); padding: 12px 0 2px; background: var(--surface); } /* opaco: a linha "hoje" não cruza o nome do job */
  .vp .cr-tr { height: 56px; }
  .vp .cr-cols { left: 0 !important; }
  .vp .cr-axis .cr-lab { display: none; } .vp .cr-axis .cr-tr { height: 52px; }
  .vp .cr-carga .cr-tr { height: 64px; } .vp .cr-carga .cr-lab small { display: none; }
  .vp .cr-bar, .vp .cr-atr { height: 44px; margin-top: -22px; }
  .vp .cr-h { width: 22px; }
}

/* Cronograma: entrega parcial na linha do tempo */
.vp .cr-pm { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg); background: var(--ink); box-shadow: 0 0 0 2px var(--surface); z-index: 2; pointer-events: auto; }
.vp .cr-pm.is-feita { background: var(--conv); }
.vp .cr-pm.is-late { background: var(--danger); }
.vp .cr-leg i.pm { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--ink); }

/* Cronograma: bandeira da próxima ação vencida ou de hoje, na data dela */
.vp .cr-pa { position: absolute; top: 50%; width: 22px; height: 22px; margin: -26px 0 0 -11px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--info-ink); box-shadow: inset 0 0 0 1.5px var(--info-ink); z-index: 2; pointer-events: auto; }
.vp .cr-pa.is-late { color: var(--danger-ink); box-shadow: inset 0 0 0 1.5px var(--danger-ink); }
.vp .cr-pa svg { width: 12px; height: 12px; display: block; }

/* Cronograma: o filtro de cliente da linha do tempo no topo âmbar (mesmo painel do Histórico, `.orc-topo`) */
.vp .cr-topo .op-tool { margin-top: var(--e2); }
.vp .cr-topo .op-sel { background: var(--ctl); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.vp .cr-corpo { padding: 0 clamp(20px, 2.4cqi, 40px) clamp(20px, 2.4cqi, 40px); }
.vp .cr-corpo .cr-gw { margin-top: var(--e1); }

/* ============================================================
   Cronograma, direção C (canvas "Cronograma, desktop e celular")
   ============================================================ */
.cr-cab { flex: 1.1 1 620px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.cr-cab__n { display: flex; align-items: flex-end; gap: 22px; }
.cr-cab__v { font: 600 clamp(80px, 10vw, 150px)/.8 var(--font-display); letter-spacing: -.07em; color: var(--gold); }
.cr-cab__t { padding-bottom: 2px; font: 500 clamp(22px, 2.2vw, 30px)/1.05 var(--font-display); letter-spacing: -.04em; }
.vp .cr-cab__a { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.cr-cab__l { margin-top: auto; padding-top: 6px; border-top: 1.5px solid var(--ink-2); }
.cr-cab__l ul { margin: 4px 0 0; padding: 0; list-style: none; }
.cr-cab__l .vg-cap { margin: 10px 0 2px; }
.cr-cab .btn--ghost { color: var(--on-painel); }
.cr-carga { flex: 1 1 480px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.cr-pz { padding: 28px; }
.cr-pz__t { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cr-pz__t .vg-h2 { margin-top: 6px; }
.vp .cr-pz__d { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 560px; text-align: right; }
.cr-pz__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.cr-dec { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 26px; background: var(--campo); }
.cr-dec__chip { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); font: 700 13px var(--font); color: var(--ink-2); }
.cr-dec__t { font: 600 24px/1.05 var(--font-display); letter-spacing: -.04em; }
.cr-dec__c { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.cr-dec__x { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.cr-dec__a { margin-top: auto; display: flex; gap: 8px; }
.cr-dec__a .btn { margin-top: 0; justify-content: center; white-space: nowrap; }
.cr-dec__a .btn:first-child { flex: 1; }
.cr-lt { padding: 28px; }
.cr-lt__t { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cr-lt__t small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 1100px) { .cr-pz__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cr-cab, .cr-carga, .cr-pz, .cr-lt { padding: 22px; }
  .cr-cab__v { font-size: 96px; }
  .cr-pz__g { grid-template-columns: minmax(0, 1fr); } .vp .cr-pz__d { text-align: left; }
}

/* Carga por semana do Cronograma: usa os componentes da carga da Visão geral (.vg-semana, .vg-plot, .vg-dds…) com N colunas semanais. */
.cr-cargasem .vg-plot, .cr-cargasem .vg-dds { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.cr-cargasem .vg-dd span { white-space: nowrap; }
.cr-cargasem .vg-dd.is-hoje span { padding: 0 12px; border-radius: 999px; }
@media (max-width: 720px) {
  .cr-cargasem .vg-dd span { font-size: 13px; }
  .cr-cargasem .vg-dd.is-hoje span { padding: 0 8px; min-width: 0; }
}

/* Linha do tempo: alcance (Dias/7 semanas × 3 meses) e linha de dias com a letra da semana. */
.cr-lt__f { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cr-zoom__d { display: none; }
.vp .cr-axis--dias { min-height: 78px; }
.vp .cr-axis--dias .cr-tick { bottom: auto; top: 6px; }
.vp .cr-dn { position: absolute; isolation: isolate; bottom: 8px; display: grid; justify-items: center; gap: 2px; font: 600 12px/1 var(--font); color: var(--ink-2); }
.vp .cr-dn i { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--ink-3); }
.vp .cr-dn.is-wk { color: var(--ink-3); }
.vp .cr-dn.is-hoje { color: var(--on-gold); }
.vp .cr-dn.is-hoje i { color: var(--on-gold); }
.vp .cr-dn.is-hoje::before { content: ""; position: absolute; left: 50%; top: -5px; bottom: -4px; width: min(100%, 26px); transform: translateX(-50%); border-radius: 999px; background: var(--gold); z-index: -1; }
@media (max-width: 720px) {
  .cr-zoom__d { display: inline; } .cr-zoom__s { display: none; }
  .vp .cr-axis--dias { min-height: 78px; } .vp .cr-axis--dias .cr-tr { height: 78px; }
  .cr-lt__f { width: 100%; } .cr-lt__f .vg-pill { flex: 1 1 auto; }
}
.vp .cr-g[style*="--day: 18px"] .cr-dn, .vp .cr-g[style*="--day: 19px"] .cr-dn, .vp .cr-g[style*="--day: 20px"] .cr-dn { font-size: 10.5px; letter-spacing: -.04em; }

/* Linha do tempo como o canvas 37: monograma, grade por dia, faixas de fim de semana, mês no topo, hoje em amarelo, barras cheias (estimativa tracejada, atraso vermelho com prolongamento tracejado). */
.vp .cr-cols i { border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.vp .cr-cols i.wk { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.vp .cr-cols i.hj { background: color-mix(in srgb, var(--gold) 26%, transparent); }
.vp .cr-cols i.mes { border-left: 2px solid var(--ink-2); }
.vp .cr-cols i.seg { border-left-color: color-mix(in srgb, var(--ink) 7%, transparent); }
.vp .cr-now { background: var(--gold); width: 3px; margin-left: -1.5px; }
.vp .cr-mes { position: absolute; top: 8px; padding-left: 8px; font: 700 11.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.vp .cr-row { border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.vp .cr-lab { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; }
.vp .cr-lab .vg-mono { width: 28px; height: 28px; font-size: 11px; }
.vp .cr-lab__t { display: flex; flex-direction: column; min-width: 0; }
.vp .cr-bar { --bc: var(--ink); background: var(--bc); color: var(--canvas); }
.vp .cr-bar__t { display: none; }
.vp .cr-bar.hj { --bc: var(--gold); }
.vp .cr-bar.late { --bc: var(--danger); }
.vp .cr-bar.est { background: transparent; box-shadow: none; border: 1.5px dashed var(--ink); }
.vp .cr-atr { background: transparent; border: 1.5px dashed var(--danger); border-left: 0; }
.vp .cr-flag { display: none; }
.vp .cr-leg i { --bc: var(--ink); }
.vp .cr-leg i.est { background: transparent; box-shadow: none; border: 1.5px dashed var(--ink); }
.vp .cr-leg i.late { --bc: var(--danger); }
.vp .cr-leg i.now { width: 14px; height: 10px; border-radius: 999px; background: var(--gold); }
@media (max-width: 720px) {
  .vp .cr-lab { display: flex; }
  .vp .cr-mes { top: 6px; }
}

@media (max-width: 720px) { .cr-sub-d { display: none; } }

/* Carga por semana como o canvas: sem linha do limite, rótulos "12–18 out", barras abaixo do limite hachuradas */
.cr-cargasem .vg-dd span { font-size: 13px; font-weight: 600; }
.cr-cargasem .vg-semana__f { font-size: 30px; }
.cr-cargasem .vg-plot { height: 190px; }

/* Celular (canvas): sem "Ver o quadro" e sem a frase da carga; rótulos pelo dia em que a semana começa */
.cr-so-c { display: none; }
@media (max-width: 720px) {
  .cr-so-d { display: none !important; }
  .cr-so-c { display: block; } span.cr-so-c { display: inline; }
  .cr-cab__v { font-size: 64px; }
  .cr-cab__t { font-size: 20px; }
  .cr-cargasem .vg-dd { display: grid; justify-items: center; gap: 0; }
  .cr-cargasem .vg-dd small { font-size: 12px; color: var(--ink-2); min-height: 14px; text-transform: lowercase; }
  .cr-cargasem .vg-plot { height: 150px; }
}

/* Linha do tempo (canvas): só os fins de semana têm fundo diferente; fios de linha e de dia contínuos; barras finas; rótulo compacto. */
.vp .cr-cols i { background: transparent; border-radius: 0; box-shadow: none; }
.vp .cr-cols i.wk { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.vp .cr-cols i.hj { background: color-mix(in srgb, var(--gold) 26%, transparent); }
.vp .cr-cols i.seg { border-left-color: color-mix(in srgb, var(--ink) 7%, transparent); }
.vp .cr-row { border-bottom: 0; min-height: 46px; }
.vp .cr-lab, .vp .cr-tr { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.vp .cr-axis .cr-lab, .vp .cr-axis .cr-tr { border-bottom-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.vp .cr-lab { padding: 6px 12px 6px 0; gap: 10px; }
.vp .cr-lab .vg-mono { width: 26px; height: 26px; font-size: 10.5px; }
.vp .cr-lab b { font-size: 14px; -webkit-line-clamp: 1; }
.vp .cr-lab small { font-size: 12px; }
.vp .cr-bar { height: 20px; margin-top: -10px; }
.vp .cr-bar.cut { border-radius: 0 999px 999px 0; }
.vp .cr-atr { height: 20px; margin-top: -10px; }
.vp .cr-mes { z-index: 4; background: var(--surface); padding: 0 8px 0 8px; margin-left: 0; }
.vp .cr-tick { z-index: 4; }
@media (max-width: 720px) {
  .vp .cr-g { --day: 28px; border-top: 0; }
  .vp .cr-in { width: calc(var(--lw) + var(--days) * var(--day)); }
  .vp .cr-row { display: grid; grid-template-columns: var(--lw) calc(var(--days) * var(--day)); min-height: 44px; padding-bottom: 0; }
  .vp .cr-lab { display: flex; position: sticky; left: 0; width: auto; padding: 6px 8px 6px 0; gap: 6px; background: var(--surface); z-index: 5; align-items: center; }
  .vp .cr-lab .vg-mono { display: grid; width: 22px; height: 22px; font-size: 9px; flex: none; }
  .vp .cr-lab__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .vp .cr-lab b { font-size: 12px; line-height: 1.15; -webkit-line-clamp: 2; }
  .vp .cr-lab small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .vp .cr-tr { height: 44px; }
  .vp .cr-cols { left: var(--lw) !important; }
  .vp .cr-axis .cr-lab { display: block; background: var(--surface); } .vp .cr-axis .cr-tr { height: 62px; }
  .vp .cr-axis--dias { min-height: 62px; } .vp .cr-axis--dias .cr-tr { height: 62px; }
  .vp .cr-bar, .vp .cr-atr { height: 18px; margin-top: -9px; }
  .vp .cr-dn { font-size: 11px; bottom: 4px; } .vp .cr-dn i { font-size: 9.5px; }
  .vp .cr-mes { top: 4px; font-size: 10.5px; }
  .vp .cr-pm, .vp .cr-pa { transform: scale(.8); }
}

/* Eixo com altura própria: o mês fica numa linha e os dias em outra, sem se sobrepor */
.vp .cr-axis, .vp .cr-axis.cr-row { min-height: 74px; }
.vp .cr-axis .cr-tr { height: 74px; }
.vp .cr-mes { top: 8px; line-height: 1.2; }
.vp .cr-dn { bottom: 6px; }
.vp .cr-hoje { top: 10px; }
@media (max-width: 720px) { .vp .cr-axis, .vp .cr-axis.cr-row { min-height: 66px; } .vp .cr-axis .cr-tr, .vp .cr-axis--dias .cr-tr { height: 66px; } }

/* A linha de hoje começa abaixo do eixo: não corta o mês, a letra nem o número do dia */
.vp .cr-now { top: 74px; }
.vp .cr-dn { z-index: 3; }
@media (max-width: 720px) { .vp .cr-now { top: 66px; } }

/* Cronograma: bandeiras dos itens do plano (marcos) */
.vp .cr-mc { color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--ink-3); z-index: 1; }
.vp .cr-mc.is-feita { color: var(--conv); box-shadow: inset 0 0 0 1.5px var(--conv); }
.vp .cr-mc.is-late { color: var(--danger-ink); box-shadow: inset 0 0 0 1.5px var(--danger-ink); }