/*
 * Planejamento e Metas — complemento visual do módulo (TAR-2026-10-03-004).
 *
 * Só acrescenta o que as folhas do Portal não tinham: a navegação interna do
 * módulo, grades de cartões e barras de progresso. Cores, fontes, raios e
 * espaçamentos vêm das variáveis da folha aprovada (styles.css), nos três
 * temas e na escala P, M e G.
 */

.modulo-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.modulo-abas__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--info);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--info);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-sm);
  text-decoration: none;
}

.modulo-abas__item:hover {
  background: var(--info-soft);
}

.modulo-abas__item[aria-current="page"],
.modulo-abas__item[aria-current="step"] {
  background: var(--info-soft);
  font-weight: 600;
}

.modulo-abas__item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.painel-setores {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.indicadores-planejamento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.indicador {
  --indicador-cor: var(--info);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.indicador--progresso,
.indicador--etapas { --indicador-cor: var(--success); --indicador-suave: var(--success-soft); }
.indicador--planejamentos { --indicador-cor: var(--warning); --indicador-suave: var(--warning-soft); }
.indicador--verificadas { --indicador-cor: var(--info); --indicador-suave: var(--info-soft); }
.indicador--atrasadas { --indicador-cor: var(--danger); --indicador-suave: var(--danger-soft); }

.indicador__cabecalho { display: flex; align-items: center; gap: 0.75rem; }
.indicador__cabecalho > div { min-width: 0; }
.indicador__icone { display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--indicador-suave); color: var(--indicador-cor); }
.planejamento-titulo { display: flex; align-items: center; gap: 0.625rem; }
.planejamento-titulo__texto { min-width: 0; }
.planejamento-titulo__icone { display: inline-flex; flex: 0 0 auto; color: var(--danger); }
.planejamento-titulo__icone .icon { width: 2rem; height: 2rem; }
.meta-titulo { display: flex; align-items: center; gap: 0.5rem; }
.meta-titulo .icon { color: var(--success); }

.planejamento-situacao { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.planejamento-situacao--azul { color: var(--info); background: var(--info-soft); }
.planejamento-situacao--verde { color: var(--success); background: var(--success-soft); }
.planejamento-situacao--vermelho { color: var(--danger); background: var(--danger-soft); }
.planejamento-situacao--laranja { color: color-mix(in srgb, var(--warning) 65%, var(--text) 35%); background: var(--warning-soft); }

.setor-titulo { display: flex; align-items: center; gap: 0.5rem; }
.setor-titulo .icon { flex: 0 0 auto; color: var(--success); }

.perfis-quadro { margin-bottom: 1.5rem; }
.perfis-quadro .panel__head { padding: 1rem; margin: 0; border-bottom: 1px solid var(--border); }
.perfis-quadro .data-table { table-layout: fixed; }
.perfis-quadro thead { background: var(--surface-hover); }
.perfis-quadro th:first-child { width: 20%; }
.perfis-quadro th:last-child { width: 28%; }
.perfis-quadro th + th, .perfis-quadro td { border-left: 1px solid var(--border); }
.perfis-quadro tbody th, .perfis-quadro tbody td { vertical-align: top; }
.perfis-quadro tbody th { font-weight: 600; }
.perfis-quadro tbody tr + tr th, .perfis-quadro tbody tr + tr td { border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .perfis-quadro thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .perfis-quadro tbody, .perfis-quadro tr, .perfis-quadro tbody th, .perfis-quadro td { display: block; width: 100%; }
  .perfis-quadro tbody th { background: var(--surface-hover); }
  .perfis-quadro td { border-left: 0; }
  .perfis-quadro td + td { border-top: 1px solid var(--border-subtle); }
  .perfis-quadro td::before { display: block; margin-bottom: 0.25rem; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; content: attr(data-label); }
}

.indicador__titulo {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.indicador__numero {
  color: var(--text);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.15;
}

.indicador__numero small,
.grafico-situacoes small {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
  white-space: nowrap;
}

.indicador__legenda {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.indicador__barra {
  display: flex;
  height: 0.5rem;
  margin-top: auto;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-subtle);
}

.indicador__barra > span {
  display: block;
  height: 100%;
  background: var(--indicador-cor, var(--info));
}

.indicador__barra > .indicador__concluidos { background: var(--success); }
.grafico-situacoes { --indicador-cor: var(--info); margin-bottom: 0.875rem; }
.grafico-situacoes--a_fazer,
.situacao-cor--a_fazer { --indicador-cor: var(--text-muted); }
.grafico-situacoes--em_andamento,
.situacao-cor--em_andamento { --indicador-cor: var(--info); }
.grafico-situacoes--aguardando_verificacao,
.situacao-cor--aguardando_verificacao { --indicador-cor: var(--warning); }
/* "Concluída" é a tarefa sem prova, feita com um toque: verde puxado para o azul, para não se confundir com a verificada. */
.grafico-situacoes--concluida,
.situacao-cor--concluida { --indicador-cor: color-mix(in srgb, var(--success) 60%, var(--info)); }
.grafico-situacoes--verificada,
.situacao-cor--verificada { --indicador-cor: var(--success); }
.grafico-situacoes--cancelada,
.situacao-cor--cancelada { --indicador-cor: var(--danger); }
.grafico-situacoes .indicador__barra { margin-top: 0.375rem; }

.setores-grafico { display: grid; }
.setores-grafico__linha { --indicador-cor: var(--info); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 6.5rem; align-items: center; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border-subtle); }
.setores-grafico__linha:last-child { border-bottom: 0; }
.setor-visual--verde { --indicador-cor: var(--success); }
.setor-visual--laranja { --indicador-cor: color-mix(in srgb, var(--warning) 70%, var(--danger)); --indicador-texto: color-mix(in srgb, var(--indicador-cor) 85%, var(--text)); }
.setor-visual--roxo { --indicador-cor: var(--purple); }
.setor-visual--vermelho { --indicador-cor: var(--danger); }
/* Cor fixa do setor: o ouro do tema, e não a cor de destaque que a pessoa escolheu. */
.setor-visual--dourado { --indicador-cor: var(--gold); --indicador-texto: var(--gold-content); }
.setor-visual--lima { --indicador-cor: color-mix(in srgb, var(--success) 50%, var(--warning)); }
.setor-visual--turquesa { --indicador-cor: color-mix(in srgb, var(--success) 65%, var(--info)); }
.setor-visual--ciano { --indicador-cor: color-mix(in srgb, var(--info) 70%, var(--success)); }
.setor-visual--magenta { --indicador-cor: color-mix(in srgb, var(--purple) 50%, var(--danger)); }
.setor-visual--rosa { --indicador-cor: color-mix(in srgb, var(--danger) 70%, var(--purple)); }
.setores-grafico__nome { display: flex; align-items: center; gap: 0.625rem; color: var(--indicador-texto, var(--indicador-cor)); font-size: var(--text-sm); }
.setores-grafico__nome .icon { flex: 0 0 auto; }
.setores-grafico__valor { font-size: var(--text-xs); text-align: right; }
.setores-grafico__linha .indicador__barra { margin: 0; }

@media (max-width: 480px) {
  .setores-grafico__linha { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
  .setores-grafico__linha .indicador__barra { grid-column: 1 / -1; grid-row: 2; }
}

.membros {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  border: 0;
}

.membros > legend {
  margin-bottom: 0.5rem;
}

.progresso {
  display: block;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent-soft);
}

.progresso__barra {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

/*
 * Texto com cara de link que abre e fecha um trecho ("Excluir", "Editar
 * tarefa", "Enviar lembrete"). O navegador dá a mãozinha ao link e não a
 * este elemento; sem ela o texto parece não ser clicável.
 */
summary.text-link {
  cursor: pointer;
}

/* "Excluir": vermelho, a cor de perigo do tema. Seletor mais forte que a cor que um cartão dá aos seus links. */
summary.text-link.text-link--perigo {
  color: var(--danger);
}

.tarefa {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  background: var(--surface);
}

.tarefa > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.tarefa[open] > summary {
  margin-bottom: 0.75rem;
}

.tarefa > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.painel-colunas {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin-bottom: 1.5rem;
}

.lista-tarefas {
  display: grid;
  gap: 0.625rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lista-tarefas > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.5rem;
}

.lista-mudancas {
  display: grid;
  gap: 0.125rem;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.lista-mudancas span {
  font-weight: 600;
}

.evolucao-resumo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.evolucao-resumo__icone { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--info-soft); color: var(--info); }
.evolucao-resumo strong { display: block; color: var(--text); font-size: var(--text-2xl); line-height: 1.15; font-weight: 600; }
.evolucao-resumo span:not(.evolucao-resumo__icone) { color: var(--text-muted); font-size: var(--text-xs); }
.evolucao-linha { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem 0; margin-bottom: 2.5rem; }
.evolucao-linha__eixo, .evolucao-linha__area { position: relative; height: 11rem; }
.evolucao-linha__eixo span { position: absolute; right: 0; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.evolucao-linha__tracado { display: block; width: 100%; height: 100%; overflow: visible; }
.evolucao-linha__guia { stroke: var(--border-subtle); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.evolucao-linha__serie { fill: none; stroke: var(--info); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.evolucao-linha__preenchimento { fill: var(--info-soft); opacity: 0.75; }
.evolucao-linha__ponto { position: absolute; width: 0.625rem; height: 0.625rem; border: 2px solid var(--info); border-radius: 50%; background: var(--surface); transform: translate(-50%, -50%); }
.evolucao-linha__valor { position: absolute; left: 50%; transform: translateX(-50%); color: var(--info); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.evolucao-linha__datas { position: absolute; top: calc(100% + 0.75rem); width: 100%; }
.evolucao-linha__datas span { position: absolute; transform: translateX(-50%); color: var(--text-muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.evolucao-nota { margin: 0 0 1rem; color: var(--text-muted); font-size: var(--text-xs); }
.evolucao-nota__legenda { display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 0.25rem 0 0.5rem; border-radius: 50%; background: var(--info); }

/* Avisos neste celular, em Minhas preferências (TAR-2026-10-04-001, fatia B). */

.celular__estado {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-weight: 600;
}

.celular__passos {
  display: grid;
  gap: 0.375rem;
  margin: 0 0 1rem;
  padding-left: 1.125rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  list-style: disc;
}

.setor-visual--azul { --indicador-cor: var(--info); }
.setor-identidade { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--indicador-texto, var(--indicador-cor)); }
.setor-identidade .icon { flex: 0 0 auto; }
.cartao-setor .text-link { color: var(--indicador-texto, var(--indicador-cor)); }
/* No cartão de setor, o nome e o ícone na cor fosca do cartão, como no cartão de módulo (achado F1 da rechecagem da
   `TAR-2026-10-15-001`, rodada 3). A cor fosca vem da peça comum, seção 24 de `superadmin.css`. */
.cartao-setor .panel__head .text-link, .cartao-setor .panel__head .setor-identidade { color: var(--cor-texto); }
.cartao-setor .panel__head .setor-identidade .icon { color: var(--cor-fosca); }
.cartao-setor .progresso { background: color-mix(in srgb, var(--indicador-cor) 18%, var(--surface)); }
.cartao-setor .progresso__barra { background: var(--indicador-cor); }
/* Sequência guiada: posição atual visível, sem presumir etapas concluídas. */
.planejamento-passos { margin: 0 0 1.5rem; padding: 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.planejamento-passos__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; }
.planejamento-passos__etapa { position: relative; min-width: 0; }
.planejamento-passos__etapa:not(:last-child)::after { content: ""; position: absolute; top: 1.625rem; right: -0.75rem; width: 0.5rem; height: 2px; background: var(--border-subtle); }
.planejamento-passos__item { display: flex; align-items: center; gap: 0.625rem; height: 100%; padding: 0.5rem; border-bottom: 3px solid transparent; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.planejamento-passos__item strong, .planejamento-passos__item small { display: block; }
.planejamento-passos__item strong { font-size: var(--text-sm); color: var(--text); }
.planejamento-passos__item small { margin-top: 0.25rem; font-size: var(--text-xs); line-height: 1.4; }
.planejamento-passos__numero, .guia-passos__numero { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border-subtle); border-radius: 50%; background: var(--info-soft); color: var(--info); font-weight: 600; }
.planejamento-passos__item[aria-current="step"] { background: var(--info-soft); border-bottom-color: var(--info); }
.planejamento-passos__item[aria-current="step"] strong { color: var(--info); }
.planejamento-passos__item[aria-current="step"] .planejamento-passos__numero { background: var(--info); color: var(--surface); border-color: var(--info); }
a.planejamento-passos__item:hover { background: var(--surface-hover); }
a.planejamento-passos__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.guia-passos { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.guia-passos > li { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised, var(--surface)); }
.guia-passos h3 { margin: 0 0 0.375rem; font-size: var(--text-base); }
.guia-passos p { margin: 0.375rem 0 0; }
.guia-acompanhamento { margin: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.guia-acompanhamento > div { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr); gap: 1rem; padding: 1rem; }
.guia-acompanhamento > div + div { border-top: 1px solid var(--border-subtle); }
.guia-acompanhamento dt { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 600; }
.guia-acompanhamento dt .icon { flex: 0 0 auto; color: var(--info); margin-top: 0.2rem; }
.guia-acompanhamento dd { margin: 0; line-height: 1.6; }
@media (max-width: 760px) {
  .planejamento-passos__lista { grid-template-columns: 1fr; gap: 0.5rem; }
  .planejamento-passos__etapa:not(:last-child)::after { top: auto; right: auto; left: 1.5625rem; bottom: -0.5rem; width: 2px; height: 0.5rem; }
  .planejamento-passos__item { border-bottom: 0; border-left: 3px solid transparent; }
  .planejamento-passos__item[aria-current="step"] { border-left-color: var(--info); }
  .guia-acompanhamento > div { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Andamento do planejamento: anel das verificadas, faixa por situação e indicadores. */
.andamento { display: grid; grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.andamento__anel { position: relative; width: 100%; max-width: 11rem; margin-inline: auto; aspect-ratio: 1; }
.andamento__anel svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.andamento__trilho, .andamento__arco { fill: none; stroke-width: 12; }
.andamento__trilho { stroke: var(--border-subtle); }
.andamento__arco { stroke: var(--success); stroke-linecap: round; }
.andamento__numero { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.125rem; padding: 1.5rem; text-align: center; }
.andamento__numero strong { color: var(--text); font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; }
.andamento__numero span { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.25; }
.andamento__situacoes h3 { margin: 0 0 0.625rem; font-size: var(--text-sm); font-weight: 600; }
.andamento__faixa { display: flex; gap: 2px; height: 0.875rem; overflow: hidden; border-radius: 999px; background: var(--border-subtle); }
.andamento__faixa > span { display: block; min-width: 0.375rem; height: 100%; background: var(--indicador-cor); }
.andamento__legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.75rem 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--text-sm); }
.andamento__legenda li { display: inline-flex; align-items: center; gap: 0.375rem; }
.andamento__legenda strong { color: var(--text); font-weight: 600; }
.andamento__ponto { flex: 0 0 auto; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--indicador-cor); }
.andamento__indicadores { margin-bottom: 0; }
.indicador--aguardando { --indicador-cor: var(--warning); --indicador-suave: var(--warning-soft); }
.indicador--alteracao { --indicador-cor: var(--info); --indicador-suave: var(--info-soft); }
.indicador__numero--data { font-size: var(--text-lg); }

/* Cartão da meta: de onde parte, onde está e aonde quer chegar, lado a lado. */
.meta-cartao__topo h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.meta-cartao__icone { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--success-soft); color: var(--success); }
.meta-acompanhamento { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0; }
.meta-trilha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.meta-trilha__passo { --indicador-cor: var(--text-muted); --indicador-suave: var(--surface-hover); display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-content: start; column-gap: 0.625rem; row-gap: 0.125rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.meta-trilha__passo--atual { --indicador-cor: var(--info); --indicador-suave: var(--info-soft); }
.meta-trilha__passo--alvo { --indicador-cor: var(--success); --indicador-suave: var(--success-soft); }
.meta-trilha__icone { display: grid; place-items: center; grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--indicador-suave); color: var(--indicador-cor); }
.meta-trilha__rotulo { grid-column: 2; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; }
.meta-trilha__passo strong { grid-column: 2; font-size: var(--text-lg); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.meta-trilha__passo .field__hint { grid-column: 2; font-size: var(--text-sm); overflow-wrap: anywhere; }
.meta-progresso { display: grid; gap: 0.375rem; }
.meta-progresso__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); }
.meta-progresso__linha span { color: var(--text-muted); }
.meta-progresso__linha strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.meta-progresso .progresso { height: 0.625rem; background: var(--success-soft); }
.meta-progresso .progresso__barra { background: var(--success); }
.meta-criterio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; margin: 0; padding: 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-hover); font-size: var(--text-sm); }
.meta-criterio .icon { margin-top: 0.125rem; color: var(--success); }
.meta-criterio strong { display: block; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.meta-lancar { display: grid; gap: 0.75rem; padding: 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.meta-lancar__titulo { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: var(--text-sm); font-weight: 600; }
.meta-lancar__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.meta-lancar__campos > :last-child { grid-column: 1 / -1; }
.meta-lancar .form-actions { justify-content: flex-end; }

/* Histórico: cada alteração num quadro, com o antes e o depois em colunas. */
.historico { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.historico__dia { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.375rem; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; }
.historico__dia::after { flex: 1; height: 1px; background: var(--border); content: ""; }
.historico__item { --indicador-cor: var(--text-muted); --indicador-suave: var(--surface-hover); display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-left: 3px solid var(--indicador-cor); border-radius: var(--radius-md); background: var(--surface); }
.historico__item--azul { --indicador-cor: var(--info); --indicador-suave: var(--info-soft); }
.historico__item--verde { --indicador-cor: var(--success); --indicador-suave: var(--success-soft); }
.historico__item--laranja { --indicador-cor: var(--warning); --indicador-suave: var(--warning-soft); }
.historico__item--roxo { --indicador-cor: var(--purple); --indicador-suave: var(--purple-soft); }
.historico__icone { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--indicador-suave); color: var(--indicador-cor); }
.historico__titulo { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.historico__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.25rem 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.historico__meta span { display: inline-flex; align-items: center; gap: 0.3125rem; min-width: 0; overflow-wrap: anywhere; }
.historico__meta .icon { flex: 0 0 auto; }
/* Ficha da alteração em blocos (`TAR-2026-10-15-001`): um quadro por assunto, na largura inteira da linha, e cada
   campo no seu quadrinho (rodada 2). A cor fica na faixa, no ícone, no título, no rótulo, nas etiquetas e, leve,
   no fundo do quadro inteiro. */
.historico__blocos { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem; }
/* Fundo próprio no bloco inteiro, diferente da tela, na cor do próprio bloco — "segue a tendencia. se financeiro é
   amarelo, fundo amarelo" (Bruno) —, na intensidade suave da seção "O fundo segue a cor do cartão". */
.historico__bloco { display: block; min-width: 0; padding: 0.875rem 1rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.historico__bloco caption { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; color: var(--cor-texto, var(--text)); font-size: var(--text-lg); font-weight: 700; text-align: left; }
.historico__bloco-icone { display: grid; flex: 0 0 auto; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--cor-fosca-suave, var(--surface-hover)); color: var(--cor-fosca, var(--text-muted)); }
.historico__bloco tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem; }
/* O quadrinho fica sobre o fundo do bloco, com um véu da cor do texto: no escuro, ainda mais claro que o bloco. */
.historico__bloco tr { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; padding: 0.625rem 0.75rem; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 5%, transparent); }
.historico__bloco tr[data-largo] { grid-column: 1 / -1; }
.historico__bloco th, .historico__bloco td { padding: 0; overflow-wrap: anywhere; text-align: left; vertical-align: top; }
/* O rótulo nunca quebra no meio da palavra. */
.historico__bloco tbody th { color: var(--cor-texto, var(--text-muted)); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: normal; }
.historico__bloco td { color: var(--text); font-size: var(--text-base); font-weight: 600; }
.historico__bloco .chip { padding: 0.1875rem 0.625rem; font-size: inherit; font-weight: 600; line-height: 1.4; white-space: normal; }
.historico__etiquetas { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.historico__data { display: inline-flex; align-items: center; gap: 0.375rem; }
.historico__data .icon { flex: 0 0 auto; color: var(--cor, var(--text-muted)); }
.historico__lista { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.historico__lista li { display: flex; align-items: flex-start; gap: 0.5rem; }
.historico__marca { display: inline-flex; flex: 0 0 auto; padding-top: 0.125rem; color: var(--text-muted); }
.historico__marca--feito { color: var(--success); }
/* Alteração: o valor antigo apagado e riscado, sem cor de significado; o novo depois da seta, na cor do bloco. */
.historico__bloco--mudanca td[data-label="Antes"] { color: var(--text-muted); font-weight: 400; text-decoration: line-through; }
.historico__bloco--mudanca td[data-label="Antes"] .chip { --cor: var(--text-muted); --cor-suave: var(--filled-bg); color: var(--text-muted); font-weight: 400; text-decoration: line-through; }
.historico__bloco--mudanca td[data-label="Antes"] .historico__marca--feito { color: var(--text-muted); }
/* O risco não passa sozinho para peça em bloco ou em linha flexível: a data e o item do checklist pedem o deles. */
.historico__bloco--mudanca td[data-label="Antes"] :is(.historico__data, .historico__lista li) { text-decoration: line-through; }
.historico__bloco--mudanca td[data-vazio] { display: none; }
.historico__bloco--mudanca td[data-label="Depois"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.historico__bloco--mudanca td[data-label="Depois"]::before { color: var(--cor, var(--text-muted)); font-weight: 700; content: "\2192"; }
.historico__bloco--mudanca td[data-vazio] + td[data-label="Depois"]::before { content: none; }
.historico__anteriores { margin-top: 0.25rem; }
.historico__anteriores > summary { margin-bottom: 0.625rem; }

@media (max-width: 640px) {
  .andamento, .meta-trilha, .meta-lancar__campos { grid-template-columns: 1fr; }
  .historico__item { padding: 0.75rem; }
  /* Na largura do celular, um quadrinho por linha. */
  .historico__bloco tbody { grid-template-columns: minmax(0, 1fr); }
  .historico__bloco { padding: 0.75rem 0.75rem 0.875rem; }
}

/* Lista de avisos: um quadro por aviso, clicável por inteiro. O texto usa a cor
   comum de leitura; a cor fica no ícone, como nos quadros do painel. */
.avisos { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.aviso { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-soft); color: var(--text); text-decoration: none; }
.aviso:hover { border-color: var(--indicador-cor); background: var(--surface-hover); }
.aviso:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.aviso__corpo { display: grid; flex: 1 1 auto; gap: 0.25rem; min-width: 0; }
.aviso__texto { color: var(--text); overflow-wrap: anywhere; }
.aviso--novo .aviso__texto { font-weight: 600; }
.aviso__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--text-muted); font-size: var(--text-sm); }
.aviso__novo { padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--indicador-suave); color: var(--text); font-size: var(--text-xs); font-weight: 600; }
.aviso__seta { display: grid; flex: 0 0 auto; color: var(--text-muted); }

/* Minhas pendências: cada grupo com o ícone e a cor do que ele pede. */
.pendencias-grupo { border-left: 3px solid var(--indicador-cor); }
.pendencias-grupo__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; margin: 0; }

/* Etapas e tarefas: o conteúdo da etapa respira dentro do quadro dela, em vez de encostar na borda. */
article.module-block { display: grid; gap: 0.75rem; padding: 1rem 1.125rem 1.125rem; }
article.module-block > * { min-width: 0; }

/* Administração: os botões dos quadros ficam na mesma linha, qualquer que seja o tamanho do texto. */
.catalog-grid > .panel { display: flex; flex-direction: column; }
.catalog-grid > .panel > .form-actions { margin-top: auto; }

/*
 * Minha Rotina (TAR-2026-10-07-006). Reaproveita o indicador, a agenda, o
 * quadro vazio e a etiqueta que as outras áreas já usam; aqui fica só o que é
 * da Rotina: o botão que abre "Nova tarefa", os quatro quadros que filtram e a
 * linha da tarefa.
 *
 * Acabamento da lista, pedido pelo proprietário ao ver a prévia: cor fosca, e
 * sem fundo colorido — "grita aos olhos". O fundo é o da superfície do tema;
 * a cor fica na faixa e na etiqueta, abaixada com a superfície (`--fosca`),
 * sem degradê, sem brilho e sem sombra luminosa.
 */
.rotina-linha, .rotina-lista__cabecalho { --fosca: color-mix(in srgb, var(--cor) 55%, var(--surface)); --fosca-suave: color-mix(in srgb, var(--cor) 16%, var(--surface)); }

.rotina-nova { margin-bottom: 1.25rem; }
.rotina-nova > summary { display: inline-flex; list-style: none; cursor: pointer; }
.rotina-nova > summary::-webkit-details-marker { display: none; }
.rotina-nova > summary.button--primary,
.rotina-nova > summary.button--primary:hover,
.rotina-tarefa .button--primary,
.rotina-tarefa .button--primary:hover,
.rotina-nova__formulario .button--primary,
.rotina-nova__formulario .button--primary:hover { background: color-mix(in srgb, var(--color-accent) 82%, var(--surface)); box-shadow: none; }
.rotina-nova > summary.button--primary:hover,
.rotina-tarefa .button--primary:hover,
.rotina-nova__formulario .button--primary:hover { filter: brightness(0.94); }
.rotina-nova[open] > summary { margin-bottom: 0.75rem; }
.rotina-nova__formulario { border-left: 0.25rem solid color-mix(in srgb, var(--color-accent) 55%, var(--surface)); }
.rotina-nova__grade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/*
 * Os quatro quadros são os do Painel do Planejamento e Metas (`.indicador`),
 * a pedido do proprietário. Aqui só o que os torna filtro: são links, e o
 * escolhido ganha o contorno na cor dele. Nunca ficam três e um: dois a dois
 * na tela estreita, os quatro em linha na larga.
 */
.rotina-quadros { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.25rem; }
@media (min-width: 64rem) { .rotina-quadros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rotina-quadro { color: var(--text); text-decoration: none; transition: background var(--transition), border-color var(--transition); }
/* Ao passar o ponteiro, o sombreado da receita comum fica mais forte (seção 24 de superadmin.css). */
.rotina-quadro:hover { border-color: var(--cor-fosca); --mistura: 20%; }
.rotina-quadro:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* No selecionado e ao passar o ponteiro, o contorno inteiro na cor fosca do quadro — a da faixa do topo (seção 24 de superadmin.css). */
.rotina-quadro[aria-current="true"] { border-color: var(--cor-fosca); }
.rotina-quadro .indicador__cabecalho > span:last-child { display: grid; min-width: 0; }
.rotina-quadro .indicador__barra { margin-top: auto; }

.rotina-lista__cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.rotina-lista__cabecalho h2 { flex-wrap: wrap; margin: 0; }
.rotina-visao { display: inline-flex; padding: 0.1875rem; border: 1px solid var(--border); border-radius: 999px; background: var(--filled-bg); }
.rotina-visao a { padding: 0.3125rem 0.875rem; border-radius: 999px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); text-decoration: none; white-space: nowrap; }
.rotina-visao a:hover { color: var(--text); }
.rotina-visao a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rotina-visao a[aria-current="true"] { background: var(--surface); color: var(--text); font-weight: 600; }

/*
 * A folha de Reuniões carrega depois desta e pinta a linha da agenda ao passar o
 * ponteiro. Na Rotina a linha não muda com o ponteiro — pedido do proprietário —,
 * e por isso o seletor leva as duas classes: vale mais que o de lá.
 */
.agenda__linha.rotina-linha,
.agenda__linha.rotina-linha:hover { padding: 0.75rem 0.875rem; border-color: var(--border-subtle); border-left-color: var(--cor); background: var(--surface); transition: none; }
.rotina-linha > .agenda__data { background: var(--filled-bg); }
.rotina-linha .agenda__texto { gap: 0.375rem; flex-basis: 12rem; }
.rotina-linha .agenda__texto > a { font-size: var(--text-base); line-height: 1.35; }
.rotina-linha__sobre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.rotina-linha__sobre .chip, .rotina-lista__cabecalho .chip { --fosca: color-mix(in srgb, var(--cor) 55%, var(--surface)); background: var(--filled-bg); }
.rotina-linha__sobre .chip::before, .rotina-lista__cabecalho .chip::before { background: var(--fosca); }
.rotina-linha__feita { color: var(--text-muted); text-decoration: line-through; }
.rotina-linha .agenda__fim { gap: 0.75rem; }
.rotina-linha .agenda__fim form { display: contents; }
.rotina-linha .button--sobrio { --fosca: color-mix(in srgb, var(--cor) 55%, var(--surface)); border-color: color-mix(in srgb, var(--cor) 35%, var(--border)); background: color-mix(in srgb, var(--cor) 12%, var(--surface)); }
.rotina-linha .button--sobrio .icon { color: var(--fosca); }
.rotina-linha .button--sobrio:hover { border-color: var(--fosca); background: color-mix(in srgb, var(--cor) 18%, var(--surface)); }
/* A faixa do topo da lista é a da receita comum, na cor fosca do quadro (seção 24 de superadmin.css). */
/* A Lixeira da Rotina inteira, no alto da página, ao lado do título. */
.rotina-lixeira { gap: 0.5rem; }
.rotina-lixeira .icon { color: var(--danger); }

/*
 * "Excluir", em cada tarefa: na linha da lista é só a lixeira, em vermelho
 * suave, para não gritar em toda linha; na página da tarefa é o botão cheio.
 * Nos dois, o primeiro toque abre a confirmação — o botão "Excluir" vermelho
 * forte e chapado — e só o segundo envia para a Lixeira.
 */
.rotina-excluir > summary { display: inline-flex; list-style: none; cursor: pointer; }
.rotina-excluir > summary::-webkit-details-marker { display: none; }
.rotina-excluir[open] > summary { display: none; }
.rotina-tarefa .rotina-excluir > summary,
.rotina-excluir__confirma { border-color: var(--danger); background: var(--danger); color: var(--surface); font-weight: 600; }
.rotina-tarefa .rotina-excluir > summary:hover,
.rotina-excluir__confirma:hover { background: var(--danger); filter: brightness(0.92); }

/*
 * A ponte com Reuniões (fatia 2): o quadro "Reunião de hoje" fica ao lado da
 * lista na tela larga e embaixo dela na estreita. Cada reunião é uma linha da
 * mesma agenda, com a hora no lugar da data; o que é da Rotina e já está na
 * pauta vem embaixo, e o atalho de levar ocupa a largura toda.
 */
.rotina-corpo { display: grid; gap: 1.25rem; align-items: start; }
.rotina-corpo > * { min-width: 0; margin-bottom: 0; }
@media (min-width: 75rem) { .rotina-corpo { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); } }
.rotina-ponte .panel__head .icon { color: color-mix(in srgb, var(--cor) 55%, var(--surface)); }
/* A coluna da lista não cresce com o texto da tarefa escolhida: o nome longo é cortado dentro do campo. */
.rotina-ponte__lista { grid-template-columns: minmax(0, 1fr); }
.rotina-reuniao { min-width: 0; }
.rotina-reuniao__levar .listbox__value { min-width: 0; }
.rotina-reuniao > .agenda__data strong { font-variant-numeric: tabular-nums; }
.rotina-reuniao__tarefas { display: grid; gap: 0.25rem; flex: 1 0 100%; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: var(--leading-sm); }
.rotina-reuniao__tarefas li { display: flex; align-items: flex-start; gap: 0.5rem; overflow-wrap: anywhere; }
.rotina-reuniao__tarefas .icon { flex: none; margin-top: 0.1875rem; color: var(--fosca); }
.rotina-reuniao__levar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.625rem; flex: 1 1 100%; min-width: 0; }
.rotina-reuniao__levar > .field { flex: 1 1 12rem; min-width: 0; margin: 0; }
.rotina-reuniao__nota { flex: 1 0 100%; margin: 0; }
.rotina-reuniao__ver { margin-left: auto; }

/*
 * Lembrete na hora (fatia 3): uma faixa só, entre "Nova tarefa" e os quadros.
 * O sino diz se está ligado; a chavinha é um botão que troca o estado com um
 * toque, com o mesmo desenho do interruptor do Portal.
 */
.rotina-lembrete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); }
.rotina-lembrete__icone { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--filled-bg); color: var(--text-muted); }
.rotina-lembrete__icone[data-ligado="sim"] { background: color-mix(in srgb, var(--color-accent) 18%, var(--surface)); color: var(--text); }
.rotina-lembrete__texto { flex: 1 1 12rem; min-width: 0; }
.rotina-lembrete__texto h2 { margin: 0; font-size: var(--text-base); line-height: 1.35; }
.rotina-lembrete__texto p { margin: 0.125rem 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.rotina-lembrete__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-left: auto; }
.rotina-lembrete__chave { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0.25rem 0.625rem; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.rotina-lembrete__chave:hover { background: var(--surface-hover); }
.rotina-lembrete__chave:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rotina-lembrete__chave .toggle__control { margin-top: 0; }

/*
 * O sino de cada tarefa: ligado, na cor de destaque da pessoa; desligado,
 * apagado e riscado. É botão: um toque troca o lembrete só daquela tarefa.
 */
.rotina-sino { position: relative; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--filled-bg); color: var(--text-muted); cursor: pointer; }
.rotina-sino[aria-checked="true"] { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--border)); background: color-mix(in srgb, var(--color-accent) 18%, var(--surface)); color: var(--text); }
.rotina-sino[aria-checked="false"] .icon { opacity: 0.55; }
.rotina-sino[aria-checked="false"]::after { position: absolute; width: 1.5rem; height: 1.5px; border-radius: 1px; background: currentColor; content: ""; transform: rotate(-45deg); }
.rotina-sino:hover { border-color: var(--border); background: var(--surface-hover); }
.rotina-sino:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Na tela estreita, a hora, o sino, o "Concluir" e a lixeira cabem na mesma linha. */
@media (max-width: 30rem) { .rotina-linha .agenda__fim { gap: 0.5rem; } }
.rotina-tarefa__lembrete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.rotina-tarefa__lembrete .rotina-lembrete__chave { padding-left: 0; }

/* Montagem do planejamento com o guia na lateral (TAR-2026-10-10-003): o formulário fica com a coluna larga. */
@media (min-width: 62rem) { .painel-colunas--guia { grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); align-items: start; } }
/* Guia de cada passo (TAR-2026-10-10-003): um campo por linha, cada um com o seu ícone e a sua cor em tom baixo. A cor fica no ícone, no nome do campo e na faixa lateral; o fundo do quadro não muda. */
.guia-lateral { display: grid; gap: 1rem; margin-bottom: 1rem; }
.guia-lateral > p { margin: 0; line-height: 1.6; }
.guia-lateral__resumo { color: var(--text-muted); }
.guia-lateral__campos { display: grid; gap: 0.5rem; margin: 0; }
.guia-lateral__campos > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: start; padding: 0.75rem 0.875rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--cor, var(--info)); border-radius: var(--radius-md); }
.guia-lateral__icone { grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--cor-suave, var(--info-soft)); color: var(--cor, var(--info)); }
.guia-lateral__campos dt { font-weight: 600; color: color-mix(in srgb, var(--cor, var(--info)) 62%, var(--text)); }
.guia-lateral__campos dd { margin: 0.125rem 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-muted); }
.guia-lateral__nota { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--cor, var(--info)); border-radius: var(--radius-md); }
.guia-lateral__nota .icon { flex: 0 0 auto; margin-top: 0.125rem; color: var(--cor, var(--info)); }
.guia-lateral__nota strong { display: block; margin-bottom: 0.125rem; color: color-mix(in srgb, var(--cor, var(--info)) 62%, var(--text)); }
/* O que cada botão do passo faz: a etiqueta lembra o botão — o principal na cor de destaque, o outro no contorno azul. */
/* Cada botão na linha dele, com o que faz logo abaixo: o nome do botão pode ser comprido, e o guia é estreito. */
.guia-lateral__botoes { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.guia-lateral__botoes li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; justify-items: start; font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.guia-lateral__botao { justify-self: start; padding: 0.25rem 0.625rem; border: 1px solid var(--info); border-radius: var(--radius-md); font-weight: 600; color: var(--info); max-width: 100%; }
/* A etiqueta do botão principal leva a cor de destaque em tom baixo: o brilho do preenchimento é só dos botões de verdade. */
.guia-lateral__botao--principal { border-color: var(--color-accent-content); background: var(--accent-soft); color: var(--color-accent-content); }
/* A etiqueta do atalho "Iniciar só com os dados gerais": o verde do botão dele, em contorno. */
.guia-lateral__botao--success { border-color: var(--success); color: var(--success); }
/* Título do guia: o número do passo, como na barra dos cinco passos, e o nome dele em azul. */
.guia-titulo { display: flex; align-items: center; gap: 0.625rem; }
.guia-titulo .guia-passos__numero { font-size: var(--text-base); }
.guia-titulo small { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--info); }
/* Campo obrigatório com o interruptor "Não se aplica" ao pé dele (TAR-2026-10-10-003). */
.campo-dispensavel__chave { margin-top: 0.5rem; }
.campo-dispensavel__chave .toggle__text { font-size: var(--text-sm); }
/* Na montagem, cada linha do formulário respira: rótulo de baixo não encosta na dica de cima. */
.painel-colunas--guia form > * + * { margin-top: 0.875rem; }
/* Planejamento sem tarefa nas pendências (TAR-2026-10-10-003): a linha leva o "Concluir" ao lado. */
.lista-tarefas__acao { display: inline-flex; margin-left: 0.5rem; vertical-align: middle; }
.indicador__alerta { color: var(--danger); font-weight: 600; }
.andamento__prazo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.625rem; margin: 0; padding: 0.625rem 0.875rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--info); border-radius: var(--radius-md); line-height: 1.55; }
.andamento__prazo .icon { flex: 0 0 auto; margin-top: 0.125rem; color: var(--info); }
.andamento__prazo > span:first-of-type { flex: 1 1 14rem; }
.andamento__prazo strong { display: block; }

/*
 * Quadros da tela do planejamento (`TAR-2026-10-15-001`, rodada 2, V6 e V7), de Andamento a Etapas e tarefas: cada
 * quadro com fundo próprio, diferente da tela em cada tema, na cor do próprio quadro, faixa lateral e título com ícone
 * na mesma cor. O que fica dentro leva o véu da cor do texto, e não o fundo da tela. Pedido de
 * Bruno: "essa tela toda precisa de um fundo diferenciado em cada tema".
 */
.painel-tela > .panel__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.75rem; row-gap: 0.25rem; }
.painel-tela > .panel__head > h2 { color: var(--cor-texto, var(--text)); }
.painel-tela > .panel__head > p { grid-column: 2; }
.painel-tela > .panel__head--split { display: flex; align-items: center; gap: 0.75rem; }
.painel-tela > .panel__head--split > :last-child { margin-left: auto; }
.painel-tela__icone { display: grid; grid-row: span 2; align-self: start; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--cor-fosca-suave, var(--surface-hover)); color: var(--cor-fosca, var(--text-muted)); }
.painel-tela :is(.module-block, .tarefa, .base-card, .indicador, .andamento, .historico__item) { border-color: color-mix(in srgb, var(--text) 12%, transparent); background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: none; }
.painel-tela__texto { margin: 0; padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 5%, transparent); font-size: var(--text-base); font-weight: 600; }
.painel-tela__vazio { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.875rem 1rem; border: 1px dashed color-mix(in srgb, var(--cor, var(--text-muted)) 45%, transparent); border-radius: var(--radius-md); color: var(--text-muted); }
.painel-tela__vazio .icon { flex: 0 0 auto; color: var(--cor, var(--text-muted)); }
.painel-tela .chip { padding: 0.1875rem 0.625rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; white-space: normal; }
/* A etapa: o nome em destaque e, em etiquetas, quem cuida, as datas e o andamento. A regra comum do cartão deixa todo
   texto da identidade pequeno e apagado; aqui a etiqueta e a data voltam ao tamanho e à tinta de leitura. */
.painel-tela .module-block__identity h3 { margin: 0; font-size: var(--text-lg); }
.painel-tela .module-block__identity .etapa__dados { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }
.painel-tela .module-block__identity .chip, .painel-tela .module-block__identity .etapa__data { color: var(--text); font-size: var(--text-sm); line-height: 1.4; }
.etapa__data, .tarefa__data { display: inline-flex; align-items: center; gap: 0.3125rem; font-weight: 600; }
.etapa__data .icon, .tarefa__data .icon { flex: 0 0 auto; color: var(--cor, var(--text-muted)); }
/* Data e prazo são etiquetas (achados F1 e F2 da revisão da rodada 2): o calendário faz o papel da bolinha. */
.chip.etapa__data::before, .chip.tarefa__data::before { display: none; }
/* A tarefa: o título e a situação numa linha; quem executa, o prazo e a prioridade na de baixo. */
.painel-tela .tarefa > summary { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.tarefa__cabeca, .tarefa__dados { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.tarefa__cabeca strong { font-size: var(--text-base); }
.tarefa__data { font-size: var(--text-sm); }

/*
 * Fundo próprio em cada cartão (`TAR-2026-10-15-001`, rodada 3, X1 e X3): os números do alto e os cartões de setor do
 * Painel, e o filtro e a tabela da lista de planejamentos. Pedido de Bruno: "cada sessão dessa ou card, precisa de uma
 * cor de fundo, sempre uma diferente da outra". O fundo é a cor do próprio cartão — a do ícone, nos números; a do setor,
 * nos setores —; nos grupos, a intensidade muda um pouco pela posição, para dois cartões da mesma cor nunca saírem iguais.
 */
.indicadores-planejamento > .fundo-proprio:nth-child(5n+1) { --mistura: 10%; }
.indicadores-planejamento > .fundo-proprio:nth-child(5n+2) { --mistura: 12%; }
.indicadores-planejamento > .fundo-proprio:nth-child(5n+3) { --mistura: 14%; }
.indicadores-planejamento > .fundo-proprio:nth-child(5n+4) { --mistura: 11%; }
.indicadores-planejamento > .fundo-proprio:nth-child(5n+5) { --mistura: 13%; }
.painel-setores > .fundo-proprio:nth-child(8n+1) { --mistura: 10%; }
.painel-setores > .fundo-proprio:nth-child(8n+2) { --mistura: 11%; }
.painel-setores > .fundo-proprio:nth-child(8n+3) { --mistura: 12%; }
.painel-setores > .fundo-proprio:nth-child(8n+4) { --mistura: 13%; }
.painel-setores > .fundo-proprio:nth-child(8n+5) { --mistura: 14%; }
.painel-setores > .fundo-proprio:nth-child(8n+6) { --mistura: 15%; }
.painel-setores > .fundo-proprio:nth-child(8n+7) { --mistura: 16%; }
.painel-setores > .fundo-proprio:nth-child(8n+8) { --mistura: 17%; }

/*
 * Quadros, cartões e blocos no padrão dos cartões de módulo do Portal (`TAR-2026-10-15-001`, rodada 3). Bruno pediu o
 * fundo na cor de cada cartão ("se financeiro é amarelo, fundo amarelo") e, ao ver o fundo inteiro colorido: "num tem a
 * tela dos modulos? acho melhor seguir esse padrão". A receita deixou de morar aqui: é a peça comum de todo o SGI, na
 * seção 24 de `superadmin.css` (`TAR-2026-10-15-004`). Aqui ficam só a força do sombreado por posição, nos grupos.
 */

/*
 * A página do planejamento na nova ordem (`TAR-2026-10-16-005`, Entrega 1). Pedido do proprietário: o resumo no alto,
 * as tarefas em linhas curtas, o detalhe só quando se abre a linha e o histórico no fim, porque a página estava
 * "repetitiva e cansativa de ver". Referência aprovada: `docs/designs/prototipos/planejamento-hierarquia-v1/`. Nenhuma
 * cor nasce aqui: cada quadro leva a do seu `data-cor` (seção 24 de `superadmin.css`), e o que fica dentro usa o véu
 * da cor do texto.
 */
.painel-tela { --veu-borda: color-mix(in srgb, var(--text) 12%, transparent); --veu-fundo: color-mix(in srgb, var(--text) 5%, transparent); }

/* A ação do quadro fica no canto do cabeçalho; aberta, o formulário desce para a largura inteira. */
.painel-tela:has(> .acoes-do-quadro) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.painel-tela:has(> .acoes-do-quadro) > * { grid-column: 1 / -1; min-width: 0; }
.painel-tela:has(> .acoes-do-quadro) > .panel__head { grid-column: 1; grid-row: 1; }
.painel-tela > .acoes-do-quadro { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.painel-tela > .acoes-do-quadro:has(> details[open]) { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }

/* Barra de ações: cada ação é um botão; o que ela abre desce para a linha de baixo, na largura inteira. */
.barra-de-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.barra-de-acoes > details[open] { flex-basis: 100%; order: 99; }
.barra-de-acoes > details > summary { list-style: none; cursor: pointer; }
.barra-de-acoes > details > summary::-webkit-details-marker { display: none; }
.barra-de-acoes > details[open] > summary { margin-bottom: 0.75rem; }
.barra-de-acoes > details > :is(form, div) { padding: 0.875rem 1rem; border: 1px solid var(--veu-borda); border-radius: var(--radius-md); background: var(--veu-fundo); }
/* As peças comuns do módulo abrem com texto-link ("Excluir", "Enviar lembrete"): aqui elas ganham a cara de botão, na
   cor do que fazem (PADRAO_DE_TELA_SGI, § 1). */
.barra-de-acoes > details > summary.text-link {
  --botao-cor: var(--success);
  min-height: var(--control-h-sm);
  padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--botao-cor) var(--botao-borda), var(--border));
  border-radius: var(--radius-lg);
  color: color-mix(in srgb, var(--botao-cor) 62%, var(--text));
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  text-decoration: none;
}
.barra-de-acoes > details > summary.text-link--perigo { --botao-cor: var(--danger); color: color-mix(in srgb, var(--danger) 62%, var(--text)); }
.barra-de-acoes > details > summary.text-link[data-cor] { --botao-cor: var(--cor); }
.barra-de-acoes > details > summary.text-link:hover { border-color: var(--botao-cor); background: color-mix(in srgb, var(--botao-cor) 14%, transparent); }
.barra-de-acoes > details > summary .icon { color: var(--botao-cor, currentColor); }
.barra-de-acoes > .acao-lixeira { margin-left: auto; }

/* 1. Resumo do planejamento: objetivo, quem responde, prazo e andamento num quadro só. */
.resumo-plano { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: 1rem; align-items: stretch; }
.resumo-plano__rotulo { display: block; margin: 0 0 0.375rem; color: var(--cor-texto); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.resumo-plano__objetivo { margin: 0; color: var(--text); font-size: var(--text-base); line-height: 1.6; overflow-wrap: anywhere; }
.resumo-plano__fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; margin-top: 1rem; }
.fato { display: flex; align-items: center; gap: 0.625rem; min-width: 0; padding: 0.625rem 0.75rem; border: 1px solid var(--veu-borda); border-radius: var(--radius-md); background: var(--veu-fundo); }
.fato__icone { display: grid; flex: 0 0 2.25rem; place-items: center; height: 2.25rem; border-radius: var(--radius-md); background: var(--cor-fosca-suave); color: var(--cor-fosca); }
.fato__texto { display: grid; gap: 0.0625rem; min-width: 0; }
.fato__texto small { color: var(--text-muted); font-size: var(--text-xs); }
.fato__texto strong { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.fato__texto :is(.chip, .status) { justify-self: start; margin-top: 0.25rem; }
.resumo-plano__andamento { display: grid; align-content: center; gap: 0.875rem; padding: 1rem; border: 1px solid var(--veu-borda); border-radius: var(--radius-md); background: var(--veu-fundo); }
.resumo-plano__anel { display: flex; align-items: center; gap: 1rem; }
.resumo-plano__anel .andamento__anel { flex: 0 0 7rem; width: 7rem; margin: 0; }
.resumo-plano__anel .andamento__numero { padding: 0.75rem; }
.resumo-plano__anel .andamento__numero strong { font-size: var(--text-xl); }
.resumo-plano__anel p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.resumo-plano__anel p strong { display: block; color: var(--text); font-size: var(--text-base); font-weight: 600; }
.resumo-plano .andamento__legenda { gap: 0.375rem 0.75rem; margin-top: 0.5rem; font-size: var(--text-xs); }
/* O que falta preencher aparece como sombra da própria cor do gráfico: "a parte ainda não feita desse grafico precisa
   ter uma sombra mostrando o resto a ser preenchido" (Bruno, 16/10/2026). O tom da borda sumia no tema Escuro. */
.resumo-plano .andamento__trilho { stroke: color-mix(in srgb, var(--success) 22%, transparent); }
.painel-tela .indicador__barra { background: color-mix(in srgb, var(--indicador-cor, var(--info)) 22%, transparent); }
.painel-tela .resumo-plano + .indicadores-planejamento { margin: 0; }
.indicador--tarefas { --indicador-cor: var(--success); --indicador-suave: var(--success-soft); }
.indicador--proximo { --indicador-cor: var(--info); --indicador-suave: var(--info-soft); }
.indicador__legenda--corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* As linhas que abrem: meta, tarefa e alteração. A seta gira; a linha não muda de fundo com o ponteiro. */
:is(.meta-linha, .linha-tarefa) { border: 1px solid var(--veu-borda); border-radius: var(--radius-md); background: var(--veu-fundo); }
:is(.meta-linha, .linha-tarefa, .evento) > summary { list-style: none; cursor: pointer; }
:is(.meta-linha, .linha-tarefa, .evento) > summary::-webkit-details-marker { display: none; }
:is(.meta-linha, .linha-tarefa, .evento) > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.linha__seta { display: grid; place-items: center; color: var(--text-muted); transition: transform var(--transition); }
:is(.meta-linha, .linha-tarefa, .evento)[open] > summary .linha__seta { transform: rotate(180deg); }

/* 2. Metas: uma linha por meta; o cartão completo abre na linha. */
.meta-linha + .meta-linha { margin-top: 0.5rem; }
.meta-linha > summary { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) minmax(10rem, 16rem) auto 1.25rem; align-items: center; gap: 0.875rem; padding: 0.75rem 1rem; }
.meta-linha__icone { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--cor-fosca-suave); color: var(--cor-fosca); }
.meta-linha__texto { display: grid; gap: 0.125rem; min-width: 0; }
.meta-linha__texto strong { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 600; overflow-wrap: anywhere; }
.meta-linha__texto > span { color: var(--text-muted); font-size: var(--text-sm); }
.meta-linha__numeros { display: grid; gap: 0.375rem; }
.meta-linha__numeros > span:first-child { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--text-muted); font-size: var(--text-xs); }
.meta-linha__numeros b { color: var(--text); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.meta-linha .progresso { height: 0.5rem; background: var(--success-soft); }
.meta-linha .progresso__barra { background: var(--success); }
.meta-linha__corpo { display: grid; gap: 0.875rem; padding: 0 1rem 1rem; }

/* 3. Tarefas: uma linha por tarefa; ao abrir, o que é, o checklist, a ficha e as ações. */
.lista-plano { display: grid; gap: 0.5rem; }
.lista-plano + .lista-plano { margin-top: 0.5rem; }
.lista-plano__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.125rem 0 0.25rem; }
.lista-plano__grupo h3 { margin: 0; color: var(--cor-texto); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lista-plano__grupo .progresso { flex: 1 1 6rem; max-width: 12rem; height: 0.375rem; }
.lista-plano__grupo .etapa__dados { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.lista-plano__grupo .barra-de-acoes { margin-left: auto; }
.lista-plano__vazio { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

.linha-tarefa[open] { border-color: color-mix(in srgb, var(--cor-fosca) 45%, var(--border)); }
.linha-tarefa > summary { display: grid; grid-template-columns: 1.75rem 2rem minmax(0, 1fr) minmax(6rem, 9rem) auto auto minmax(7rem, auto) 1.25rem; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; }
/* Na linha fechada, prazo e prioridade não quebram: a etiqueta fica de uma linha só. */
.painel-tela .linha-tarefa > summary :is(.linha-tarefa__prazo, .linha-tarefa__prioridade) { white-space: nowrap; }
.linha-tarefa[open] > summary { border-bottom: 1px solid var(--veu-borda); }
.linha-tarefa__numero { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; font-weight: 600; }
.marca-situacao { --marca: var(--text-muted); display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid color-mix(in srgb, var(--marca) 70%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--marca) 14%, transparent); color: var(--marca); }
.marca-situacao--feita { --marca: var(--success); }
.marca-situacao--aguardando { --marca: var(--warning); }
.marca-situacao--andamento { --marca: var(--info); }
.marca-situacao--cancelada, .marca-situacao--devolvida { --marca: var(--danger); }
.marca-situacao--a_fazer { border-style: dashed; background: transparent; }
.linha-tarefa__texto { display: grid; gap: 0.125rem; min-width: 0; }
.linha-tarefa__texto strong { font-size: var(--text-base); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.linha-tarefa__texto > span { overflow: hidden; color: var(--text-muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.linha-tarefa__quem { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: var(--text-sm); }
.linha-tarefa__quem > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-tarefa__prazo { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.linha-tarefa__prazo .icon { color: var(--text-muted); }
.linha-tarefa > summary :is(.chip, .status) { justify-self: start; }
.linha-tarefa__situacao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }

.linha-tarefa__corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(14rem, 0.9fr); gap: 1rem; padding: 1rem; }
.coluna-tarefa { display: grid; align-content: start; gap: 0.625rem; min-width: 0; }
.coluna-tarefa + .coluna-tarefa { padding-left: 1rem; border-left: 1px solid var(--veu-borda); }
.coluna-tarefa h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--cor-texto); font-size: var(--text-sm); font-weight: 700; }
.coluna-tarefa h4 .icon { color: var(--cor-fosca); }
.coluna-tarefa > p { margin: 0; font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.coluna-tarefa .membros { grid-template-columns: minmax(0, 1fr); }
.coluna-tarefa .toggle__text { font-size: var(--text-sm); }
.ficha-tarefa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.5rem 0.875rem; margin: 0; font-size: var(--text-sm); }
.ficha-tarefa dt { color: var(--text-muted); }
.ficha-tarefa dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.linha-tarefa__provas { display: grid; gap: 0.5rem; padding: 0 1rem 1rem; font-size: var(--text-sm); }
.linha-tarefa__verificar { margin: 0 1rem 1rem; padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.linha-tarefa__acoes { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--veu-borda); }
.linha-tarefa__acoes:not(:has(*)) { display: none; }
.lista-plano__grupo .barra-de-acoes:has(> details[open]) { flex-basis: 100%; }

/* 4. Depende de você: o que espera a ação de quem está olhando. */
.depende { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem; }
.depende__item { --item-cor: var(--warning); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.25rem 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--veu-borda); border-radius: var(--radius-md); background: var(--veu-fundo); }
.depende__item--minha { --item-cor: var(--info); }
.depende__item--devolvida { --item-cor: var(--danger); }
.depende__icone { display: grid; grid-row: span 2; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--item-cor) 18%, transparent); color: var(--item-cor); }
.depende__item strong { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.depende__item p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.depende__pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; grid-column: 1 / -1; margin-top: 0.5rem; }

/* 5. Histórico: uma linha por alteração; o antes e o depois abrem na linha. */
.linha-do-tempo { display: grid; margin: 0; padding: 0; list-style: none; }
.evento > summary, .evento--fixo { position: relative; display: grid; grid-template-columns: 9.25rem 2rem 9rem minmax(0, 1fr) 1.25rem; align-items: center; gap: 0.75rem; padding: 0.5rem 0.25rem; }
/* A espinha da linha do tempo passa pelo centro dos pontos. */
.evento > summary::before, .evento--fixo::before { position: absolute; top: 0; bottom: 0; left: calc(0.25rem + 9.25rem + 0.75rem + 1rem - 1px); width: 2px; background: color-mix(in srgb, var(--cor-fosca) 35%, transparent); content: ""; }
.linha-do-tempo > li:first-child > .evento > summary::before, .linha-do-tempo > li:first-child > .evento--fixo::before { top: 50%; }
.linha-do-tempo > li:last-child > .evento:not([open]) > summary::before, .linha-do-tempo > li:last-child > .evento--fixo::before { bottom: 50%; }
.evento__quando { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.evento__ponto { --ponto: var(--text-muted); position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid color-mix(in srgb, var(--ponto) 70%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--ponto) 22%, var(--surface)); color: var(--ponto); }
.evento__ponto--azul { --ponto: var(--info); }
.evento__ponto--verde { --ponto: var(--success); }
.evento__ponto--laranja { --ponto: var(--warning); }
.evento__ponto--roxo { --ponto: var(--purple); }
.evento__quem { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.evento__texto { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.mudancas { margin: 0 0 0.75rem calc(0.25rem + 9.25rem + 2rem + 1.5rem); padding: 0.75rem 1rem; border: 1px solid var(--veu-borda); border-radius: var(--radius-md); background: var(--veu-fundo); font-size: var(--text-sm); }
.mudancas__campos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0; }
.mudancas dt { color: var(--text-muted); font-weight: 600; }
.mudancas dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; overflow-wrap: anywhere; }
.mudancas dd > :is(del, ins) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-width: 0; }
.mudancas ins { color: var(--text); text-decoration: none; }
.mudancas__antes { color: var(--text-muted); text-decoration: line-through; }
.mudancas__antes .chip { --cor: var(--text-muted); --cor-suave: var(--filled-bg); color: var(--text-muted); text-decoration: line-through; }
.mudancas__seta { color: var(--cor-fosca); font-weight: 700; }
.historico-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--veu-borda); }
.historico-pe > p { margin: 0; color: var(--text-muted); font-size: var(--text-xs); }

/* 6. Mais ações: uma linha de botões; cada um abre o seu formulário. */
.mais-acoes .toggle__text { font-size: var(--text-sm); }
.mais-acoes__sigilo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-right: auto; }

@media (max-width: 75rem) {
  .linha-tarefa > summary { grid-template-columns: 1.75rem 2rem minmax(0, 1fr) auto minmax(7rem, auto) 1.25rem; }
  .linha-tarefa__quem, .linha-tarefa > summary > .linha-tarefa__prioridade { display: none; }
  .linha-tarefa__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .linha-tarefa__corpo > .coluna-tarefa:last-child { grid-column: 1 / -1; padding: 1rem 0 0; border-top: 1px solid var(--veu-borda); border-left: 0; }
}

@media (max-width: 62rem) {
  .resumo-plano, .resumo-plano__fatos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .painel-tela:has(> .acoes-do-quadro) { display: flex; }
  .painel-tela > .acoes-do-quadro { justify-content: flex-start; }
  .barra-de-acoes > .acao-lixeira { margin-left: 0; }
  .linha-tarefa > summary { grid-template-columns: 2rem minmax(0, 1fr) 1.25rem; gap: 0.5rem 0.75rem; padding: 0.75rem; }
  .linha-tarefa__numero { display: none; }
  .linha-tarefa > summary > :is(.linha-tarefa__prazo, .linha-tarefa__situacao) { grid-column: 2; }
  .linha-tarefa > summary > .linha__seta { grid-column: 3; grid-row: 1; }
  .linha-tarefa__texto > span { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .linha-tarefa__corpo { grid-template-columns: minmax(0, 1fr); padding: 0.75rem; }
  .coluna-tarefa + .coluna-tarefa, .linha-tarefa__corpo > .coluna-tarefa:last-child { padding: 0.75rem 0 0; border-top: 1px solid var(--veu-borda); border-left: 0; }
  .meta-linha > summary { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; }
  .meta-linha__numeros { grid-column: 1 / -1; }
  .meta-linha > summary > .linha__seta { grid-column: 3; grid-row: 1; }
  .meta-linha > summary > .meta-linha__revisao { display: none; }
  .evento > summary, .evento--fixo { grid-template-columns: 2rem minmax(0, 1fr) 1.25rem; grid-template-areas: "ponto quem seta" "ponto quando seta" "ponto texto seta"; row-gap: 0.125rem; }
  .evento > summary::before, .evento--fixo::before { left: calc(0.25rem + 1rem - 1px); }
  .evento__ponto { grid-area: ponto; }
  .evento__quem { grid-area: quem; }
  .evento__quando { grid-area: quando; font-size: var(--text-xs); }
  .evento__texto { grid-area: texto; }
  .evento .linha__seta { grid-area: seta; }
  .mudancas { margin-left: 2.75rem; }
  .mudancas__campos { grid-template-columns: minmax(0, 1fr); }
  /* No celular, os quatro números do alto viram etiquetas pequenas, dois a dois (PADRAO_DE_TELA_SGI, § 5). */
  .painel-tela .resumo-plano + .indicadores-planejamento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .resumo-plano + .indicadores-planejamento .indicador { gap: 0; padding: 0.5rem 0.625rem; }
  .resumo-plano + .indicadores-planejamento .indicador__icone { flex-basis: 1.75rem; width: 1.75rem; height: 1.75rem; }
  .resumo-plano + .indicadores-planejamento .indicador__titulo { font-size: var(--text-xs); line-height: 1.3; }
  .resumo-plano + .indicadores-planejamento .indicador__numero { font-size: var(--text-base); }
  .resumo-plano + .indicadores-planejamento :is(.indicador__legenda, .indicador__barra) { display: none; }
}

/*
 * A lista de planejamentos no celular: um cartão por planejamento (`TAR-2026-10-17-002`).
 *
 * O proprietário, olhando a lista no telefone: "tela do desktop ok, mas do
 * celular não ta no padrão" — a tabela passava da largura da tela e cortava a
 * coluna Responsável. Tudo aqui vale até 40 rem, a largura do celular do
 * Portal (superadmin.css, seção 20); no computador a tabela fica como é.
 * Cada linha da tabela vira um cartão dentro do quadro índigo da lista, sem
 * faixa nem sombreado, no fundo da tela (`--bg`), mais escuro que o quadro,
 * por ordem do proprietário ao ver o cartão no véu claro do quadrinho: "poe
 * fundo escuro nos cards". O cartão mostra o que a linha mostra: o título, o setor com o ícone e a cor
 * dele, a situação, quem responde, o prazo, as atrasadas e o progresso. O
 * nome da coluna vai junto do número, como rótulo. O cartão inteiro abre o
 * planejamento, com a mãozinha.
 */
@media (max-width: 40rem) {
  .table-scroll.lista-planejamentos { overflow-x: visible; }
  .lista-planejamentos .data-table { display: block; }
  .lista-planejamentos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lista-planejamentos .data-table tbody { display: grid; gap: 0.625rem; padding: 0.75rem; }
  .lista-planejamentos .data-table tbody tr:not(.empty-row) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "titulo titulo" "setor situacao" "responsavel responsavel" "prazo atrasadas" "progresso progresso"; gap: 0.625rem 0.75rem; padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius-lg); background: var(--bg); cursor: pointer; }
  /* O realce do ponteiro só com mouse: no toque, o cartão tocado ficava claro depois de voltar à lista ("um card ficou claro"). */
  .lista-planejamentos .data-table tbody tr:not(.empty-row):hover { background: var(--bg); }
  @media (hover: hover) { .lista-planejamentos .data-table tbody tr:not(.empty-row):hover { background: color-mix(in srgb, var(--text) 4%, var(--bg)); } }
  .lista-planejamentos .data-table tbody tr:not(.empty-row) > td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .lista-planejamentos .data-table tbody td[data-label]::before { display: block; margin-bottom: 0.25rem; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; line-height: var(--leading-xs); text-transform: uppercase; content: attr(data-label); }
  .lista-planejamentos .data-table tbody tr.empty-row { display: block; }
  .lista-planejamentos__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; grid-area: titulo; font-size: var(--text-base); font-weight: 600; line-height: 1.35; }
  .lista-planejamentos__titulo .text-link::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
  .lista-planejamentos__setor { grid-area: setor; }
  .lista-planejamentos__situacao { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 0.375rem; grid-area: situacao; }
  .lista-planejamentos__responsavel { grid-area: responsavel; }
  .lista-planejamentos__prazo { grid-area: prazo; }
  .lista-planejamentos__atrasadas { grid-area: atrasadas; }
  .lista-planejamentos__progresso { grid-area: progresso; }
  .lista-planejamentos__progresso .progresso { margin-bottom: 0.25rem; }
}

/* Coordenação — protótipo aprovado na TAR-2026-10-18-002. Paleta e fonte do SGI. */
.coord-painel { --coord-fundo: color-mix(in srgb, var(--surface) 35%, var(--bg)); }
.coord-painel .panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-fosca, var(--cor)) 13%, var(--coord-fundo)), var(--coord-fundo) 58%);
  box-shadow: none;
}
.coord-heading { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.coord-tabs, .coord-subtabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--border); margin: 0 0 1.25rem; }
.coord-tabs a, .coord-subtabs a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1rem; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.coord-tabs a[aria-current], .coord-subtabs a[aria-current] { color: var(--color-accent-content); border-bottom-color: var(--color-accent-content); font-weight: 600; }
.coord-tabs a:hover, .coord-subtabs a:hover { color: var(--text); background: var(--surface-hover); }
.coord-tabs svg { width: 1.1rem; height: 1.1rem; }
.coord-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.coord-stat.panel { margin: 0; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--text); }
.coord-stat > span { display: flex; gap: .5rem; align-items: center; font-weight: 500; color: var(--cor-texto); }
.coord-stat strong { font-size: 2rem; line-height: 1.25; font-weight: 600; }
.coord-stat small { font-size: .78rem; color: var(--text-muted); }
.coord-stat[aria-current] { outline: 2px solid var(--color-accent-content); outline-offset: 2px; }
.coord-count { color: var(--text-muted); font-size: .85em; font-weight: 400; margin-left: .3rem; }
.coord-entrega { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .45rem 1rem; padding: 1rem .6rem; border-bottom: 1px solid var(--border-subtle); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.coord-entrega:hover { background: var(--surface-hover); }
.coord-entrega--prioridade { border: 1px solid var(--border); border-radius: .65rem; padding: 1rem; margin-bottom: .25rem; background: var(--coord-fundo); }
.coord-entrega__titulo { font-size: 1rem; font-weight: 600; }
.coord-entrega__meta { color: var(--text-muted); font-size: .85rem; line-height: 1.6; }
.coord-entrega__prazo { display: flex; align-items: center; gap: .35rem; font-size: .85rem; white-space: nowrap; }
.coord-entrega__situacao .chip { white-space: normal; text-align: center; }
.coord-personbar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: 1.25rem 0; }
.coord-personbar .field { min-width: 13rem; margin: 0; }
.coord-personbar p { flex: 1; min-width: 12rem; margin-bottom: .5rem; }
.coord-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.coord-plano { display: flex; flex-direction: column; gap: .65rem; padding: 1.15rem; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: .75rem; background: color-mix(in srgb, var(--text) 5%, transparent); text-decoration: none; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.coord-plano h3, .coord-plano p { margin: 0; }
.coord-plano p, .coord-plano__pendencias { color: var(--text-muted); font-size: .85rem; }
.coord-plano__progresso { font-size: 1.35rem; font-weight: 600; }
.coord-plano progress { width: 100%; height: .4rem; accent-color: var(--text-muted); }
.coord-plano:hover { border-color: var(--text-muted); }
.coord-vazio { text-align: center; padding: 2.25rem 1rem; color: var(--text-muted); }
.coord-vazio > svg { width: 2rem; height: 2rem; }
.coord-vazio h3 { color: var(--text); margin: .75rem 0; }
.coord-foot { color: var(--text-muted); font-size: .8rem; text-align: center; margin-top: 1.5rem; }
.coord-detalhe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.coord-detalhe dt { color: var(--text-muted); font-size: .85rem; }
.coord-detalhe dd { margin: .3rem 0 0; overflow-wrap: anywhere; }
.coord-descricao { white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1.25rem; }
@media (max-width: 900px) { .coord-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .coord-heading { flex-direction: column; gap: .75rem; }
  .coord-heading > .button { align-self: flex-start; }
  .coord-tabs a { flex: 1; padding: .8rem .3rem; font-size: .88rem; gap: .35rem; }
  .coord-stats { display: flex; flex-wrap: wrap; gap: .375rem; }
  .coord-stat.panel { flex-direction: row; align-items: center; gap: .3125rem; padding: .3125rem .5rem; border: 0; border-radius: .375rem; background: color-mix(in srgb, var(--cor) 12%, var(--coord-fundo)); }
  .coord-stat > span { display: contents; }
  .coord-stat .panel__icone { order: 0; width: 1rem; height: 1rem; background: none; }
  .coord-stat .panel__icone .icon { width: 1rem; height: 1rem; }
  .coord-stat strong { order: 1; font-size: .875rem; line-height: 1.4; }
  .coord-stat > span > span:not(.panel__icone) { order: 2; font-size: .6875rem; }
  .coord-stat small { display: none; }
  .coord-entrega { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 1rem .15rem; }
  .coord-entrega--prioridade { padding: .9rem; }
  .coord-entrega__titulo { font-size: .98rem; }
  .coord-entrega__situacao { grid-row: 2; }
  .coord-entrega__meta { font-size: .8rem; }
  .coord-personbar .field { flex: 1; min-width: 0; }
  .coord-personbar p { flex-basis: 100%; margin: 0; }
  .coord-subtabs a { padding: .7rem .5rem; font-size: .82rem; flex: 1; }
  .coord-planos, .coord-detalhe { grid-template-columns: minmax(0, 1fr); }
}