/* Programação de Marketing — folha do app.
 *
 * Escrita ANTES do markup, com classes nomeadas e prefixadas `prg-`. Nenhum
 * `style="` no HTML fora de toggle de estado.
 *
 * NÃO é carregada no Cronograma de Coleção: aquela tela veio pronta da
 * consultoria externa e o Bootstrap reescreveria fonte, margem e botão dela.
 */

/* ─────────────────────────── tokens ─────────────────────────── */
:root {
  --prg-nav-h: 52px;
  --prg-side-w: 230px;
  --prg-side-w-min: 58px;
  --prg-ink: #1c2128;
  --prg-ink-2: #4a5461;
  --prg-muted: #79828f;
  --prg-rule: #dfe3e8;
  --prg-rule-soft: #eceff2;
  --prg-surface: #fff;
  --prg-surface-2: #f4f6f8;
  --prg-good: #1a7f4b;
  --prg-good-bg: #e8f5ee;
  --prg-warn: #8a5b00;
  --prg-warn-bg: #fdf3e0;
  --prg-danger: #b3261e;
  --prg-danger-bg: #fdeceb;
  --prg-info: #1a5f9e;
  --prg-info-bg: #e9f2fa;
}

/* ─────────────────────────── esqueleto ─────────────────────────── */
.prg-shell { display: flex; min-height: 100vh; }

.prg-side {
  width: var(--prg-side-w); flex: 0 0 var(--prg-side-w);
  background: #fff; border-right: 1px solid var(--prg-rule);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width .14s ease, flex-basis .14s ease;
}
.prg-side.is-min { width: var(--prg-side-w-min); flex-basis: var(--prg-side-w-min); }
.prg-side.is-min .prg-nav-label,
.prg-side.is-min .prg-side-marca-sub,
.prg-side.is-min .prg-side-grupo { display: none; }
/* Menu recolhido: a marca vira so a inicial. Encolher a fonte nao resolvia —
   COUROFINO nao cabe em 58px e vazava por cima do conteudo. */
.prg-side.is-min .prg-marca-resto { display: none; }
.prg-side.is-min .prg-side-marca { font-size: 1.5rem; letter-spacing: 0; text-align: center; }
.prg-side.is-min .prg-side-topo { padding-left: 0; padding-right: 0; }
.prg-side.is-min .prg-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }

.prg-side-topo { padding: .8rem .9rem .6rem; border-bottom: 1px solid var(--prg-rule-soft); overflow: hidden; }
.prg-side-marca {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 700; font-size: 1.45rem; color: var(--brand, #e30613);
  letter-spacing: .1em; line-height: 1;
}
.prg-side-marca-sub {
  font-size: .64rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--prg-muted); margin-top: .15rem;
}
.prg-side-nav { flex: 1 1 auto; overflow-y: auto; padding: .5rem 0 1rem; }
.prg-side-grupo {
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--prg-muted); padding: .8rem .95rem .3rem;
}
.prg-nav-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .46rem .95rem; color: var(--prg-ink-2); text-decoration: none;
  font-size: .875rem; cursor: pointer;
  /* São <button>: sem isto o navegador desenha a borda e o fundo dele. */
  background: none; border: 0; border-left: 3px solid transparent;
  text-align: left; font-family: inherit; appearance: none;
}
.prg-nav-item:hover { background: var(--prg-surface-2); color: var(--prg-ink); }
.prg-nav-item.is-ativo {
  background: #fdf0f1; color: var(--brand, #e30613);
  border-left-color: var(--brand, #e30613); font-weight: 600;
}
.prg-nav-item i { font-size: 1rem; flex: 0 0 auto; }
.prg-nav-badge {
  margin-left: auto; font-size: .68rem; font-weight: 600;
  background: var(--prg-danger-bg); color: var(--prg-danger);
  padding: .05rem .35rem; border-radius: 3px;
}
.prg-side.is-min .prg-nav-badge { display: none; }
.prg-side-pe { border-top: 1px solid var(--prg-rule-soft); padding: .5rem .6rem; }

.prg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.prg-topo {
  height: var(--prg-nav-h); flex: 0 0 var(--prg-nav-h);
  background: #fff; border-bottom: 1px solid var(--prg-rule);
  display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
  position: sticky; top: 0; z-index: 20;
}
.prg-topo-titulo { font-weight: 600; font-size: .98rem; color: var(--prg-ink); }
.prg-topo-sub { font-size: .76rem; color: var(--prg-muted); }
.prg-topo-dir { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.prg-quem { font-size: .8rem; color: var(--prg-ink-2); }

.prg-conteudo { padding: 1rem 1.15rem 3rem; }
.prg-conteudo.is-recarregando { opacity: .45; pointer-events: none; transition: opacity .1s; }

/* ─────────────────────────── cabeçalho de tela ─────────────────────────── */
.prg-tela-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin-bottom: .75rem; }
.prg-tela-h { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--prg-ink); }
.prg-tela-p { font-size: .82rem; color: var(--prg-muted); margin: .1rem 0 0; max-width: 78ch; }
.prg-tela-acoes { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }

.prg-prioridade {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: #fff; border: 1px solid var(--prg-rule); border-left: 3px solid var(--prg-good);
  border-radius: 4px; padding: .55rem .75rem; margin-bottom: .75rem;
}
.prg-prioridade.is-alerta { border-left-color: var(--prg-danger); background: #fffafa; }
.prg-prioridade-rot {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--prg-muted); margin-bottom: .08rem;
}
.prg-prioridade strong { display: block; font-size: .9rem; color: var(--prg-ink); line-height: 1.35; }
.prg-prioridade-acoes { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

/* ─────────────────────────── KPI ─────────────────────────── */
/* (rótulo, valor, legenda, estado) — a legenda diz o que o número conta e o
   estado sai do dado. Zero pendência é verde, não cinza. */
.prg-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: .55rem; margin-bottom: .9rem;
}
.prg-kpi {
  background: #fff; border: 1px solid var(--prg-rule); border-left: 3px solid var(--prg-muted);
  border-radius: 4px; padding: .55rem .7rem .6rem; min-width: 0;
}
.prg-kpi-rot {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--prg-muted);
}
.prg-kpi-val {
  font-size: 1.42rem; font-weight: 600; line-height: 1.15; color: var(--prg-ink);
  font-variant-numeric: tabular-nums; margin-top: .05rem;
  overflow-wrap: anywhere;
}
.prg-kpi-leg { font-size: .73rem; color: var(--prg-muted); line-height: 1.35; margin-top: .1rem; }
.prg-kpi.is-good { border-left-color: var(--prg-good); }
.prg-kpi.is-good .prg-kpi-val { color: var(--prg-good); }
.prg-kpi.is-warn { border-left-color: var(--prg-warn); }
.prg-kpi.is-warn .prg-kpi-val { color: var(--prg-warn); }
.prg-kpi.is-danger { border-left-color: var(--prg-danger); }
.prg-kpi.is-danger .prg-kpi-val { color: var(--prg-danger); }
.prg-kpi.is-neutro { border-left-color: var(--prg-info); }
.prg-kpi-acao {
  display: inline-block; margin-top: .25rem; font-size: .73rem; font-weight: 600;
  color: var(--brand, #e30613); text-decoration: none; cursor: pointer;
}
.prg-kpi-acao:hover { text-decoration: underline; }

/* ─────────────────────────── card / seção ─────────────────────────── */
.prg-card {
  background: #fff; border: 1px solid var(--prg-rule); border-radius: 4px;
  margin-bottom: .9rem;
}
.prg-card-topo {
  padding: .6rem .8rem .55rem; border-bottom: 1px solid var(--prg-rule-soft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
}
.prg-card-h { font-size: .92rem; font-weight: 600; margin: 0; color: var(--prg-ink); }
.prg-card-desc { font-size: .77rem; color: var(--prg-muted); margin: 0; flex-basis: 100%; }
.prg-card-cont { padding: .7rem .8rem .8rem; }
.prg-card-cont.is-flush { padding: 0; }
.prg-contador {
  font-size: .72rem; font-weight: 600; color: var(--prg-ink-2);
  background: var(--prg-surface-2); border: 1px solid var(--prg-rule);
  padding: .05rem .4rem; border-radius: 3px; white-space: nowrap;
}
.prg-card-dir { margin-left: auto; display: flex; gap: .35rem; align-items: center; }

/* regra do recorte — o que entra e o que fica de fora, em português */
.prg-metodo {
  font-size: .74rem; color: var(--prg-muted); line-height: 1.5;
  border-top: 1px dashed var(--prg-rule); padding: .5rem .8rem .6rem;
  background: var(--prg-surface-2);
}
.prg-metodo b { color: var(--prg-ink-2); font-weight: 600; }
.prg-metodo summary { cursor: pointer; color: var(--prg-ink-2); font-weight: 600; }
.prg-metodo div { margin-top: .35rem; }

/* ─────────────────────────── filtros ─────────────────────────── */
.prg-filtros {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .7rem;
}
.prg-filtros-principais {
  background: #fff; border: 1px solid var(--prg-rule); border-radius: 4px;
  padding: .45rem; margin-bottom: .45rem;
}
.prg-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; padding: .2rem .55rem; border-radius: 3px;
  border: 1px solid var(--prg-rule); background: #fff; color: var(--prg-ink-2);
  cursor: pointer; white-space: nowrap;
}
.prg-chip:hover { background: var(--prg-surface-2); }
.prg-chip.is-ativo {
  background: var(--brand, #e30613); border-color: var(--brand, #e30613);
  color: #fff; font-weight: 600;
}
.prg-chip.is-ativo:hover { background: var(--brand-dark, #c50011); }
.prg-chip-n { font-variant-numeric: tabular-nums; opacity: .72; }
.prg-chip.is-ativo .prg-chip-n { opacity: .9; }
.prg-chip-cor { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.prg-busca { margin-left: auto; min-width: min(320px, 100%); max-width: 440px; }
/* Separa grupos de filtro que decidem coisas diferentes (período × estado). */
.prg-filtro-sep { width: 1px; align-self: stretch; background: var(--prg-rule); margin: 0 .15rem; }

.prg-filtros-tipos {
  border: 1px solid var(--prg-rule); border-radius: 4px; background: #fff;
  margin-bottom: .7rem; padding: .4rem .55rem 0;
}
.prg-filtros-tipos summary {
  cursor: pointer; font-size: .78rem; color: var(--prg-ink-2); font-weight: 600;
  margin-bottom: .4rem;
}
.prg-filtros-tipos .prg-filtros { margin-bottom: .55rem; }

.prg-filtro-ativo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  background: var(--prg-info-bg); border: 1px solid #cfe0ef; border-radius: 4px;
  padding: .35rem .6rem; font-size: .8rem; color: var(--prg-info); margin-bottom: .6rem;
}
.prg-filtro-ativo b { font-weight: 600; }

/* ─────────────────────────── tabela ─────────────────────────── */
.prg-tw { overflow-x: auto; }
.prg-tab { width: 100%; border-collapse: collapse; font-size: .82rem; }
.prg-tab th, .prg-tab td {
  padding: .38rem .55rem; border-bottom: 1px solid var(--prg-rule-soft);
  text-align: left; vertical-align: top; line-height: 1.35;
}
.prg-tab thead th {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--prg-muted); background: var(--prg-surface-2);
  border-bottom: 1px solid var(--prg-rule); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.prg-tab thead th.is-ord { cursor: pointer; user-select: none; }
.prg-tab thead th.is-ord:hover { color: var(--prg-ink); }
.prg-tab tbody tr:hover { background: #fafbfc; }
.prg-tab tbody tr.is-clicavel { cursor: pointer; }
.prg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* `.prg-tab td` (0,1,1) vence `.prg-num` (0,1,0): sem esta linha o número da
   célula voltava para a esquerda e desalinhava do próprio cabeçalho. */
.prg-tab th.prg-num,
.prg-tab td.prg-num { text-align: right; }
.prg-neg { color: var(--prg-danger); }
.prg-nowrap { white-space: nowrap; }
.prg-trunc { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prg-tab-total td { font-weight: 600; background: var(--prg-surface-2); border-top: 1px solid var(--prg-rule); }
.prg-sub { font-size: .72rem; color: var(--prg-muted); display: block; }
.prg-criacao-lista .prg-tab td:first-child { min-width: 260px; }
.prg-criacao-lista .prg-tab td:nth-child(2) { min-width: 220px; }
.prg-criacao-lista tr.is-risco td { background: #fffafa; }
.prg-criacao-lista tr.is-risco:hover td { background: #fff4f4; }
.prg-operacional-lista .prg-tab td:first-child { min-width: 230px; }
.prg-operacional-lista tr.is-risco td { background: #fffafa; }
.prg-operacional-lista tr.is-risco:hover td { background: #fff4f4; }

/* ─────────────────────────── selo de estado ─────────────────────────── */
.prg-selo {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600; padding: .05rem .4rem; border-radius: 3px;
  border: 1px solid; white-space: nowrap;
}
.prg-selo.t-good { color: var(--prg-good); border-color: #b7dfc8; background: var(--prg-good-bg); }
.prg-selo.t-warn { color: var(--prg-warn); border-color: #ecd4a4; background: var(--prg-warn-bg); }
.prg-selo.t-danger { color: var(--prg-danger); border-color: #f0bfbc; background: var(--prg-danger-bg); }
.prg-selo.t-info { color: var(--prg-info); border-color: #c3daee; background: var(--prg-info-bg); }
.prg-selo.t-neutro { color: var(--prg-ink-2); border-color: var(--prg-rule); background: var(--prg-surface-2); }

/* ─────────────────────────── vazio, erro, frescor ─────────────────────────── */
/* Vazio é resultado, não ausência: a versão boa diz o que está resolvido. */
.prg-vazio {
  padding: 1.6rem 1rem; text-align: center; color: var(--prg-ink-2);
}
.prg-vazio i { font-size: 1.6rem; color: var(--prg-muted); display: block; margin-bottom: .35rem; }
.prg-vazio-t { font-weight: 600; font-size: .9rem; margin-bottom: .15rem; }
.prg-vazio-d { font-size: .8rem; color: var(--prg-muted); max-width: 56ch; margin: 0 auto; line-height: 1.5; }
.prg-vazio.t-good i { color: var(--prg-good); }

.prg-erro {
  border: 1px solid #f0bfbc; background: var(--prg-danger-bg); border-radius: 4px;
  padding: .7rem .85rem; color: #7f1d17; font-size: .84rem; margin-bottom: .8rem;
}
.prg-erro-t { font-weight: 600; margin-bottom: .1rem; }
.prg-erro-d { color: #8f3b34; line-height: 1.45; }
.prg-erro details { margin-top: .4rem; }
.prg-erro summary { cursor: pointer; font-size: .74rem; color: #8f3b34; }

.prg-frescor {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .75rem; color: var(--prg-muted); margin-bottom: .7rem;
}
.prg-frescor.t-warn { color: var(--prg-warn); }

/* ─────────────────────────── calendário do mês ─────────────────────────── */
.prg-mes-nav { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.prg-mes-btn {
  border: 1px solid var(--prg-rule); background: #fff; border-radius: 3px;
  font-size: .76rem; padding: .18rem .5rem; cursor: pointer; color: var(--prg-ink-2);
  font-variant-numeric: tabular-nums;
}
.prg-mes-btn:hover { background: var(--prg-surface-2); }
.prg-mes-btn.is-ativo { background: var(--prg-ink); border-color: var(--prg-ink); color: #fff; font-weight: 600; }
.prg-mes-btn.is-vazio { color: var(--prg-danger); border-style: dashed; }
.prg-mes-btn .prg-mes-n { font-size: .68rem; opacity: .7; margin-left: .2rem; }
.prg-aviso-planejamento { margin-top: -.35rem; }

.prg-bloco { border-bottom: 1px solid var(--prg-rule); }
.prg-bloco:last-child { border-bottom: 0; }
.prg-bloco-topo {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem;
  background: var(--prg-surface-2); cursor: pointer; user-select: none;
}
.prg-bloco-cor { width: 4px; align-self: stretch; border-radius: 2px; flex: 0 0 4px; }
.prg-bloco-nome { font-weight: 600; font-size: .84rem; color: var(--prg-ink); }
.prg-bloco-meta { font-size: .74rem; color: var(--prg-muted); margin-left: auto; }
.prg-bloco-corpo { display: block; }
.prg-bloco.is-fechado .prg-bloco-corpo { display: none; }

.prg-linha {
  display: grid; grid-template-columns: 96px minmax(220px, 1fr) 170px 150px 112px;
  gap: .5rem; padding: .4rem .8rem; border-top: 1px solid var(--prg-rule-soft);
  align-items: start; font-size: .82rem;
}
.prg-linha:hover { background: #fafbfc; }
.prg-linha.is-atrasada { background: #fdf6f5; }
.prg-linha.is-feita .prg-linha-t { color: var(--prg-muted); text-decoration: line-through; }
.prg-linha-data { font-variant-numeric: tabular-nums; color: var(--prg-ink-2); font-size: .78rem; }
.prg-linha-t { color: var(--prg-ink); line-height: 1.35; overflow-wrap: anywhere; }
.prg-linha-sub { font-size: .73rem; color: var(--prg-muted); margin-top: .1rem; }
.prg-linha-dono { font-size: .78rem; color: var(--prg-ink-2); }
.prg-linha-acoes { display: flex; gap: .25rem; justify-content: flex-end; flex-wrap: wrap; }
.prg-linha-situacao { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.prg-linha-alerta {
  display: inline-flex; align-items: center; gap: .2rem; max-width: 100%;
  font-size: .7rem; color: var(--prg-muted); line-height: 1.25;
}
.prg-linha-alerta.t-danger { color: var(--prg-danger); font-weight: 600; }

.prg-mini {
  border: 1px solid var(--prg-rule); background: #fff; border-radius: 3px;
  font-size: .72rem; padding: .1rem .4rem; cursor: pointer; color: var(--prg-ink-2);
  white-space: nowrap;
}
.prg-mini:hover { background: var(--prg-surface-2); color: var(--prg-ink); }
.prg-mini.t-danger { border-color: #f0bfbc; color: var(--prg-danger); background: #fffafa; }
.prg-mini.t-good:hover { border-color: #b7dfc8; background: var(--prg-good-bg); color: var(--prg-good); }
.prg-mini.t-danger:hover { border-color: #f0bfbc; background: var(--prg-danger-bg); color: var(--prg-danger); }
.prg-mini[disabled] { opacity: .45; cursor: not-allowed; }

/* ─────────────────────────── réguas do retorno ─────────────────────────── */
.prg-reguas { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: .6rem; }
.prg-regua { border: 1px solid var(--prg-rule); border-radius: 4px; padding: .65rem .75rem; background: #fff; }
.prg-regua-n { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--prg-muted); }
.prg-regua-v { font-size: 1.32rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--prg-ink); line-height: 1.2; }
.prg-regua-d { font-size: .74rem; color: var(--prg-muted); line-height: 1.4; margin-top: .2rem; }
.prg-regua-lista { font-size: .76rem; color: var(--prg-ink-2); margin-top: .4rem; display: grid; gap: .1rem; }
.prg-regua-lista span { display: flex; justify-content: space-between; gap: .5rem; }
.prg-regua-lista b { font-weight: 600; font-variant-numeric: tabular-nums; }
.prg-regua.is-indisponivel { background: var(--prg-surface-2); }
.prg-regua.is-indisponivel .prg-regua-v { color: var(--prg-muted); font-size: .95rem; }

.prg-barra { height: 8px; background: var(--prg-rule-soft); border-radius: 4px; overflow: hidden; margin-top: .35rem; }
.prg-barra > i { display: block; height: 100%; background: var(--brand, #e30613); }
.prg-barra.t-good > i { background: var(--prg-good); }
.prg-barra.t-warn > i { background: var(--prg-warn); }

/* ─────────────────────────── formulário ─────────────────────────── */
.prg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem .7rem; }
.prg-campo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.prg-campo.is-largo { grid-column: 1 / -1; }
.prg-campo label { font-size: .74rem; font-weight: 600; color: var(--prg-ink-2); }
.prg-campo .prg-ajuda,
.prg-campo small { font-size: .71rem; color: var(--prg-muted); line-height: 1.35; }
.prg-campo input, .prg-campo select, .prg-campo textarea {
  border: 1px solid var(--prg-rule); border-radius: 3px; padding: .28rem .45rem;
  font-size: .84rem; font-family: inherit; color: var(--prg-ink); background: #fff; width: 100%;
}
.prg-campo input:focus, .prg-campo select:focus, .prg-campo textarea:focus {
  outline: 2px solid #f7c4c7; border-color: var(--brand, #e30613);
}
.prg-campo textarea { resize: vertical; min-height: 62px; }
.prg-obrig::after { content: ' *'; color: var(--brand, #e30613); }

/* ─────────────────────────── diálogo ─────────────────────────── */
/* `confirm()` nativo não é confirmação de ação destrutiva. */
.prg-modal {
  position: fixed; inset: 0; background: rgba(20, 24, 30, .48);
  display: flex; align-items: center; justify-content: center; z-index: 1080; padding: 1rem;
}
.prg-modal[hidden] { display: none; }
.prg-modal-cx {
  background: #fff; border-radius: 6px; width: 100%; max-width: 720px;
  max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 18px 48px rgba(0,0,0,.3);
}
.prg-modal-cx.is-estreito { max-width: 460px; }
.prg-modal-topo {
  padding: .7rem .9rem .6rem; border-bottom: 1px solid var(--prg-rule);
  display: flex; align-items: baseline; gap: .6rem;
}
.prg-modal-h { font-size: .98rem; font-weight: 600; margin: 0; }
.prg-modal-sub { font-size: .78rem; color: var(--prg-muted); }
.prg-modal-corpo { padding: .85rem .9rem; overflow-y: auto; }
.prg-modal-pe {
  padding: .6rem .9rem; border-top: 1px solid var(--prg-rule);
  display: flex; gap: .45rem; justify-content: flex-end; flex-wrap: wrap;
}
.prg-modal-x { margin-left: auto; border: 0; background: none; font-size: 1.15rem; color: var(--prg-muted); cursor: pointer; line-height: 1; }
.prg-modal-x:hover { color: var(--prg-ink); }

/* ─────────────────────────── aviso e toast ─────────────────────────── */
.prg-aviso {
  border-left: 3px solid var(--prg-warn); background: var(--prg-warn-bg);
  padding: .5rem .7rem; border-radius: 3px; font-size: .8rem; color: #6f4a02;
  margin-bottom: .7rem; line-height: 1.45;
}
.prg-aviso.t-info { border-left-color: var(--prg-info); background: var(--prg-info-bg); color: #144a7c; }
.prg-aviso.t-danger { border-left-color: var(--prg-danger); background: var(--prg-danger-bg); color: #7f1d17; }
.prg-aviso b { font-weight: 600; }

.prg-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: grid; gap: .4rem; }
.prg-toast {
  background: var(--prg-ink); color: #fff; border-radius: 4px; padding: .5rem .75rem;
  font-size: .82rem; box-shadow: 0 8px 22px rgba(0,0,0,.25); max-width: 380px;
}
.prg-toast.t-good { background: var(--prg-good); }
.prg-toast.t-danger { background: var(--prg-danger); }

.prg-carregando { padding: 2rem 1rem; text-align: center; color: var(--prg-muted); font-size: .86rem; }

/* ─────────────────────────── responsivo ─────────────────────────── */
@media (max-width: 1100px) {
  .prg-linha { grid-template-columns: 88px 1fr 142px; }
  .prg-linha-dono { grid-column: 2; }
  .prg-linha-acoes { grid-column: 3; }
}
@media (max-width: 820px) {
  .prg-side { position: fixed; z-index: 1050; left: 0; top: 0; transform: translateX(-100%); transition: transform .16s ease; }
  .prg-side.is-aberta { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.28); }
  .prg-side.is-min { width: var(--prg-side-w); flex-basis: var(--prg-side-w); }
  .prg-side.is-min .prg-nav-label, .prg-side.is-min .prg-side-marca-sub, .prg-side.is-min .prg-side-grupo { display: block; }
  .prg-side.is-min .prg-marca-resto { display: inline; }
  .prg-side.is-min .prg-side-marca { text-align: left; letter-spacing: .1em; }
  .prg-side.is-min .prg-side-topo { padding-left: .9rem; padding-right: .9rem; }
  .prg-conteudo { padding: .8rem .7rem 3rem; }
  .prg-linha { grid-template-columns: 1fr; gap: .2rem; }
  .prg-linha-acoes { justify-content: flex-start; }
  .prg-kpis { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .prg-prioridade { align-items: flex-start; flex-direction: column; }
  .prg-prioridade-acoes { justify-content: flex-start; }
  .prg-busca { margin-left: 0; max-width: 100%; }
  .prg-tela-acoes { margin-left: 0; flex-basis: 100%; }
  .prg-topo-sub { display: none; }
  .prg-criacao-lista.prg-tw { overflow-x: visible; }
  .prg-operacional-lista.prg-tw { overflow-x: visible; }
  .prg-criacao-lista .prg-tab,
  .prg-criacao-lista .prg-tab tbody,
  .prg-criacao-lista .prg-tab tr,
  .prg-criacao-lista .prg-tab td,
  .prg-operacional-lista .prg-tab,
  .prg-operacional-lista .prg-tab tbody,
  .prg-operacional-lista .prg-tab tr,
  .prg-operacional-lista .prg-tab td { display: block; width: 100%; }
  .prg-criacao-lista .prg-tab thead,
  .prg-operacional-lista .prg-tab thead { display: none; }
  .prg-criacao-lista .prg-tab tr {
    border-top: 1px solid var(--prg-rule-soft); padding: .55rem .7rem;
  }
  .prg-operacional-lista .prg-tab tr {
    border-top: 1px solid var(--prg-rule-soft); padding: .55rem .7rem;
  }
  .prg-criacao-lista .prg-tab td {
    border-bottom: 0; padding: .12rem 0; min-width: 0 !important;
  }
  .prg-operacional-lista .prg-tab td {
    border-bottom: 0; padding: .12rem 0; min-width: 0 !important;
  }
  .prg-criacao-lista .prg-tab td.prg-num { text-align: left; padding-top: .35rem; }
  .prg-operacional-lista .prg-tab td.prg-num { text-align: left; padding-top: .35rem; }
}
/* ── três visões do mês: lista, calendário e linha do tempo ── */
.prg-card-topo .prg-visao { margin-left: auto; align-self: center; }
.prg-visao { display: inline-flex; border: 1px solid var(--prg-rule); border-radius: 7px; overflow: hidden; }
.prg-visao button {
  border: 0; background: #fff; color: var(--prg-muted);
  font-size: .78rem; font-weight: 600; padding: .3rem .7rem;
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
}
.prg-visao button + button { border-left: 1px solid var(--prg-rule); }
.prg-visao button:hover { background: var(--prg-surface-2); color: var(--prg-ink); }
.prg-visao button.is-ativo { background: var(--prg-ink); color: #fff; }

/* Calendário: a grade é do mês inteiro, não da semana — a pergunta aqui é
   "o que cai no dia 12", e mês curto some se a grade for rolável. */
.prg-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--prg-rule-soft); }
.prg-cal-dia-rot {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--prg-muted); padding: .4rem .5rem; text-align: center;
  border-bottom: 1px solid var(--prg-rule-soft); background: var(--prg-surface-2);
}
.prg-cal-cel {
  min-height: 104px; padding: .3rem .35rem .45rem;
  border-right: 1px solid var(--prg-rule-soft); border-bottom: 1px solid var(--prg-rule-soft);
  display: flex; flex-direction: column; gap: .18rem; min-width: 0;
}
.prg-cal-cel:nth-child(7n) { border-right: 0; }
.prg-cal-cel.is-fora { background: #fbfcfd; }
.prg-cal-cel.is-fds { background: #fafbfc; }
.prg-cal-cel.is-hoje { box-shadow: inset 0 0 0 2px var(--brand, #e30613); }
.prg-cal-cel.is-risco { background: #fffafa; }
.prg-cal-cel.is-cheio .prg-cal-n small { color: var(--prg-info); }
.prg-cal-n {
  font-size: .74rem; font-weight: 700; color: var(--prg-ink);
  display: flex; justify-content: space-between; align-items: center; width: 100%;
}
button.prg-cal-n { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
button.prg-cal-n:hover { color: var(--brand, #e30613); }
.prg-cal-cel.is-fora .prg-cal-n { color: var(--prg-muted); font-weight: 500; }
.prg-cal-n small { font-weight: 600; color: var(--prg-muted); }
.prg-cal-chip {
  display: flex; align-items: center; gap: .3rem; width: 100%;
  border: 0; background: var(--prg-surface-2); border-radius: 5px;
  padding: .16rem .3rem; font-size: .7rem; line-height: 1.25; text-align: left;
  color: var(--prg-ink); cursor: pointer; min-width: 0;
}
.prg-cal-chip:hover { background: #eef1f5; }
.prg-cal-chip.is-atrasada { background: var(--prg-danger-bg, #fdeaea); }
.prg-cal-chip.is-feita { opacity: .55; }
.prg-cal-chip.is-feita .prg-cal-chip-t { text-decoration: line-through; }
.prg-cal-cor { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.prg-cal-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prg-cal-chip-n {
  margin-left: auto; font-size: .62rem; font-weight: 700; color: var(--prg-danger);
  background: #fff; border: 1px solid #f0bfbc; border-radius: 3px;
  padding: 0 .18rem; white-space: nowrap;
}
.prg-cal-solta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.prg-cal-solta .prg-cal-chip { width: auto; max-width: 260px; }
.prg-cal-mais {
  border: 0; background: none; color: var(--prg-muted); font-size: .68rem;
  font-weight: 600; text-align: left; padding: 0 .3rem; cursor: pointer;
}
.prg-cal-mais:hover { color: var(--prg-ink); text-decoration: underline; }

/* Linha do tempo: rola dentro do próprio container, nunca a página. */
.prg-gantt { overflow-x: auto; }
.prg-gantt-grade { min-width: 720px; }
.prg-gantt-l { display: grid; grid-template-columns: 220px 1fr; align-items: stretch; }
.prg-gantt-l + .prg-gantt-l { border-top: 1px solid var(--prg-rule-soft); }
.prg-gantt-l.is-topo { position: sticky; top: 0; z-index: 2; background: var(--prg-surface-2); }
.prg-gantt-rot {
  padding: .32rem .55rem; font-size: .76rem; min-width: 0;
  border-right: 1px solid var(--prg-rule-soft); display: flex; align-items: center; gap: .35rem;
}
.prg-gantt-rot .prg-gantt-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prg-gantt-meta { margin-left: auto; color: var(--prg-muted); font-size: .68rem; font-weight: 500; }
.prg-gantt-pend {
  margin-left: auto; color: var(--prg-danger); background: #fffafa; border: 1px solid #f0bfbc;
  border-radius: 3px; padding: 0 .2rem; font-size: .62rem; font-weight: 700; white-space: nowrap;
}
.prg-gantt-l.is-grupo .prg-gantt-rot { font-weight: 700; background: var(--prg-surface-2); }
.prg-gantt-l.is-grupo { background: var(--prg-surface-2); }
.prg-gantt-trilha {
  display: grid; position: relative; align-items: center;
  min-height: 26px; padding: .16rem 0;
}
.prg-gantt-dia { border-right: 1px solid #f0f2f5; min-height: 100%; grid-row: 1; }
.prg-gantt-dia.is-fds { background: #fafbfc; }
.prg-gantt-dia.is-hoje { background: #fff4f4; box-shadow: inset -2px 0 0 var(--brand, #e30613); }
.prg-gantt-cab { font-size: .6rem; color: var(--prg-muted); text-align: center; padding: .25rem 0; }
.prg-gantt-cab.is-hoje { color: var(--brand, #e30613); font-weight: 700; }
.prg-gantt-barra {
  grid-row: 1; height: 15px; border-radius: 4px; align-self: center;
  display: flex; align-items: center; padding: 0 .3rem; gap: .3rem;
  font-size: .64rem; color: #fff; cursor: pointer; overflow: hidden; white-space: nowrap;
  border: 0; min-width: 8px;
}
.prg-gantt-barra-t { overflow: hidden; text-overflow: ellipsis; }
.prg-gantt-alerta {
  margin-left: auto; background: rgba(255,255,255,.92); color: var(--prg-danger);
  border-radius: 3px; padding: 0 .18rem; font-weight: 700; flex: 0 0 auto;
}
.prg-gantt-barra.is-feita { opacity: .5; }
.prg-gantt-barra.is-atrasada { box-shadow: 0 0 0 2px var(--prg-danger, #c62828); }
.prg-gantt-sem { color: var(--prg-muted); font-size: .72rem; padding: .3rem .55rem; }

@media (max-width: 720px) {
  .prg-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .prg-cal-cel { min-height: 74px; }
  .prg-cal-chip-t { display: none; }
  .prg-cal-chip-n { display: none; }
  .prg-cal-chip { justify-content: center; }
  .prg-gantt-l { grid-template-columns: 130px 1fr; }
  .prg-card-topo .prg-visao { margin-left: 0; flex-basis: 100%; overflow-x: auto; }
  .prg-visao button { flex: 1 0 auto; justify-content: center; }
}

/* ── fila de execução: atividades de todas as ações, por prazo/pessoa/ação ── */
.prg-atv-grupo {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .8rem; background: var(--prg-surface-2);
  border-top: 1px solid var(--prg-rule-soft); font-size: .8rem;
}
.prg-atv-grupo:first-child { border-top: 0; }
.prg-atv-grupo b { font-weight: 700; }
.prg-atv-grupo .prg-atv-meta { color: var(--prg-muted); font-size: .74rem; margin-left: auto; }
.prg-atv-mae {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: var(--prg-ink-2); font-size: .72rem; text-decoration: underline dotted;
}
.prg-atv-mae:hover { color: var(--brand, #e30613); }
.prg-atv-vence { color: var(--prg-warn); font-weight: 600; }

/* ── tela da ação: o evento aberto, com as atividades dentro ── */
.prg-acao-volta {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0;
  color: var(--prg-muted); font-size: .78rem; font-weight: 600; padding: 0 0 .3rem; cursor: pointer;
}
.prg-acao-volta:hover { color: var(--brand, #e30613); }
.prg-acao-cab { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem; }
.prg-acao-cab > div:first-child { flex: 1 1 320px; min-width: 0; }
.prg-acao-ident { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .3rem; }
.prg-acao-tipo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600; color: var(--prg-ink-2);
}
.prg-acao-tipo .prg-cal-cor { width: 8px; height: 8px; }
.prg-acao-cab { margin-bottom: .35rem; }
.prg-acao-cab .prg-tela-p { max-width: 88ch; }
.prg-acao-regua {
  background: #fff; border: 1px solid var(--prg-rule); border-left: 3px solid var(--prg-good);
  border-radius: 4px; padding: .5rem .65rem; margin-bottom: .65rem;
  display: grid; grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.4fr);
  gap: .55rem .75rem; align-items: center;
}
.prg-acao-regua.is-alerta { border-left-color: var(--prg-danger); background: #fffafa; }
.prg-acao-regua-main b { display: block; font-size: .88rem; color: var(--prg-ink); }
.prg-acao-regua-main span { display: block; font-size: .74rem; color: var(--prg-muted); margin-top: .08rem; }
.prg-acao-regua-itens { display: grid; grid-template-columns: repeat(5, minmax(86px, 1fr)); gap: .35rem; }
.prg-acao-regua-i {
  min-width: 0; border: 1px solid var(--prg-rule); background: #fff; border-radius: 4px;
  padding: .32rem .45rem; text-align: left; cursor: pointer;
}
.prg-acao-regua-i:disabled { cursor: default; }
.prg-acao-regua-i span {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--prg-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.prg-acao-regua-i strong {
  display: block; font-size: .98rem; line-height: 1.15; font-variant-numeric: tabular-nums;
  color: var(--prg-ink); overflow-wrap: anywhere;
}
.prg-acao-regua-i.t-danger { border-color: #f0bfbc; }
.prg-acao-regua-i.t-danger strong { color: var(--prg-danger); }
.prg-acao-regua-i.t-warn { border-color: #ecd4a4; }
.prg-acao-regua-i.t-warn strong { color: var(--prg-warn); }
.prg-acao-regua-i.t-good strong { color: var(--prg-good); }
.prg-acao-regua-i:not(:disabled):hover { background: var(--prg-surface-2); }
.prg-acao-regua-bar {
  grid-column: 1 / -1; height: 5px; border-radius: 99px;
  background: var(--prg-rule-soft); overflow: hidden;
}
.prg-acao-regua-bar span { display: block; height: 100%; background: var(--prg-good); border-radius: 99px; }
.prg-acao-regua.is-alerta .prg-acao-regua-bar span { background: var(--prg-danger); }
.prg-acao-cab ~ .prg-card { margin-bottom: .65rem; }
.prg-acao-cab ~ .prg-card .prg-card-topo { padding: .48rem .7rem .42rem; }
.prg-acao-cab ~ .prg-card .prg-card-cont { padding: .55rem .7rem .65rem; }
.prg-acao-cab ~ .prg-card .prg-card-cont.is-flush { padding: 0; }
.prg-acao-cab ~ .prg-card .prg-card-desc { font-size: .73rem; }
.prg-tab tr.is-atrasada td { background: #fffafa; }
.prg-tab tr.is-sem-dono td:first-child { box-shadow: inset 3px 0 0 var(--prg-warn); }

/* Progresso: número e barra juntos, porque barra sozinha não diz quantas. */
.prg-acao-progresso { display: flex; align-items: center; gap: .6rem; margin: .1rem 0 .2rem; }
.prg-acao-barra { flex: 1 1 auto; height: 8px; border-radius: 99px; background: var(--prg-rule-soft); overflow: hidden; }
.prg-acao-barra span { display: block; height: 100%; background: var(--prg-good); border-radius: 99px; }
.prg-acao-barra.is-risco span { background: var(--prg-danger); }
.prg-acao-pct { font-size: .8rem; font-weight: 700; color: var(--prg-ink); white-space: nowrap; }

/* Estado da atividade em três passos, no lugar do check de sim/não. */
.prg-est { display: inline-flex; border: 1px solid var(--prg-rule); border-radius: 6px; overflow: hidden; }
.prg-est button {
  border: 0; background: #fff; color: var(--prg-muted);
  font-size: .7rem; font-weight: 600; padding: .16rem .42rem; cursor: pointer; white-space: nowrap;
}
.prg-est button + button { border-left: 1px solid var(--prg-rule); }
.prg-est button:hover { background: var(--prg-surface-2); color: var(--prg-ink); }
.prg-est button.is-ativo { background: var(--prg-ink); color: #fff; }
.prg-est button.is-ativo.t-good { background: var(--prg-good); }
.prg-est button.is-ativo.t-info { background: var(--prg-info); }

.prg-acao-pessoa { display: flex; align-items: center; gap: .4rem; }
.prg-acao-pessoa .prg-sub { font-weight: 400; }
.prg-atv-fora { color: var(--prg-info); font-size: .7rem; white-space: nowrap; }
.prg-atv-nova td { background: var(--prg-surface-2); }
.prg-atv-nova input, .prg-atv-nova select {
  width: 100%; font-size: .78rem; padding: .22rem .35rem;
  border: 1px solid var(--prg-rule); border-radius: 5px; background: #fff; color: inherit;
}
.prg-acao-mes {
  display: inline-flex; flex-direction: column; gap: .1rem; padding: .3rem .55rem;
  border: 1px solid var(--prg-rule); border-radius: 7px; background: #fff;
  font-size: .72rem; color: var(--prg-ink-2); cursor: pointer;
}
.prg-acao-mes.is-ativo { border-color: var(--prg-ink); background: var(--prg-ink); color: #fff; }
.prg-acao-mes b { font-size: .8rem; }
.prg-acao-meses { display: flex; flex-wrap: wrap; gap: .4rem; }

@media (max-width: 720px) {
  .prg-acao-regua { grid-template-columns: 1fr; }
  .prg-acao-regua-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prg-est button { padding: .16rem .3rem; }
}

/* ── responsáveis: de-para de nome da planilha × usuário ── */
.prg-pes-nome { font-weight: 600; }
.prg-pes-sug { color: var(--prg-good, #1a7f4b); display: inline-flex; align-items: center; gap: .3rem; }
.prg-pes-sem { color: var(--prg-muted); display: inline-flex; align-items: center; gap: .3rem; }

/* Dono da tarefa editável dentro do modal. Fica estreito de propósito: a
   coluna divide espaço com prazo e situação em 1366px. */
.prg-sel-dono {
  width: 100%; max-width: 190px; font-size: .78rem;
  padding: .18rem 1.3rem .18rem .35rem;
  border: 1px solid var(--prg-rule); border-radius: 5px; background: #fff; color: inherit;
}
.prg-sel-dono:focus { outline: 2px solid var(--prg-rule); outline-offset: 1px; }

@media (max-width: 420px) {
  .prg-kpi-val { font-size: 1.2rem; }
  .prg-modal-cx { max-height: 96vh; }
}