/* ============================================================
   Quadro da Produção — restaurado do Studio v0.2.66 (kanban de colunas largas, cartões com capa/monograma/barra),
   a pedido do dono ("exatamente como estava"). Regras copiadas na ordem original; os seletores são os do Studio (.kb-*).
   ============================================================ */
.kb-board { display: flex; gap: var(--s3); align-items: stretch; overflow-x: auto; padding: 2px 2px var(--s4); scroll-snap-type: x proximity; scrollbar-color: var(--ink-3) transparent; border-radius: var(--radius-sm); }
.kb-board:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Coluna é um "leito" creme (não um cartão branco) — o branco é dos cards. */
.kb-col {
  flex: 0 0 304px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: background .12s, border-color .12s;
}
.kb-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 12px;
}
.kb-col__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.kb-col__count {
  background: var(--surface); border-radius: 999px;
  min-width: 24px; text-align: center; padding: 1px 8px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); flex: none;
}
.kb-col__dot { width: 7px; height: 7px; border-radius: 99px; background: var(--danger); flex: none; margin-left: auto; }
.kb-col__body { display: flex; flex-direction: column; gap: 9px; min-height: 96px; flex: 1; }
.kb-col__dropzone {
  flex: 1;
  min-height: 92px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 10px;
  color: var(--ink-3);
  font-size: 13px;
}
.kb-col__dropzone::before {
  content: "";
  width: 20px; height: 20px; border-radius: 99px; border: 1.5px dashed var(--line-strong);
}
/* Drop ativo: coluna sob o cursor acende em dourado. */
.kb-col.is-dragover { background: color-mix(in srgb, var(--gold) 28%, transparent); }
.kb-col--arquivado { background: transparent; border-color: var(--line-strong); border-style: dashed; }
.kb-col--arquivado .kb-col__title { color: var(--ink-2); }
.kb-card {
  display: block;
  background: var(--kb-card);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  cursor: grab;
  box-shadow: var(--shadow), 0 0 0 1px var(--kb-card-edge);
  transition: box-shadow .15s, opacity .12s, transform .15s;
}
.kb-card:hover { transform: translateY(-2px); }
.kb-card.is-dragging { opacity: .4; }
.kb-card__title { font-weight: 600; font-size: 15px; margin-top: 6px; line-height: 1.3; }
.kb-card__foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.kb-card__chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  height: 26px; padding: 0 10px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.kb-card__chip.is-late { background: var(--tint-clay); color: var(--danger-ink); }
.kb-card__chip.is-soon { background: var(--gold); color: var(--on-gold); }
.kb-card__chip.is-ok { background: var(--surface-2); color: var(--ink); }
.kb-card__chip.is-derivada, .kb-card__chip.is-nodata { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-2); }
.kb-card__chip.is-nodata { font-size: 12px; }
.kb-card__note { font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) { .kb-col { flex-basis: 82%; } }
.etapas-prog { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.etapas-prog__bar { flex: 1; height: 5px; border-radius: 3px; background: var(--panel-line); overflow: hidden; }
.etapas-prog__fill { height: 100%; background: var(--ok); border-radius: 3px; transition: width .2s; }
.etapas-prog__txt { font-size: 12px; font-weight: 600; color: var(--panel-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etapas-prog--cheia { margin: 0 0 12px; }
.etapas-prog--cheia .etapas-prog__bar { height: 8px; border-radius: 4px; }
.etapas-prog--cheia .etapas-prog__txt { font-size: 12px; }
.kb-card__title { font-size: 15px; color: var(--panel-ink); }
.kb-card__note { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.kb-card .etapas-prog__txt { color: var(--ink-3); font-size: 12px; }
.kb-card .etapas-prog__bar { background: var(--track); }
.kb-card--arq { box-shadow: none; background: color-mix(in srgb, var(--surface) 70%, transparent); cursor: pointer; }
.kb-card--arq .kb-card__title { color: var(--ink-2); }
.kb-card__chip.is-faturado { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--conv); }
.kb-card .etapas-prog__fill { background: var(--ink); }
.kb-col--arquivado { background: transparent; }
.kb-card .etapas-prog__fill { background: var(--cc, var(--ink)); }
.kb-card__mover { display: none; }
.dialog__lista { display: grid; gap: var(--s2); margin-top: var(--s4); }
.dialog__lista .btn { width: 100%; justify-content: flex-start; }
@media (pointer: coarse), (max-width: 720px) {
  .kb-card__mover {
    display: inline-flex; align-items: center; position: relative; margin-top: 10px; min-height: 36px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--ctrl-line); background: transparent; color: var(--ink-2);
    font: 600 13px var(--font); cursor: pointer;
  }
  .kb-card__mover::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
}
.kb-board { padding-bottom: 28px; }
.kb-dica { margin: 14px 0 0; position: relative; z-index: 0; }
.view .kb-col:not(.kb-col--arquivado) { box-shadow: inset 0 0 0 1px var(--line); }
.etapas-prog__bar, .progress { border-radius: 5px; }
.etapas-prog__fill, .progress i { border-radius: 5px; }
.etapas-prog__fill { background: var(--gold); }
.view .kb-card .etapas-prog__fill { background: var(--cc, var(--gold)); }
.kb-card__capa { margin: -16px -16px 12px; height: 104px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--cc, var(--surface-2)); } /* o que sobra em volta da arte é a cor do cliente */
.kb-card__capa img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } /* arte inteira, sem cortar */
/* no produto o dentro do .vp: botões herdam cor/fonte (.vp button); o Mover precisa do seu estilo */
.vp .kb-card__mover { color: var(--ink-2); font: 600 13px var(--font); }
.vp a.kb-card { text-decoration: none; color: inherit; }
.vp .kb-board { margin-top: var(--e2); }
/* o quadro rola por dentro: sem isso a grade da seção cresce e a página inteira rola de lado */
.vp .vp-sec > * { min-width: 0; }
.vp .pr-kbwrap { min-width: 0; max-width: 100%; }
.vp { grid-template-columns: minmax(0, 1fr); }

/* topo da Produção: tiles do Studio v0.2.66 e chips, sem fios (regras-ui.md, 4b) */
.vp .pr-tiles { margin-bottom: 0; }
.vp .pr-tiles .kpicard { display: flex; flex-direction: column; }
.vp .pr-tiles .kpicard > .btn { align-self: flex-start; margin-top: var(--s4); }
.vp .pr-semdata { font-size: 14px; color: var(--ink-2); }
.vp .pr-semdata a { font-weight: 600; color: var(--ink); }
.vp .filterbar { margin: 0; padding-bottom: 0; border-bottom: 0; }
.vp .filterbar .op-sp { flex: 1; }
.vp .filterbar .chip-toggle { font: 600 13px var(--font); }
@container (max-width: 720px) { .vp .filterbar .op-sp { display: none; } }
/* tiles separados e coloridos (o style.css do produto os funde num painel com divisórias) */
.vp .grid--kpi.pr-tiles { gap: var(--s4); background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.vp .pr-tiles > .kpicard { border-left: 0; border-radius: var(--radius); box-shadow: none; }
.vp .pr-tiles > .kpicard { background-color: var(--surface); }
/* Direção C: Atrasados = painel escuro (numeral em destaque); Em produção = bloco médio; os demais, cartão */
.vp .pr-tiles > .vp-painel { background-color: var(--bloco-painel); }
.vp .pr-tiles > .vp-medio { background-color: var(--bloco-medio); }
.vp .pr-tiles .kpicard__eyebrow { display: flex; align-items: center; gap: 10px; }
.vp .pr-tiles .kpicard__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.vp .pr-tiles .kpicard--gold .kpicard__eyebrow::before { background: var(--gold); }
.vp .pr-tiles .kpicard--danger .kpicard__eyebrow::before { background: var(--danger); }
.vp .pr-tiles .kpicard--graphite .kpicard__eyebrow::before { background: var(--info); }
@container (max-width: 720px) { .vp .pr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vp .pr-tiles .kpicard { padding: 16px; } .vp .pr-tiles .kpicard__value { font-size: 36px; } }
/* topo compacto: quatro tiles baixos e uma linha com os não iniciados; o quadro é o foco da tela */
.vp .grid--kpi.pr-tiles { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s3); }
.vp .pr-tiles > .kpicard { padding: 24px 28px; display: block; }
.vp .pr-tiles .vp-painel .kpicard__value { font: 600 clamp(72px, 8cqi, 110px)/.9 var(--font-display); letter-spacing: -.05em; color: var(--gold); }
.vp .pr-tiles .vp-painel.kpicard--danger .kpicard__value { color: var(--gold); }
.vp .pr-gargalo { margin-top: var(--s3); font: 500 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.vp .pr-gargalo b { color: var(--alerta-sobre-painel); font-weight: 500; }
/* Jobs por etapa (bloco médio): uma barra por etapa, altura pelo número de jobs */
.vp .pr-etapas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: end; margin-top: var(--s3); height: 76px; }
.vp .pr-etapas > span { display: grid; gap: 4px; justify-items: center; align-content: end; height: 100%; font-size: 11px; font-weight: 600; text-align: center; }
.vp .pr-etapas i { display: block; width: 100%; border-radius: 8px 8px 3px 3px; background: var(--on-medio); opacity: .75; min-height: 4px; }
.vp .pr-etapas > span.is-garg i { background: var(--alerta); opacity: 1; }
.vp .pr-tiles .kpicard__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.vp .pr-tiles .kpicard__row { flex-wrap: wrap; margin-top: var(--s2); gap: 2px 10px; }
.vp .pr-tiles .kpicard__value { font-size: 40px; }
.vp .pr-tile-nota { margin-top: var(--s3); font-size: 13px; color: var(--ink-2); }
.vp .pr-tile-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--s3); min-width: 0; }
.vp .pr-tiles > .kpicard { min-width: 0; overflow: hidden; }
.vp .pr-tile-ir { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.vp .pr-tile-ir__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp .pr-tile-ir__d { font-size: 12.5px; color: var(--ink-2); flex: none; }
.vp .pr-tile-ir .vx-svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.vp .pr-tile-ir:hover .pr-tile-ir__t { text-decoration: underline; text-underline-offset: 3px; }
.vp .pr-tile-mais { font-size: 12.5px; color: var(--ink-2); padding-top: 2px; }
.vp .kpicard--danger .pr-tile-ir__d { color: var(--danger-ink); }
@media (pointer: coarse) { .vp .pr-tile-ir { min-height: 44px; } }
@container (max-width: 720px) { .vp .pr-tiles > .kpicard:nth-child(n+1) { grid-column: 1 / -1; } .vp .grid--kpi.pr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vp .pr-tiles > .kpicard { padding: 14px 16px; } .vp .pr-tiles .kpicard__value { font-size: 34px; } }
/* Produção: espaços menores entre as faixas, para o quadro subir */
.vp.vp--prod { gap: var(--e2); }
.vp--prod > .vp-sec { gap: var(--e2); }

/* bandeira da próxima ação no rodapé do cartão (vencida = vermelho, hoje/amanhã = azul) */
.kb-card__acao { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; flex: none; }
.kb-card__acao svg { width: 14px; height: 14px; display: block; }
.kb-card__acao.is-late { background: var(--tint-clay); color: var(--danger-ink); }
.kb-card__acao.is-soon { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info-ink); }

/* celular: chips de cliente em grade de 2 colunas, nunca barra que rola escondendo opções (regras-ui.md, seção 4) */
@container (max-width: 720px) {
  #view .vp .filterbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; margin: 0; padding: 0; }
  #view .vp .filterbar > * { flex: initial; min-width: 0; }
  #view .vp .filterbar .filterbar__label { grid-column: 1 / -1; margin: 0; }
  #view .vp .filterbar .chip-toggle { height: auto; min-height: 44px; padding: 6px 12px; justify-content: center; white-space: normal; line-height: 1.15; text-align: center; }
  #view .vp .filterbar .chip-toggle--danger, #view .vp .filterbar .chip-toggle:last-child:nth-child(even) { grid-column: auto; }
}

/* Etapa-gargalo (regras-ui 13.4): cabeçalho em vermelho cheio */
.kb-col--gargalo .kb-col__head { background: var(--alerta); color: var(--on-alerta); border-radius: 18px; padding: 10px 12px; margin-bottom: 8px; }
.kb-col--gargalo .kb-col__title { color: var(--on-alerta); }
.kb-col--gargalo .kb-col__count { background: color-mix(in srgb, var(--on-alerta) 22%, transparent); color: var(--on-alerta); }
.kb-col--gargalo .kb-col__dot { background: var(--on-alerta); }


/* ============================================================
   Produção, direção C (canvas "Produção, desktop e celular")
   ============================================================ */
.pr-resumo { font-size: 17px; opacity: .85; }
.pr-novo-m { display: none; }
.pr-gar { flex: 1 1 100%; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.pr-gar__n { display: flex; align-items: flex-end; gap: 26px; }
.pr-gar__v { font: 600 clamp(110px, 12vw, 170px)/.78 var(--font-display); letter-spacing: -.07em; color: var(--gold); }
.pr-gar__t { padding-bottom: 2px; font: 500 clamp(22px, 2.4vw, 34px)/1.05 var(--font-display); letter-spacing: -.04em; }
.pr-gar__l { margin: auto 0 0; padding: 6px 0 0; list-style: none; border-top: 1.5px solid var(--ink-2); }
.pr-ferr { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pr-filtros { display: flex; flex-wrap: wrap; gap: 10px; }
.vg-pill.is-on select { color: var(--on-painel); }
.vg-pill.is-on .vg-pill__s { color: var(--on-painel); }
/* quadro: seis colunas iguais, cabeçalho de etapa em pílula, cartões de 24 px */
.vp--prod .kb-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; overflow: visible; padding: 0; border-radius: 0; scroll-snap-type: none; }
.vp--prod .kb-col, .view .vp--prod .kb-col:not(.kb-col--arquivado) { flex: none; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.vp--prod .kb-col__head { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--bloco-medio); color: var(--on-medio); margin: 0; }
.vp--prod .kb-col__title { font: 700 14px var(--font); color: inherit; }
.vp--prod .kb-col__count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0; border-radius: 999px; background: var(--bloco-painel); color: var(--on-painel); font: 700 14px var(--font); }
.vp--prod .kb-col--gargalo .kb-col__head { background: var(--alerta); color: var(--on-alerta); border-radius: 999px; padding: 0 6px 0 16px; margin: 0; }
.vp--prod .kb-col--gargalo .kb-col__title { color: var(--on-alerta); }
.vp--prod .kb-col--gargalo .kb-col__count { background: #fff; color: var(--alerta); }
.vp--prod .kb-col__body { gap: 12px; min-height: 0; }
.vp--prod .kb-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; background: var(--surface); color: var(--ink); border: 0; box-shadow: none; }
.kb-card__cli { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.vg-mono--p { width: 26px; height: 26px; font-size: 11px; }
.vp--prod .kb-card__title { font: 600 17px/1.15 var(--font-display); letter-spacing: -.02em; }
.vp--prod .etapas-prog__bar { height: 6px; border-radius: 3px; background: var(--campo-line); }
.vp--prod .etapas-prog__fill { height: 100%; border-radius: 3px; background: var(--bloco-painel); }
:root[data-theme="dark"] .vp--prod .etapas-prog__fill { background: #D9D5CA; }
.vp--prod .etapas-prog__txt { font-size: 12px; color: var(--ink-2); }
.vp--prod .kb-card__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vp--prod .kb-card__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 700 12px var(--font); border: 0; }
.vp--prod .kb-card__chip.is-late { background: var(--alerta); color: var(--on-alerta); }
.vp--prod .kb-card__chip.is-soon { background: var(--gold); color: var(--on-gold); }
.vp--prod .kb-card__chip.is-ok, .vp--prod .kb-card__chip.is-derivada { background: var(--bloco-medio); color: var(--on-medio); }
.vp--prod .kb-card__chip.is-nodata { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink-2); }
.kb-card__ic svg { width: 14px; height: 14px; display: block; }
.vp--prod .kb-card__note { font-size: 12px; color: var(--ink-2); }
.vp--prod .kb-card__acao { margin-left: auto; color: var(--danger-ink); display: grid; place-items: center; }
.vp--prod .kb-card__acao.is-soon { color: var(--ink-2); }
.vp--prod .kb-card__mover { display: none; }
@media (max-width: 1180px) { .vp--prod .kb-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pr-novo-m { display: inline-flex; min-height: 48px; padding: 0 18px; }
  .pr-novo-m { order: 2; flex: none; }
  .pr-gar { padding: 22px; }
  .pr-gar__v { font-size: 120px; } .pr-gar__t { font-size: 22px; }
  .pr-gar__l { border-top: 0; margin-top: 4px; padding: 0; }
  .pr-gar__l li:nth-child(n+2) { display: none; }
  .vp .pr-gar__l li .vg-row { border-radius: 20px; padding: 12px 14px; background: var(--cartao); color: var(--on-cartao); --ink: var(--on-cartao); --ink-2: var(--on-cartao-2); }
  .pr-gar__l .vg-row__t b { font-size: 15px; } .pr-gar__l .vg-row__t small { font-size: 13px; }
  .pr-ferr { margin-bottom: 8px; } .pr-novo { display: none; }
  .pr-filtros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); scrollbar-width: none; }
  .vp--prod .kb-card__mover { display: inline-flex; align-self: flex-start; }
}
.vp.vp--prod .kb-card .etapas-prog__fill { background: var(--bloco-painel); }
:root[data-theme="dark"] .vp.vp--prod .kb-card .etapas-prog__fill { background: #D9D5CA; }
.vp.vp--prod .kb-card .kb-card__chip { border: 0; box-shadow: none; }
.vp.vp--prod .kb-card .kb-card__chip.is-nodata { border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); }

/* Celular: cartão do job em grade compacta (0.4.220). Cliente e "Mover…" na primeira linha; título, progresso e prazo empilhados logo abaixo, sem linhas soltas. */
@media (max-width: 720px) {
  .vp--prod .kb-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 14px 16px; }
  .vp--prod .kb-card__cli { grid-row: 1; grid-column: 1; min-width: 0; }
  .vp--prod .kb-card__cli span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vp--prod .kb-card .kb-card__mover { grid-row: 1; grid-column: 2; margin: 0; min-height: 32px; padding: 0 12px; align-self: center; }
  .vp--prod .kb-card__title, .vp--prod .kb-card .etapas-prog, .vp--prod .kb-card__foot { grid-column: 1 / -1; margin: 0; }
  .vp--prod .kb-card__title { font-size: 18px; }
}

/* ============================================================
   Arrastar e mover (regras-ui 13.4): linha de inserção, etapa-alvo acesa, "Movido agora",
   faixa de etapas no celular e diálogo "Mover…" com posição.
   ============================================================ */
.kb-ins { position: relative; height: 0; margin: 10px 0; list-style: none; }
.kb-ins::before { content: ""; position: absolute; left: 4px; right: 4px; top: -2px; height: 4px; border-radius: 2px; background: var(--gold); }
.kb-ins i { position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 3px solid var(--bg); box-sizing: border-box; }
.kb-ins i:nth-child(1) { left: -2px; }
.kb-ins i:nth-child(2) { right: -2px; }
.kb-ins span { position: absolute; right: 14px; top: -34px; padding: 3px 9px; border-radius: 8px; background: var(--gold); color: var(--on-gold); font: 700 11px var(--font); white-space: nowrap; }
/* etapa-alvo: trilho lateral e cabeçalho cheios na cor de destaque; as outras escurecem enquanto arrasta */
.vp--prod .kb-col.is-dragover { box-shadow: inset 4px 0 0 var(--gold); padding-left: 4px; background: none; }
.vp--prod .kb-col.is-dragover .kb-col__head { background: var(--gold); color: var(--on-gold); }
.vp--prod .kb-col.is-dragover .kb-col__title { color: var(--on-gold); }
.vp--prod .kb-col.is-dragover .kb-col__count { background: var(--on-gold); color: var(--gold); min-width: 30px; width: auto; padding: 0 10px; }
.pr-arrastando .vp--prod .kb-col:not(.is-dragover) { opacity: .6; }
.vp--prod .kb-card.is-dragging { opacity: .55; outline: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); outline-offset: -2px; background: repeating-linear-gradient(135deg, var(--campo-line) 0 2px, transparent 2px 9px); }
.kb-card { position: relative; }
.kb-card.is-movido { outline: 3px solid var(--gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 28%, transparent); }
.kb-card__movido { position: absolute; right: 12px; top: -12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font: 700 11px var(--font); }
.kb-card__movido svg { width: 12px; height: 12px; display: block; }
.kb-card.is-pego { outline: 3px solid var(--gold); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .45); }
.kb-col__delta { margin: 0 6px 0 auto; padding: 3px 8px; border-radius: 999px; background: var(--campo-line); color: inherit; font: 700 11px var(--font); }
.kb-col__delta.is-mais { background: var(--gold); color: var(--on-gold); }
.kb-col__ordem { align-self: flex-start; border: 0; background: none; padding: 2px 4px; color: var(--ink-2); font: 600 12px var(--font); cursor: pointer; }
.kb-col__ordem u { text-underline-offset: 3px; }
.kb-vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* diálogo "Mover…": etapa e posição exata */
.dialog--mover { width: min(680px, calc(100vw - 24px)); }
.dialog--mover .cap { margin: 16px 0 8px; font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mv-titulo { margin: 0 0 4px; color: var(--ink) !important; font-weight: 600; }
.mv-etapas { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-etapa { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font: 600 14px var(--font); cursor: pointer; }
.mv-etapa em { font: 700 10px var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.mv-etapa.is-on { background: var(--bloco-painel); border-color: var(--bloco-painel); color: var(--on-painel); }
.mv-pos { display: flex; flex-direction: column; max-height: 38vh; overflow: auto; }
.mv-slot { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 6px 13px 10px; border: 0; border-top: 1.5px solid var(--line); border-left: 4px solid transparent; background: transparent; color: inherit; font: 600 14px var(--font); text-align: left; cursor: pointer; }
.mv-slot.is-on { border-left-color: var(--gold); font-weight: 700; }
.mv-slot__r { width: 22px; height: 22px; flex: none; box-sizing: border-box; border: 2px solid var(--line-strong); border-radius: 50%; }
.mv-slot.is-on .mv-slot__r { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 5px var(--surface); }
.mv-slot__t { flex: 1; min-width: 0; }
.mv-slot__t small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.mv-slot__aqui { padding: 3px 9px; border-radius: 8px; background: var(--gold); color: var(--on-gold); font: 700 11px var(--font); }
.mv-cartao { margin: 2px 0 2px 18px; padding: 8px 14px; border-left: 3px solid var(--line); font-size: 14px; color: var(--ink-2); }
@media (max-width: 720px) {
  .dialog--mover { margin: auto auto 8px; width: calc(100vw - 16px); border-radius: 30px; }
  .dialog--mover .dialog__acoes { flex-direction: column-reverse; }
  .dialog--mover .dialog__acoes .btn { width: 100%; }
}

/* Celular: kanban puro. Colunas lado a lado, rolando para o lado; o arraste é o mesmo do desktop (rolagem lateral nas bordas). */
@media (max-width: 720px) {
  .vp--prod .kb-board { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 14px; width: calc(100% + 32px); scrollbar-width: none; }
  .vp--prod .kb-board::-webkit-scrollbar { display: none; }
  .vp--prod .kb-col, .view .vp--prod .kb-col:not(.kb-col--arquivado) { flex: 0 0 min(84vw, 340px); scroll-snap-align: center; }
  .vp--prod .kb-col__head { display: flex; }
  .pr-arrastando .vp--prod .kb-board { scroll-snap-type: none; }
}

/* Produção (desktop): o gráfico "Jobs por etapa" saiu (a contagem já está no cabeçalho de cada coluna). O painel ocupa a linha toda:
   numeral e frase à esquerda, próximas ações à direita. */
@media (min-width: 1000px) {
  .pr-gar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 56px; row-gap: 18px; align-items: center; }
  .pr-gar > .vg-cap { grid-column: 1 / -1; }
  .pr-gar__l { margin: 0; padding: 0 0 0 44px; border-top: 0; border-left: 1.5px solid color-mix(in srgb, var(--on-painel) 30%, transparent); }
}

/* Tudo em dia na Produção (canvas "Estados"): selo, frase e atalho para o Cronograma */
.pr-gar__ok { display: grid; gap: 10px; justify-items: start; align-content: center; }
.pr-gar__ok p { margin: 0; font-size: 15px; line-height: 1.4; max-width: 44ch; }

/* Chip único (0.4.326): o chip do kanban com a mesma forma do .st (ver style.css, "Chip único") */
.kb-card__chip, .vp--prod .kb-card__chip, .vp.vp--prod .kb-card .kb-card__chip { display: inline-flex; align-items: center; gap: 0; height: 24px; padding: 0 12px; border: 0; border-radius: 999px;
  font: 600 12px/1 var(--font); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: none; }
.kb-card__chip.is-nodata, .vp--prod .kb-card__chip.is-nodata, .vp.vp--prod .kb-card .kb-card__chip.is-nodata { border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); padding: 0 10.5px; }
.kb-card__ic { display: inline-grid; place-items: center; margin-right: 5px; }
.kb-card__ic svg { width: 14px; height: 14px; display: block; }
.kb-card__chip.is-faturado, .vp--prod .kb-card__chip.is-faturado, .vp.vp--prod .kb-card .kb-card__chip.is-faturado { background: var(--st-fim-bg); color: var(--st-fim-fg); }
.kb-card__chip.is-late, .vp--prod .kb-card__chip.is-late { background: var(--alerta); color: var(--on-alerta); }
.kb-card__chip.is-soon, .vp--prod .kb-card__chip.is-soon { background: var(--gold); color: var(--on-gold); }
.kb-card__chip.is-ok, .vp--prod .kb-card__chip.is-ok, .vp--prod .kb-card__chip.is-derivada { background: var(--bloco-medio); color: var(--on-medio); }