/**
 * CORRIGIDO (correcção de arquitectura — "use os mesmos estilos usados
 * em RDQA"): a listagem/toolbar/paginação/drawer/campos de formulário
 * já usam inteiramente as classes partilhadas de `data-app.css` (nunca
 * reimplementadas aqui). Only o que é mesmo específico do Plano —
 * badges de estado de aprovação e o feed de comentários — vive neste
 * ficheiro.
 */

.paralelo-plano-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.paralelo-plano-badge--pendente {
	background: #fff3cd;
	color: #8a6100;
}

.paralelo-plano-badge--aprovada {
	background: #d7f5df;
	color: #1a7a3a;
}

.paralelo-plano-badge--reprovada {
	background: #fbdada;
	color: #a3231f;
}

/* NOVO (pedido "os ícones descritos no prompt"): pílulas coloridas
   também para o Estado de Execução e para o Prazo, com o rótulo no
   `title` (tooltip) — desenhadas pelo tipo de coluna `badge` do motor
   genérico (`data-app.js`), a partir do próprio valor. Mesma paleta
   das pílulas de aprovação acima. */
.paralelo-plano-exec,
.paralelo-plano-prazo {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	background: #eef0f2;
	color: #4a5257;
}

.paralelo-plano-exec--cumprida,
.paralelo-plano-prazo--cumprida,
.paralelo-plano-prazo--no_prazo {
	background: #d7f5df;
	color: #1a7a3a;
}

.paralelo-plano-exec--nao_cumprida,
.paralelo-plano-prazo--atrasada {
	background: #fbdada;
	color: #a3231f;
}

.paralelo-plano-exec--remarcada,
.paralelo-plano-prazo--remarcada {
	background: #fff3cd;
	color: #8a6100;
}

.paralelo-plano-exec--cancelada,
.paralelo-plano-prazo--cancelada {
	background: #e6e6e6;
	color: #6b6b6b;
	text-decoration: line-through;
}

/* CORRIGIDO (pedido "a parte de comentário não tem bom contraste... os
   comentários não estão visíveis"): a causa era usar duas variáveis de
   tema que NÃO EXISTEM — `--paralelo-bg-secondary` e
   `--paralelo-text-muted`. Sem elas, o fundo caía sempre no valor fixo
   claro do fallback (#f7f7f8) enquanto o texto herdava
   `--paralelo-text` do tema — que no modo escuro é quase branco.
   Resultado: texto branco sobre fundo branco.

   Regra aplicada agora em todo este bloco: sempre que se fixa um
   FUNDO, fixa-se também a COR do texto, e ambos vêm dos tokens reais
   do tema (`--paralelo-bg`/`--paralelo-surface`/`--paralelo-text`/
   `--paralelo-border`), que trocam juntos entre claro e escuro. */

.paralelo-plano-comments {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Nota de contraste: dentro do drawer, o cartão que envolve estes
   comentários usa `--paralelo-bg`; por isso cada comentário usa
   `--paralelo-surface` — os dois tokens trocam juntos entre claro e
   escuro, por isso a separação mantém-se nos dois temas. */
.paralelo-plano-comments__item {
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--paralelo-surface);
	color: var(--paralelo-text);
	border: 1px solid var(--paralelo-border);
	border-left-width: 4px;
	border-left-color: var(--paralelo-border);
}

.paralelo-plano-comments__item--aprovacao {
	border-left-color: #1a7a3a;
}

.paralelo-plano-comments__item--rejeicao {
	border-left-color: #a3231f;
}

.paralelo-plano-comments__item--avaliacao {
	border-left-color: var(--paralelo-primary);
}

/* Cabeçalho do comentário: tipo + autor + data. `opacity` em vez de uma
   cor cinzenta fixa — assim continua legível nos dois temas, sem
   precisar de um token "muted" que a plataforma não tem. */
.paralelo-plano-comments__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: var(--paralelo-text-xs);
	color: var(--paralelo-text);
	opacity: 0.75;
	margin-bottom: 8px;
	font-weight: 600;
}

.paralelo-plano-comments__tipo {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	/* `--paralelo-bg` (não `--paralelo-surface`): o comentário já está
	   sobre `--paralelo-surface`, e uma pílula da mesma cor do fundo
	   dela seria invisível. */
	background: var(--paralelo-bg);
	color: var(--paralelo-text);
	border: 1px solid var(--paralelo-border);
	font-size: 11px;
	opacity: 1;
}

.paralelo-plano-comments__item--aprovacao .paralelo-plano-comments__tipo {
	background: #d7f5df;
	color: #1a7a3a;
	border-color: #1a7a3a;
}

.paralelo-plano-comments__item--rejeicao .paralelo-plano-comments__tipo {
	background: #fbdada;
	color: #a3231f;
	border-color: #a3231f;
}

.paralelo-plano-comments__item--avaliacao .paralelo-plano-comments__tipo {
	background: #e5edfd;
	color: #1e4bb8;
	border-color: #1e4bb8;
}

.paralelo-plano-comments__body {
	font-size: var(--paralelo-text-sm);
	line-height: 1.6;
	color: var(--paralelo-text);
	word-break: break-word;
}

.paralelo-plano-comments__body a {
	color: var(--paralelo-links);
}

.paralelo-plano-comments__body p {
	margin: 0 0 8px;
}

.paralelo-plano-comments__body p:last-child {
	margin-bottom: 0;
}

/* AJUSTADO (pedido "os cartões de estatística acima devem ser uma linha
   em forma de textos pequenos e não cartões"): uma linha discreta, com
   o número em destaque e o rótulo a seguir — separadores subtis entre
   os itens, nunca caixas. */
.paralelo-plano-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin: 0 0 14px;
	font-size: var(--paralelo-text-xs);
	color: var(--paralelo-text);
	opacity: 0.85;
}

.paralelo-plano-stats__item {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	white-space: nowrap;
}

.paralelo-plano-stats__item + .paralelo-plano-stats__item::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	margin-right: 13px;
	background: var(--paralelo-border);
}

.paralelo-plano-stats__item strong {
	font-size: var(--paralelo-text-sm);
	font-weight: 700;
}

.paralelo-plano-stats__item--aprovada strong {
	color: #1a7a3a;
}

.paralelo-plano-stats__item--reprovada strong {
	color: #a3231f;
}

.paralelo-plano-stats__item--pendente strong {
	color: #8a6100;
}

/* Linha de botões de acção dentro dos cartões do drawer (Decisão,
   Avaliar, Comentar) — antes eram botões soltos separados por um
   espaço em branco no HTML. */
.paralelo-plano-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

/* NOVO (pedido "aumente a largura do formulário de aprovação"): com o
   drawer largo (900px), a lista de detalhes em coluna única ficava
   com muito espaço morto à direita — passa a 2 colunas a partir dos
   700px. Escopo só ao Plano (`.paralelo-plano-detail`), nunca à vista
   de detalhe genérica das outras entidades. */
@media (min-width: 700px) {
	.paralelo-plano-detail dl {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 28px;
	}
}

.paralelo-plano-detail__row {
	min-width: 0;
}

/* A Descrição costuma ser o texto mais longo — ocupa a linha inteira,
   em vez de ficar espremida em meia largura. */
.paralelo-plano-detail__row--wide {
	grid-column: 1 / -1;
}

/* NOVO (pedido "no formulário nada aparece"): a linha que explica
   porque é que a avaliação está bloqueada — ou, quando não está, o que
   se espera de quem a vai registar. Mesma regra de contraste do resto
   do ficheiro: cor explícita a partir de um token real, nunca herdada. */
.paralelo-plano-bloqueio {
	font-size: var(--paralelo-text-sm);
	line-height: 1.55;
	color: var(--paralelo-text);
	opacity: 0.8;
	margin: 0 0 14px;
}

/* NOVO (Fase 4 — painel de histórico/auditoria): cronologia vertical
   com um fio a ligar os eventos. Mesma regra de contraste do resto do
   ficheiro — sempre que se fixa um FUNDO, fixa-se também a COR, e
   ambos vêm de tokens reais do tema (`--paralelo-bg`/`--paralelo-surface`/
   `--paralelo-text`/`--paralelo-border`), nunca de variáveis
   inexistentes nem de cinzentos fixos que só funcionam num dos temas. */
.paralelo-plano-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* O fio vertical. Fica ATRÁS dos ícones (que têm fundo próprio), por
   isso pára no último item em vez de sobrar por baixo dele. */
.paralelo-plano-timeline::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: var(--paralelo-border);
}

.paralelo-plano-timeline__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 0 16px;
}

.paralelo-plano-timeline__item:last-child {
	padding-bottom: 0;
}

.paralelo-plano-timeline__icone {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	background: var(--paralelo-surface);
	color: var(--paralelo-text);
	border: 2px solid var(--paralelo-border);
}

.paralelo-plano-timeline__item--bom .paralelo-plano-timeline__icone {
	border-color: #1a7a3a;
	color: #1a7a3a;
}

.paralelo-plano-timeline__item--mau .paralelo-plano-timeline__icone {
	border-color: #a3231f;
	color: #a3231f;
}

.paralelo-plano-timeline__item--aviso .paralelo-plano-timeline__icone {
	border-color: #8a6100;
	color: #8a6100;
}

.paralelo-plano-timeline__corpo {
	min-width: 0;
	padding-top: 3px;
}

.paralelo-plano-timeline__titulo {
	font-size: var(--paralelo-text-sm);
	font-weight: 600;
	color: var(--paralelo-text);
}

.paralelo-plano-timeline__meta {
	font-size: var(--paralelo-text-xs);
	color: var(--paralelo-text);
	opacity: 0.7;
	margin-top: 1px;
}

.paralelo-plano-timeline__detalhe {
	font-size: var(--paralelo-text-xs);
	color: var(--paralelo-text);
	background: var(--paralelo-bg);
	border: 1px solid var(--paralelo-border);
	border-radius: 6px;
	padding: 5px 9px;
	margin-top: 6px;
	word-break: break-word;
}

/* Dentro do drawer o cartão já usa `--paralelo-bg`; aqui o detalhe
   inverte para `--paralelo-surface` para continuar a destacar-se. */
.paralelo-drawer__body .paralelo-plano-timeline__detalhe {
	background: var(--paralelo-surface);
}

.paralelo-plano-timeline__nota {
	font-size: var(--paralelo-text-xs);
	color: var(--paralelo-text);
	opacity: 0.7;
	margin: 0 0 14px;
}