/* GESPRODART — folha de estilo própria (sem frameworks, sem CDN). */

:root {
    --bg: #0f172a;
    --card: #ffffff;
    --primary: #0f766e;
    --primary-dark: #115e59;
    --primary-claro: #ccfbf1;
    --text: #1f2937;
    --muted: #6b7280;
    --linha: #e5e7eb;
    --linha-forte: #d1d5db;
    --zebra: #f9fafb;
    --ok-bg: #ecfdf5;
    --ok-border: #6ee7b7;
    --ok-text: #065f46;
    --erro-bg: #fef2f2;
    --erro-border: #fca5a5;
    --erro-text: #b91c1c;
    --aviso-bg: #fffbeb;
    --aviso-border: #fcd34d;
    --aviso-text: #92400e;
    --raio: 8px;
    --sombra: 0 1px 3px rgba(15, 23, 42, .12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: #f3f4f6;
}

a { color: var(--primary); }

/* ── Cabeçalho ───────────────────────────────────────────────────────────── */

.topo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--bg);
    color: #e5e7eb;
    box-shadow: var(--sombra);
}

.marca {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: #fff;
}

/* Indicador do estado da ligação à base de dados. */
.marca.logo-ok    { border-bottom: 3px solid #22c55e; }
.marca.logo-erro  { border-bottom: 3px solid #ef4444; }
.marca small      { font-weight: 400; font-size: 10px; letter-spacing: 0; opacity: .6; margin-left: 5px; }

.subtitulo { color: #9ca3af; font-size: 12px; }

.nav-topo { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }

.nav-topo a {
    color: #d1d5db;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--raio);
    font-size: 13px;
}

.nav-topo a:hover      { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-topo a.ativo      { background: var(--primary); color: #fff; }

.utilizador { font-size: 12px; color: #9ca3af; }
.utilizador .sair { color: #fca5a5; text-decoration: none; margin-left: 8px; }
.utilizador .sair:hover { text-decoration: underline; }

.db-erro {
    background: var(--erro-bg);
    color: var(--erro-text);
    border-bottom: 1px solid var(--erro-border);
    padding: 8px 20px;
    font-weight: 600;
}

main { max-width: 1280px; margin: 0 auto; padding: 20px; }
/* Listas largas (tabelas auxiliares): sem o teto de largura e com margens
   menores, para as colunas caberem no ecrã. */
body.pagina-larga main { max-width: none; padding: 12px 16px; }

/* ── Mensagens ───────────────────────────────────────────────────────────── */

.flashes { margin-bottom: 16px; display: grid; gap: 8px; }

.flash, .erro, .aviso {
    padding: 10px 14px;
    border-radius: var(--raio);
    border: 1px solid;
}

.flash-ok   { background: var(--ok-bg);    border-color: var(--ok-border);    color: var(--ok-text); }
.flash-erro { background: var(--erro-bg);  border-color: var(--erro-border);  color: var(--erro-text); }
.erro       { background: var(--erro-bg);  border-color: var(--erro-border);  color: var(--erro-text); }
.aviso      { background: var(--aviso-bg); border-color: var(--aviso-border); color: var(--aviso-text); }

/* ── Login ───────────────────────────────────────────────────────────────── */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0f172a 0%, #115e59 100%);
    padding: 20px;
}

.login-card {
    background: var(--card);
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    width: 100%;
    max-width: 380px;
}

.login-card .brand {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary);
    text-align: center;
}

.login-card .subtitle {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin: 4px 0 24px;
}

/* ── Formulários ─────────────────────────────────────────────────────────── */

.campo { margin-bottom: 14px; }

.campo label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.campo .ajuda { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 3px; }

/* Descrição de um campo escondida atrás de um ⓘ: o rótulo fica numa linha só e
   a explicação continua a existir, ao passar o rato ou com o foco do teclado.
   Num formulário de dez campos, dez descrições sempre visíveis empurravam os
   botões para fora do ecrã. */
.dica {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--linha-forte);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    cursor: help;
    vertical-align: middle;
}

.dica:hover, .dica:focus { background: var(--primary); outline: none; }

/* A bolha nasce escondida e não ocupa espaço; por isso o rótulo não cresce. */
.dica-bolha {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 150%;
    transform: translateX(-50%);
    z-index: 30;
    width: max-content;
    max-width: 260px;
    padding: 6px 9px;
    border-radius: var(--raio);
    background: var(--text);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .28);
}

.dica:hover .dica-bolha, .dica:focus .dica-bolha { display: block; }

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    font: inherit;
    color: var(--text);
    background: #fff;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-claro);
}

textarea { min-height: 80px; resize: vertical; }

.campo-inline { display: flex; align-items: center; gap: 8px; }
/* O `display: flex` acima anulava o atributo `hidden` — e as colunas a mostrar
   dos campos ERP, que o JS esconde por tabela, apareciam todas de uma vez. */
[data-colunas-erp][hidden], [data-tipo-campo][hidden] { display: none !important; }
.campo-inline input[type=checkbox] { width: auto; }
.campo-inline label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; }
/* Numa caixa, o ⓘ fica fora do rótulo — um clique dentro de um <label> ligava a
   caixa — e o espaçamento já vem do `gap` do flex. */
.campo-inline > .dica { margin-left: 0; }

.grelha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }

.botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

button, .botao {
    padding: 8px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--raio);
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

button:hover, .botao:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.botao-sec, button.sec {
    background: #fff;
    color: var(--text);
    border-color: var(--linha-forte);
}

.botao-sec:hover, button.sec:hover { background: var(--zebra); border-color: var(--muted); }

.botao-perigo, button.perigo {
    background: #fff;
    color: var(--erro-text);
    border-color: var(--erro-border);
}

.botao-perigo:hover, button.perigo:hover { background: var(--erro-bg); }

/* Verde claro. Mesma forma e mesmo peso do botão de executar, cor diferente:
   abrir o detalhe de uma tarefa não é uma ação destrutiva nem a principal. */
.botao-verde, button.verde {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-color: var(--ok-border);
}

.botao-verde:hover, button.verde:hover {
    background: #d1fae5;
    border-color: var(--ok-text);
}

button.link {
    background: none;
    border: none;
    color: var(--primary);
    padding: 0;
    font-weight: 400;
    text-decoration: underline;
}

/* ── Cartões ─────────────────────────────────────────────────────────────── */

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.cartao {
    display: block;
    background: var(--card);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 16px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--sombra);
}

.cartao:hover { border-color: var(--primary); transform: translateY(-1px); }
.cartao h3 { margin: 0 0 6px; font-size: 15px; }
.cartao p  { margin: 0; color: var(--muted); font-size: 12px; }

.painel {
    background: var(--card);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 16px;
    box-shadow: var(--sombra);
    margin-bottom: 16px;
}

.painel h2 { margin: 0 0 12px; font-size: 15px; }

.paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
/* Tabelas auxiliares: formulário estreito, a lista fica com o resto. */
.paineis-aux { grid-template-columns: clamp(240px, 20vw, 300px) minmax(0, 1fr); gap: 12px; }
.paineis-aux table.lista th, .paineis-aux table.lista td { padding: 6px 6px; }
.paineis-aux table.lista { font-size: 12px; }
.paineis-aux table.lista td.celula-curta { max-width: 14ch; }
@media (max-width: 800px) { .paineis-aux { grid-template-columns: 1fr; } }

/* ── Indicadores por etapa ────────────────────────────────────────────────── */

.kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

.kpi {
    flex: 1 1 130px;
    background: var(--card);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--muted);
    border-radius: var(--raio);
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--sombra);
}

.kpi:hover { border-color: var(--primary); }
.kpi .valor { font-size: 26px; font-weight: 700; line-height: 1.1; }
.kpi .rotulo { font-size: 12px; color: var(--muted); }

/* ── Tabelas ─────────────────────────────────────────────────────────────── */

.tabela-wrap { overflow-x: auto; }

table.lista {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    font-size: 13px;
}

table.lista th, table.lista td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--linha);
    vertical-align: top;
}

table.lista thead th {
    background: var(--zebra);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 2px solid var(--linha-forte);
}

table.lista thead th a { color: var(--muted); text-decoration: none; }
table.lista thead th a:hover { color: var(--primary); }
table.lista tbody tr:hover { background: var(--zebra); }
table.lista td.acoes { white-space: nowrap; text-align: right; }
table.lista td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Texto comprido numa linha cortada; o valor inteiro está no `title`. */
table.lista td.celula-curta { max-width: 24ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.inativo { opacity: .55; }

.vazio { padding: 24px; text-align: center; color: var(--muted); }

/* ── Pastilhas ───────────────────────────────────────────────────────────── */

.pastilha {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.pastilha-neutra { background: #6b7280; }
.pastilha-ok     { background: #16a34a; }
.pastilha-erro   { background: #dc2626; }
.pastilha-aviso  { background: #d97706; }

/* ── Barra de filtros ────────────────────────────────────────────────────── */

.filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--card);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.filtros .campo { margin: 0; min-width: 150px; }
.filtros .campo.largo { flex: 1 1 240px; }

/* ── Paginação ───────────────────────────────────────────────────────────── */

.paginacao {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 0;
    font-size: 13px;
}

.paginacao a, .paginacao span {
    padding: 5px 10px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    text-decoration: none;
    background: var(--card);
}

.paginacao .atual { background: var(--primary); color: #fff; border-color: var(--primary); }
.paginacao .contagem { border: none; background: none; color: var(--muted); margin-right: auto; padding-left: 0; }

/* ── Barra de título de página ───────────────────────────────────────────── */

.titulo-pagina {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.titulo-pagina h1 { margin: 0; font-size: 20px; }
.titulo-pagina .acoes { margin-left: auto; display: flex; gap: 8px; }

.migalhas { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.migalhas a { color: var(--muted); }

/* ── Ficha de dados ──────────────────────────────────────────────────────── */

dl.ficha { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 14px; margin: 0; }
dl.ficha dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
dl.ficha dd { margin: 0; }

/* ── Histórico ───────────────────────────────────────────────────────────── */

.historico { list-style: none; margin: 0; padding: 0; }

.historico li {
    padding: 10px 0 10px 14px;
    border-left: 2px solid var(--linha-forte);
    position: relative;
}

.historico li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.historico .quando { font-size: 11px; color: var(--muted); }
.historico .comentario { margin-top: 4px; white-space: pre-wrap; }

/* ── Abas ────────────────────────────────────────────────────────────────── */

.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--linha-forte); margin-bottom: 16px; }

.abas a {
    padding: 8px 14px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.abas a.ativo { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Página de erro ──────────────────────────────────────────────────────── */

.erro-pagina { text-align: center; padding: 60px 20px; }
.erro-pagina .codigo { font-size: 56px; font-weight: 700; color: var(--linha-forte); }

.truncar { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ETAPAS E AÇÕES
   ══════════════════════════════════════════════════════════════════════════ */
/* A árvore do plano usa <details>: cada etapa nasce fechada e só a etapa em
   curso fica aberta — cinquenta ações num ecrã são ilegíveis de outra forma. */

.etapa {
    background: var(--card);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--muted);
    border-radius: var(--raio);
    margin-bottom: 10px;
    box-shadow: var(--sombra);
}

.etapa[open] { box-shadow: 0 2px 8px rgba(15, 23, 42, .14); }

.etapa > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.etapa > summary::-webkit-details-marker { display: none; }

.etapa > summary::before {
    content: "\25B8";
    color: var(--muted);
    font-size: 12px;
    transition: transform .12s;
}

.etapa[open] > summary::before { transform: rotate(90deg); }
.etapa > summary:hover { background: var(--zebra); }
.etapa .etapa-nome { flex: 1 1 auto; min-width: 180px; }

.etapa .etapa-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    font-size: 12px;
    color: var(--muted);
}

.etapa-corpo { padding: 0 14px 14px; border-top: 1px solid var(--linha); }
.etapa-concluida > summary .etapa-nome { text-decoration: line-through; opacity: .7; }

/* Interruptor de estado de uma ação */
.interruptor {
    display: inline-block;
    min-width: 38px;
    text-align: center;
    padding: 2px 6px;
    border-radius: var(--raio);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    background: var(--linha);
    color: var(--muted);
    border: 1px solid var(--linha-forte);
}

.interruptor.ligado     { background: #16a34a; color: #fff; border-color: #15803d; }
.interruptor.atrasado   { background: var(--erro-bg); color: var(--erro-text); border-color: var(--erro-border); }
.interruptor.dispensado { background: #e5e7eb; color: #6b7280; text-decoration: line-through; }

/* Tabela de ações dentro de uma etapa */
table.acoes { width: 100%; border-collapse: collapse; font-size: 13px; }

table.acoes th, table.acoes td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--linha);
    vertical-align: top;
    text-align: left;
}

table.acoes thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
}

table.acoes tr.executada td.acao-nome { text-decoration: line-through; opacity: .65; }
table.acoes tr.dispensada td { opacity: .5; }
table.acoes tr.atrasada { background: var(--erro-bg); }
/* A tarefa que está aberta agora: as outras esperam pela sua vez. */
/* Linha do tempo das anotações de uma ação. */
.linha-tempo { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linha); }
.linha-tempo li { padding: 4px 0 6px 10px; margin-left: 2px; }
.linha-tempo li + li { border-top: 1px dashed var(--linha); }

/* Ação começada mas não fechada: nem OFF nem ON. */
.interruptor.em-execucao { background: var(--aviso-bg); border-color: var(--aviso-border);
                           color: var(--aviso-text); font-weight: 700; }
table.acoes tr.acao-corrente { box-shadow: inset 3px 0 0 var(--aviso-border); font-weight: 600; }
/* Botões dentro de uma linha de tabela auxiliar (Editar / Eliminar). Mais
   pequenos que os de um formulário: numa lista de 30 linhas, botões de tamanho
   normal roubavam a atenção aos dados. */
td.acoes-botoes { white-space: nowrap; }
td.acoes-botoes > *, td.acoes-botoes form { display: inline-block; }
td.acoes-botoes form { margin-left: 6px; }
/* Nas tabelas auxiliares os botões da linha empilham-se, em vez de alargarem
   a lista para lá do ecrã. */
.paineis-aux table.lista td.acoes-botoes { white-space: normal; width: 1%; }
.paineis-aux table.lista td.acoes-botoes > * { display: block; margin: 0 0 4px; white-space: nowrap; }
.paineis-aux table.lista td.acoes-botoes > * > button { width: 100%; }
.paineis-aux table.lista td.acoes-botoes > a { text-align: center; }
td.acoes-botoes .botao-sec, td.acoes-botoes button {
    padding: 4px 10px;
    font-size: .85em;
    font-weight: 600;
}

/* ── Assistente ─────────────────────────────────────────────────────────── */
/* Conversa. Altura fixa com scroll próprio: a página não deve crescer sem fim
   nem obrigar a rolar tudo para ver a caixa de escrever. */
.conversa {
    max-height: 55vh;
    overflow-y: auto;
    padding: 4px 2px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bolha {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: var(--raio);
    /* As respostas vêm em texto simples com mudanças de linha reais. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.bolha-eu {
    align-self: flex-end;
    background: var(--primary-claro);
    border: 1px solid var(--primary);
    color: var(--primary-dark);
}

.bolha-ele {
    align-self: flex-start;
    background: var(--zebra);
    border: 1px solid var(--linha);
}

.bolha-espera {
    align-self: flex-start;
    background: var(--aviso-bg);
    border: 1px solid var(--aviso-border);
    color: var(--aviso-text);
    font-style: italic;
}

.bolha-erro {
    align-self: flex-start;
    background: var(--erro-bg);
    border: 1px solid var(--erro-border);
    color: var(--erro-text);
}

/* As ferramentas que correram em cada resposta. Não é decoração: é o que
   permite ver que dados foram lidos para chegar àquela frase. */
.usadas {
    align-self: flex-start;
    font-size: .8em;
    color: var(--muted);
}

.usadas .chip {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    padding: 1px 8px;
    margin: 0 4px 2px 0;
    font-family: ui-monospace, Consolas, monospace;
}

.form-pergunta {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    border-top: 1px solid var(--linha);
    padding-top: 10px;
}

.form-pergunta textarea { flex: 1; resize: vertical; }

.lista-ferramentas { margin: 8px 0 0; padding-left: 20px; line-height: 1.5; }
.lista-ferramentas code { font-weight: 600; }

/* Botão só com o ícone, para listas onde a palavra roubava o espaço ao que
   importa — os nomes dos ficheiros anexados. O `title` é que diz o que faz. */
button.botao-icone, .botao-icone {
    padding: 2px 7px;
    font-size: 1em;
    line-height: 1.1;
}

/* O emoji fica maior que a palavra ao lado: numa lista, é a imagem que se lê
   primeiro. O line-height travado impede que a linha da tabela cresça por causa
   dele. */
.acoes-botoes .icone, td.acoes-botoes .icone {
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -1px;
}

/* Documentos colados ou arrastados para uma anotação, antes de gravar. */
ul.colados { list-style: none; margin: 6px 0 0; padding: 0;
             display: flex; flex-wrap: wrap; gap: 6px; }
ul.colados li { background: var(--zebra); border: 1px solid var(--linha-forte);
                border-radius: 4px; padding: 2px 8px; font-size: .85em; }
ul.colados li button.link { color: var(--erro-text); font-weight: 700; }
textarea.a-receber { outline: 2px dashed var(--primary); outline-offset: -2px; }

/* A linha a que o link de um mail aponta, para não se perder entre 50. */
table.acoes tr.acao-destacada { outline: 2px solid var(--aviso-border); outline-offset: -2px; }

table.acoes tr.fora-modelo td.acao-nome::after {
    content: " \00B7 j\00E1 n\00E3o faz parte do modelo";
    font-size: 11px;
    color: var(--aviso-text);
}

table.acoes td.acoes-botoes { white-space: nowrap; text-align: right; }
table.acoes td.acoes-botoes form { display: inline; }

.badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

.badge-ok    { background: var(--ok-bg);    border-color: var(--ok-border);    color: var(--ok-text); }
.badge-erro  { background: var(--erro-bg);  border-color: var(--erro-border);  color: var(--erro-text); }
.badge-aviso { background: var(--aviso-bg); border-color: var(--aviso-border); color: var(--aviso-text); }

.discreto { color: var(--muted); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   PROGRESSO, BARRAS E GRÁFICOS
   ══════════════════════════════════════════════════════════════════════════ */
/* Desenhados com CSS gerado no servidor: sem bibliotecas e sem CDN. */

.progresso {
    position: relative;
    height: 16px;
    min-width: 90px;
    background: var(--linha);
    border-radius: 8px;
    overflow: hidden;
}

.progresso-valor { height: 100%; background: var(--primary); transition: width .2s; }

.progresso-texto {
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    color: var(--text);
}

.barra {
    flex: 1 1 auto;
    height: 14px;
    background: var(--linha);
    border-radius: 7px;
    overflow: hidden;
    min-width: 40px;
}

.barra-valor { height: 100%; border-radius: 7px; }

.grafico { display: grid; gap: 6px; }
.grafico-linha { display: flex; align-items: center; gap: 10px; }

.grafico-nome {
    flex: 0 0 34%;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grafico-valor {
    flex: 0 0 56px;
    text-align: right;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Barras verticais, para séries temporais */
.grafico-colunas {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    padding-top: 8px;
}

.coluna {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}

.coluna-valor {
    width: 100%;
    background: var(--primary);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.coluna-num { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.coluna-rotulo { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* Barra composta: em atraso / a vencer / restantes na mesma linha */
.barra-composta {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--linha);
    flex: 1 1 auto;
    min-width: 60px;
}

.barra-composta span { display: block; height: 100%; }
.seg-atraso    { background: #dc2626; }
.seg-vencer    { background: #f59e0b; }
.seg-normal    { background: #0f766e; }
.seg-sem-prazo { background: #cbd5e1; }

.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 8px; }
.legenda span { display: flex; align-items: center; gap: 5px; }
.legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ══════════════════════════════════════════════════════════════════════════
   CRONOGRAMA
   ══════════════════════════════════════════════════════════════════════════ */

.gantt { display: grid; gap: 4px; font-size: 12px; }
.gantt-linha { display: grid; grid-template-columns: minmax(160px, 26%) 1fr; gap: 10px; align-items: center; }
.gantt-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-nome.etapa-titulo { font-weight: 700; }
.gantt-nome.acao-titulo { padding-left: 14px; color: var(--muted); }

.gantt-faixa {
    position: relative;
    height: 16px;
    background: var(--zebra);
    border-radius: 4px;
    border: 1px solid var(--linha);
}

.gantt-barra { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 3px; }
.gantt-barra.executada { background: #16a34a; }
.gantt-barra.atrasada  { background: #dc2626; }
.gantt-barra.pendente  { background: #0ea5e9; }
.gantt-barra.etapa     { background: var(--primary); opacity: .85; }

.gantt-hoje { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #dc2626; z-index: 2; }
.gantt-eixo { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   EDITOR DE MODELO
   ══════════════════════════════════════════════════════════════════════════ */

.modelo-etapa {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    margin-bottom: 12px;
    background: var(--card);
}

/* A etapa do modelo é um <details class="etapa"> (recolhível, como na ficha);
   o cabeçalho é o <summary>, com a seta ▸ do `.etapa`. */
.modelo-etapa > summary {
    gap: 10px;
    padding: 10px 12px;
    background: var(--zebra);
    border-radius: var(--raio);
}
.modelo-etapa[open] > summary {
    border-bottom: 1px solid var(--linha);
    border-radius: var(--raio) var(--raio) 0 0;
}

.modelo-etapa > summary h3 { margin: 0; font-size: 14px; flex: 1 1 auto; }
.modelo-etapa .corpo { padding: 10px 12px; }
.modelo-vazia { border-left: 4px solid var(--aviso-border); }

table.modelo { width: 100%; border-collapse: collapse; font-size: 13px; }
table.modelo th, table.modelo td { padding: 5px 6px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
table.modelo thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
table.modelo input[type=number] { width: 84px; }
table.modelo select { min-width: 150px; }
table.modelo td.fim { text-align: right; white-space: nowrap; }

.form-linha { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.form-linha .campo { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ANEXOS
   ══════════════════════════════════════════════════════════════════════════ */

.anexos { margin-top: 8px; }
.lista-anexos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.lista-anexos li { font-size: 13px; padding: 6px 8px; background: var(--zebra); border-radius: var(--raio); }
.form-anexo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-anexo input[type=file] { flex: 1 1 200px; font-size: 12px; }
.form-anexo input[type=text] { flex: 1 1 160px; }
/* A segunda hipótese dos documentos — indicar uma ligação — logo abaixo da do anexo. */
.form-ligacao { margin-top: 6px; }
/* O aviso de um projeto marcado como de teste: igual aos outros, com a margem
   a violeta para não se confundir com um aviso de atraso. */
.aviso.aviso-teste { border-left: 4px solid #8b5cf6; }
.form-ligacao input[name=url] { flex: 2 1 260px; }
.ligacao-rede { font-size: 12px; word-break: break-all; }
.anexos-compacto { border-top: 1px dashed var(--linha); padding-top: 8px; margin-top: 8px; }
.anexos-compacto .form-anexo input[type=file] { max-width: 240px; }

/* ══════════════════════════════════════════════════════════════════════════
   PAINEL
   ══════════════════════════════════════════════════════════════════════════ */

.kpi.kpi-erro  { border-left-color: #dc2626; }
.kpi.kpi-aviso { border-left-color: #f59e0b; }
.kpi.kpi-ok    { border-left-color: #16a34a; }

.painel-seccao { margin-bottom: 8px; }

.painel-seccao h2 {
    font-size: 16px;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--linha-forte);
}

.painel-seccao .nota { color: var(--muted); font-size: 12px; margin: -6px 0 12px; }

.tabela-densa th, .tabela-densa td { padding: 5px 8px; }

/* ── Ajuda ──────────────────────────────────────────────────────────────── */
/* Índice à esquerda, conteúdo à direita. Numa página de 19 tópicos, perder o
   índice ao rolar é perder a orientação — daí o sticky. */
.ajuda-grelha {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: start;
}

.ajuda-indice {
    position: sticky;
    top: 12px;
    background: var(--card);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.ajuda-indice h3 {
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 12px 0 4px;
}

.ajuda-indice .ajuda-grupo:first-of-type h3 { margin-top: 4px; }
.ajuda-indice ul { list-style: none; margin: 0; padding: 0; }
.ajuda-indice li { margin: 1px 0; }

.ajuda-indice a {
    display: block;
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text);
    font-size: .92em;
}

.ajuda-indice a:hover { background: var(--primary-claro); }

.ajuda-pesquisa { display: flex; gap: 6px; align-items: center; }
.ajuda-pesquisa input { flex: 1; }

.ajuda-topico { margin-bottom: 12px; scroll-margin-top: 12px; }
.ajuda-topico h2 { margin: 0; }

.ajuda-topico-cabeca {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--linha);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.ajuda-topico h3 { margin: 16px 0 6px; font-size: 1em; }
.ajuda-topico table.lista { margin: 8px 0; }
.ajuda-topico li { margin: 3px 0; }

/* O tópico a que o F1 trouxe a pessoa. Sem isto, a página parece ter aberto no
   topo e o salto passa despercebido. */
.ajuda-topico.ajuda-alvo {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ajuda-voltar { margin: 12px 0 0; font-size: .85em; }
.ajuda-vazio { color: var(--muted); }

.ajuda-atalho { margin-right: 10px; text-decoration: none; }

@media (max-width: 900px) {
    .ajuda-grelha { grid-template-columns: 1fr; }
    .ajuda-indice { position: static; max-height: none; }
}

/* Ações em paralelo: um filete à esquerda liga visualmente as linhas do mesmo
   bloco. Sem isto, três botões «✔ Executar» a aparecerem juntos leem-se como um
   defeito da aplicação em vez de uma regra do plano. */
tr.em-bloco td:first-child {
    border-left: 3px solid var(--primary);
    padding-left: 9px;
}
tr.em-bloco td:first-child::before {
    content: "‖ ";
    color: var(--primary);
    font-weight: bold;
}

/* ─────────────────────────────────────────
   FLUXOGRAMA DO PROCESSO
   ─────────────────────────────────────────
   O processo desenhado: etapas empilhadas, e dentro de cada uma os blocos de
   trabalho por ordem. Um bloco com mais de uma tarefa desenha-as LADO A LADO,
   porque correm ao mesmo tempo — é esse contraste com as setas verticais que
   faz a página valer a pena. Tudo CSS gerado no servidor: sem bibliotecas,
   sem CDN, e imprime-se pelo browser. */

.fluxo { display: flex; flex-direction: column; align-items: stretch; }

.fluxo-etapa {
    border: 1px solid var(--linha-forte);
    border-left: 6px solid var(--cor-etapa);
    border-radius: var(--raio);
    background: var(--card);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.fluxo-etapa-cab {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--cor-etapa) 12%, var(--card));
    border-bottom: 1px solid var(--linha);
}
.fluxo-etapa-cab h2 { margin: 0; font-size: 1.05rem; }

.fluxo-ordem {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background: var(--cor-etapa);
    color: #fff;
    font-weight: bold;
    font-size: .85rem;
}

/* As caixas alinham À ESQUERDA, com uma margem: é a coluna de onde se lê o
   processo de cima a baixo. A `--largura-caixa` é posta pelo
   `iniciarCaixasIguais` (a largura comum das caixas) e é o que põe as setas ↓
   debaixo do meio das caixas, e não do meio da página. */
.fluxo { --margem-fluxo: 64px; }
.fluxo-corpo { padding: 16px 16px 16px var(--margem-fluxo); }

/* A seta entre blocos: o que só começa depois de o anterior fechar. */
.fluxo-seta {
    text-align: left;
    color: var(--primary);
    font-size: 1.1rem;
    line-height: 1;
    padding: 5px 0 5px calc(var(--largura-caixa, 240px) / 2 - 5px);
    opacity: .7;
    user-select: none;
}
.fluxo-seta.grande {
    font-size: 1.5rem;
    padding: 8px 0 8px calc(6px + var(--margem-fluxo) + var(--largura-caixa, 240px) / 2 - 8px);
    color: var(--linha-forte);
    opacity: 1;
}

.fluxo-bloco { position: relative; }

/* As caixas de um bloco ficam lado a lado; com muitas, quebram para a linha
   seguinte em vez de empurrarem a página para fora do ecrã. */
.fluxo-caixas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
}

/* O bloco em paralelo tem o tamanho das suas caixas, e não a largura toda da
   etapa: a moldura diz «estas correm juntas», não «isto é uma secção». */
.fluxo-bloco.paralelo {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    padding: 20px 14px 16px;
    margin: 4px 0;
    background: var(--zebra);
}
.fluxo-bloco-etiqueta,
.fluxo-bloco-rodape {
    position: absolute;
    left: 14px;
    background: var(--card);
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    padding: 1px 10px;
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap;
}
.fluxo-bloco-etiqueta { top: -9px; font-weight: bold; color: var(--primary); }
.fluxo-bloco-rodape { bottom: -9px; }

.fluxo-caixa {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 170px;
    max-width: 260px;
    padding: 9px 12px;
    border: 2px solid var(--primary);
    border-radius: var(--raio);
    background: var(--card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: box-shadow .15s, transform .15s;
}
.fluxo-caixa-nome { font-weight: 600; line-height: 1.25; }
/* «1.3»: o número da tarefa no plano completo (`db.numerar_plano`). */
.fluxo-caixa-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.fluxo-caixa-grupo { font-size: .8rem; color: var(--muted); }
.fluxo-caixa-dias { font-size: .75rem; color: var(--muted); align-self: flex-end; }
/* 📎 Documento obrigatório na caixa; a vermelho no projeto quando ainda falta. */
.fluxo-caixa-doc { font-size: .75rem; color: var(--muted); }
.fluxo-caixa-doc.falta { color: var(--erro-text); font-weight: 700; }

/* Sem grupo é uma configuração por acabar: num projeto a tarefa nasceria fora
   do âmbito. O tracejado vermelho é para dar por ela aqui, e não lá. */
.fluxo-caixa.sem-grupo { border-style: dashed; border-color: var(--erro-border); }
.fluxo-caixa.inativa { opacity: .55; }

/* «📄 Descarregar PDF»: o `iniciarPdf` põe `a-imprimir` no body ANTES de abrir
   a impressão, já no ecrã, com a largura de uma A4 ao baixo (277mm ≈ 1040px).
   O desenho fica com a mesma largura no ecrã e no papel, e as setas dos saltos
   — medidas em píxeis pelo JS — caem no sítio certo. */
body.a-imprimir main { max-width: 1040px; width: 1040px; margin: 0; padding: 0; }
@media print {
    /* NADA leva `break-inside: avoid`: cada elemento empurrado para a página
       seguinte acrescentava espaço que no ecrã não existe, e as setas dos saltos
       (medidas no ecrã) ficavam desalinhadas daí para baixo. Com a etapa inteira
       «sem partir», a 1.ª página saía mesmo em branco. Uma caixa cortada entre
       duas páginas é o preço de as setas apontarem para o sítio certo. */
    .fluxo-etapa { box-shadow: none; }
    .fluxo { orphans: 1; widows: 1; }
    /* Só o desenho, sem a navegação nem os botões, e com as cores dos estados
       (o browser tira os fundos por omissão). */
    .topo, .db-erro, .migalhas, .flashes, .titulo-pagina .acoes { display: none !important; }
    body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Cor por estado, só no fluxograma do PROJETO — o do modelo não tem estados.
   As cores são as mesmas do resto da aplicação: verde feito, azul a decorrer,
   vermelho em atraso, cinzento dispensado. */
.fluxo-caixa.feita        { border-color: #16a34a; background: var(--ok-bg); }
.fluxo-caixa.em-execucao  { border-color: #0ea5e9; }
.fluxo-caixa.atrasada     { border-color: #dc2626; background: var(--erro-bg); }
.fluxo-caixa.dispensada   { border-color: var(--linha-forte); background: var(--zebra); opacity: .7; }
.fluxo-caixa.dispensada .fluxo-caixa-nome { text-decoration: line-through; }

/* A tarefa aberta agora. Num bloco em paralelo são várias, e é isso que o
   destaque tem de conseguir mostrar sem parecer um erro. */
.fluxo-caixa.corrente {
    outline: 3px solid var(--aviso-border);
    outline-offset: 2px;
    background: var(--aviso-bg);
}

.fluxo-caixa-estado { align-self: flex-start; }

/* Os campos preenchidos de uma tarefa, AO LADO da caixa e em letra pequena —
   é informação de consulta, não pode competir com o desenho. Sem espaço, a
   lista passa para baixo da caixa em vez de empurrar o fluxo para fora. */
.fluxo-caixa-par {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 14px;
}
/* Um traço à esquerda separa o que se registou da caixa da tarefa. */
.fluxo-lado {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 280px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid var(--linha);
    font-size: .7rem;
    line-height: 1.3;
    color: var(--muted);
}
.fluxo-campos { margin: 0; }
/* No modelo: os campos que a tarefa pede, sem valores. */
.fluxo-atribuidos { list-style: none; margin: 0; padding: 0; }
.fluxo-atribuidos li { margin: 0 0 2px; }
/* Para quem irão os avisos de uma tarefa com «Processa comunicação». */
.fluxo-comunicacao ul { list-style: none; margin: 1px 0 0 10px; padding: 0; }
.fluxo-comunicacao span { display: block; }
/* Caixas iguais (fluxograma do modelo): o JS fixa largura e altura; o conteúdo
   de uma caixa mais baixa fica em cima, e a coluna dos campos não quebra para
   baixo da caixa — senão o alinhamento que se quis perdia-se. */
[data-caixas-iguais] .fluxo-caixa { box-sizing: border-box; max-width: none; }
[data-caixas-iguais] .fluxo-caixa-par { flex-wrap: nowrap; align-items: flex-start; }
[data-caixas-iguais] .fluxo-lado { box-sizing: border-box; }
/* A coluna ao lado sem nada (no modelo existe sempre, para alinhar): sem traço. */
.fluxo-lado:not(:has(*)) { border-left-color: transparent; }
/* No projeto só a largura é igual, e não passa do limite normal da caixa. */
[data-caixas-iguais="largura"] .fluxo-caixa { max-width: 260px; }
/* As anotações: cada uma cortada a duas linhas — o texto todo está no `title`,
   ao passar o rato, e na ficha. Uma nota longa não pode alargar o fluxo. */
.fluxo-notas { list-style: none; margin: 0; padding: 0; }
.fluxo-notas li { margin: 0 0 3px; }
.fluxo-nota-texto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.fluxo-nota-quem { font-size: .62rem; opacity: .8; }
/* 👁 As anotações de uma tarefa anterior, por baixo de um campo da ficha. */
.campo-referencia-notas { list-style: none; margin: 2px 0 0 14px; padding: 0;
                          font-size: 12px; color: var(--muted); }
.campo-referencia-notas li { margin: 0 0 3px; }
/* As setas dos saltos (`iniciarSaltos`): um SVG por cima do desenho, e na margem
   direita uma faixa de 14px por salto, reservada pelo padding. */
.fluxo.com-saltos { position: relative; padding-right: calc(20px + var(--faixas-salto, 1) * 14px); }
.fluxo-saltos { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 2; }
.fluxo-salto path { fill: none; stroke: #d97706; stroke-width: 1.6; stroke-dasharray: 5 3; }
.fluxo-salto.escolhido path { stroke: #b45309; stroke-width: 2.4; stroke-dasharray: none; }
.fluxo-salto-ponta { fill: #d97706; }
.fluxo-salto-ponta.escolhido { fill: #b45309; }
.fluxo-salto-marca circle { fill: #d97706; stroke: #fff; stroke-width: 1.5; }
.fluxo-salto.escolhido .fluxo-salto-marca circle { fill: #b45309; }
.fluxo-salto-marca text { fill: #fff; font-size: 10px; font-weight: 700; }
.fluxo-salto-fim { fill: #b45309; font-size: 11px; font-weight: 700; }
/* O salto que FECHA o projeto é a vermelho, nas mesmas formas (tracejado, e
   cheio na resposta dada) — os outros saltos continuam a laranja. */
.fluxo-salto.fecha path { stroke: #dc2626; }
.fluxo-salto.fecha.escolhido path { stroke: #b91c1c; }
.fluxo-salto-ponta.fecha { fill: #dc2626; }
.fluxo-salto.fecha .fluxo-salto-marca circle { fill: #dc2626; }
.fluxo-salto.fecha .fluxo-salto-fim { fill: #b91c1c; }
.fluxo-saltos-legenda li.fecha .fluxo-salto-n { background: #dc2626; }
/* O salto PARA TRÁS (volta e reabre) a azul. */
.fluxo-salto.volta path { stroke: #2563eb; }
.fluxo-salto.volta.escolhido path { stroke: #1d4ed8; }
.fluxo-salto-ponta.volta { fill: #2563eb; }
.fluxo-salto.volta .fluxo-salto-marca circle { fill: #2563eb; }
.fluxo-salto.volta .fluxo-salto-fim { fill: #1d4ed8; }
.fluxo-saltos-legenda li.volta .fluxo-salto-n { background: #2563eb; }
.fluxo-saltos-legenda ol { list-style: none; margin: 6px 0; padding: 0; }
.fluxo-saltos-legenda li { margin: 3px 0; }
.fluxo-saltos-legenda li.escolhido { font-weight: 600; }
.fluxo-salto-n {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
    border-radius: 50%; background: #d97706; color: #fff; text-align: center;
    font-size: .72rem; font-weight: 700; margin-right: 4px;
}
.fluxo-saltos-legenda li.escolhido .fluxo-salto-n { background: #b45309; }
@media print { .fluxo-saltos { z-index: auto; } }
/* O que um salto TOMADO passa por cima fica RECOLHIDO (`<details>`): tarefas
   dentro de uma etapa, ou etapas inteiras seguidas num só bloco. Abre-se no
   «▸ ver»; as setas redesenham-se no `toggle`. */
.fluxo-saltadas {
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    background: var(--zebra);
    margin: 2px 0;
}
.fluxo-saltadas > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: .85rem;
    color: var(--muted);
    user-select: none;
}
.fluxo-saltadas > summary::-webkit-details-marker { display: none; }
.fluxo-saltadas > summary:hover { color: var(--texto, inherit); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.fluxo-saltadas-abrir::after { content: "▸ ver"; margin-left: 8px; font-weight: 600; color: var(--primary); }
.fluxo-saltadas[open] > summary .fluxo-saltadas-abrir::after { content: "▾ esconder"; }
.fluxo-saltadas-corpo { padding: 4px 12px 12px; opacity: .75; }
.fluxo-corpo .fluxo-saltadas { width: fit-content; min-width: var(--largura-caixa, 240px); max-width: 100%; box-sizing: border-box; }
.fluxo-etapas-saltadas > summary { padding: 12px 16px; font-size: .95rem; }
@media print { .fluxo-saltadas:not([open]) .fluxo-saltadas-corpo { display: none; } }
.fluxo-documentos { list-style: none; margin: 0; padding: 0; }
.fluxo-documentos li { margin: 0 0 3px; overflow-wrap: anywhere; }
.fluxo-documentos a, .fluxo-documentos button.link { font-size: inherit; }
.fluxo-documento-descricao { font-style: italic; }
.fluxo-campos div { display: flex; gap: 4px; }
.fluxo-campos dt { font-weight: 600; white-space: nowrap; }
.fluxo-campos dt::after { content: ":"; }
.fluxo-campos dd { margin: 0; overflow-wrap: anywhere; }

/* Alternar entre o trabalho atribuído e o plano completo, na ficha do projeto.
   `escondida-ambito` esconde as linhas fora do âmbito e as etapas que fiquem
   sem nenhuma linha visível. O `!important` é preciso porque as linhas de
   detalhe já têm o atributo `hidden` gerido por outro botão: sem ele, abrir um
   detalhe e depois filtrar deixava a linha do detalhe a flutuar sozinha. */
.escondida-ambito { display: none !important; }

/* Filtro por grupo no editor do modelo: esconde as tarefas de outro grupo e as
   etapas que fiquem sem nenhuma. Classe à parte da do âmbito, porque são dois
   filtros de ecrãs diferentes e um não deve desfazer o outro. */
.escondida-filtro { display: none !important; }

/* Par de botões colados que representa dois modos de ver a mesma coisa.
   Serve `<button>` e `<a>`: na ficha os modos são alternados em JavaScript, mas
   numa lista PAGINADA o filtro tem de ser do servidor e os modos são ligações. */
.grupo-botoes { display: inline-flex; gap: 0; }
.grupo-botoes > button,
.grupo-botoes > a { border-radius: 0; }
.grupo-botoes > :first-child { border-radius: var(--raio) 0 0 var(--raio); }
.grupo-botoes > :last-child  { border-radius: 0 var(--raio) var(--raio) 0; }
.grupo-botoes > .ativo {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* A caixa do fluxograma do PROJETO é uma ligação para a tarefa na ficha. Não
   deve parecer um link — sublinhado e azul num diagrama é ruído — mas tem de
   dar indicação ao rato e ao teclado de que se pode clicar. */
a.fluxo-caixa.clicavel {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .12s, transform .12s;
}
a.fluxo-caixa.clicavel:hover {
    box-shadow: var(--sombra);
    transform: translateY(-1px);
}
a.fluxo-caixa.clicavel:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────
   CAMPOS DAS TAREFAS
   ─────────────────────────────────────────
   O painel dos campos no detalhe da tarefa (ficha), a lista dos campos de uma
   tarefa no editor do modelo, e a marca na linha. */

.campos-tarefa {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--primary);
    background: var(--zebra);
    border-radius: 4px;
}
.campos-tarefa h4 {
    font-size: .9rem;
}
.campos-leitura th {
    text-align: left;
    font-weight: 600;
    padding-right: 12px;
}

/* Os campos a preencher: nome e valor na MESMA linha, em duas colunas, para os
   controlos ficarem alinhados e o painel ocupar metade da altura. A coluna do
   nome cresce até ao nome mais comprido; a do valor fica com o resto. */
.campos-grelha {
    display: grid;
    grid-template-columns: max-content minmax(180px, 520px);
    gap: 6px 12px;
    align-items: center;
    margin-bottom: 6px;
}
.campos-grelha-nome {
    font-weight: 600;
    font-size: .85rem;
}
.campos-grelha-valor input,
.campos-grelha-valor select {
    width: 100%;
    box-sizing: border-box;
}
/* Num ecrã estreito não há largura para as duas colunas: o nome volta a ficar
   por cima do valor, em vez de o espremer. */
@media (max-width: 640px) {
    .campos-grelha { grid-template-columns: 1fr; gap: 2px; }
    .campos-grelha-valor { margin-bottom: 6px; }
}

/* O «por preencher» tem de saltar à vista: é o que impede a tarefa de fechar. */
.campos-tarefa .aviso-linha {
    color: var(--erro-text);
    font-size: .85rem;
    font-weight: 600;
}

.campos-modelo {
    margin-top: 6px;
    padding: 6px 8px;
    border-left: 3px solid var(--primary);
    background: var(--zebra);
    border-radius: 4px;
    font-size: .85rem;
}
/* Os campos de uma tarefa no editor do modelo: uma tabela compacta, para as
   colunas (nome, obrigatório, comunicação, ordem, retirar) ficarem alinhadas. */
.campos-modelo-tabela {
    width: auto;
    border-collapse: collapse;
    margin: 0 0 4px;
}
.campos-modelo-tabela th,
.campos-modelo-tabela td {
    padding: 2px 10px 2px 0;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    border: 0;
    background: none;
}
.campos-modelo-tabela th {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: none;
}
.campos-modelo-tabela td:first-child { white-space: normal; min-width: 180px; }
.campos-modelo-tabela td.num { text-align: center; }

/* Marca na linha da tarefa. A cor distingue os dois casos sem obrigar a abrir o
   detalhe: um obrigatório vazio trava o fecho, o resto é só informação. */
.marca-campos {
    font-size: .8rem;
    cursor: help;
}
.marca-campos.falta {
    color: var(--erro-text);
    font-weight: 700;
}
.marca-campos.feito {
    color: var(--ok-text);
}

/* O painel ⚙ das regras por opção, por baixo da linha do campo no modelo. */
.regras-linha > td { background: var(--zebra); }
.regras-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.regras-tabela th, .regras-tabela td { padding: 4px 6px; text-align: left; }
.regras-tabela select { max-width: 280px; }
/* A consequência de uma regra por opção, por baixo do campo na ficha. */
.regra-consequencia, .campo-referencia { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Os botões ⤵/⇕ do modelo que copiam o grupo escolhido para as tarefas sem
   grupo: com texto e compactos, para se verem sem ocuparem a linha toda. */
.botao-grupo { font-size: 12px; padding: 2px 8px; margin: 2px 4px 2px 0; }
/* Um campo das tarefas com multisseleção: as caixas lado a lado, a quebrar linha. */
.campo-multi { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.campo-multi label { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; }
.materiais-escolhidos { list-style: none; margin: 0 0 6px; padding: 0; }
.materiais-escolhidos li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.materiais-escolhidos li button { padding: 0 8px; line-height: 1.4; }
.materiais-multi input[type=search] { width: 100%; max-width: 520px; box-sizing: border-box; }
.materiais-resultados { list-style: none; margin: 2px 0 4px; padding: 0; max-width: 520px;
    max-height: 260px; overflow-y: auto; border: 1px solid var(--linha-forte); border-radius: 4px;
    background: var(--card); }
.materiais-resultados li { padding: 3px 8px; cursor: pointer; font-size: 13px; }
.materiais-resultados li[data-i]:hover, .materiais-resultados li.realce { background: var(--primary-claro); }
.materiais-resultados li.ja { color: var(--muted); cursor: default; }
.materiais-resultados li.fim { cursor: default; color: var(--muted); font-size: 12px; border-top: 1px solid var(--linha); }
/* Um grupo responsável com tokens que ainda não resolve: a razão, por baixo do grupo. */
.aviso-token { font-size: 11px; color: var(--aviso-text, #92400e); margin-top: 2px; white-space: normal; }
/* Campos que o modelo já não atribui à tarefa: escondidos até ao botão
   «👁 Campos fora do modelo» do topo da ficha (`iniciarCamposForaModelo`). */
.campo-fora-modelo { display: none !important; }
body.mostrar-campos-fora .campo-fora-modelo { display: revert !important; }
body.mostrar-campos-fora tr.campo-fora-modelo { display: table-row !important; }
.etiqueta-fora-modelo { font-size: 11px; font-weight: normal; color: var(--aviso-text);
    background: var(--aviso-bg); border: 1px solid var(--aviso-border); border-radius: 3px;
    padding: 0 4px; margin-left: 4px; }
/* «Texto em Caixa» (campo das tarefas): a caixa de várias linhas, como a das
   anotações, e as mudanças de linha respeitadas quando só se lê. */
textarea.campo-caixa { width: 100%; box-sizing: border-box; resize: vertical; }
.texto-caixa { white-space: pre-wrap; }
/* ▶ Simulador do processo: o desenho à esquerda, o painel e o registo à direita.
   As caixas são botões (só as do bloco corrente estão ativas) e usam as mesmas
   cores por estado do fluxograma do projeto (.feita, .dispensada, .corrente). */
.sim-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .sim-corpo { grid-template-columns: 1fr; } }
.sim-lado { position: sticky; top: 12px; }
.simulador button.fluxo-caixa { font: inherit; color: inherit; text-align: left; cursor: default; }
.simulador button.fluxo-caixa.corrente { cursor: pointer; }
.simulador button.fluxo-caixa:disabled { opacity: 1; }
.simulador button.fluxo-caixa.dispensada:disabled { opacity: .7; }
.sim-registo { margin: 0; padding-left: 18px; font-size: 13px; max-height: 50vh; overflow-y: auto; }
.sim-lado fieldset { border: 1px solid var(--linha); border-radius: var(--raio); margin: 0 0 8px; }
.sim-lado fieldset label { display: block; }
/* 2.49.0: os campos no painel (a grelha da ficha numa coluna estreita), a
   pré-visualização do passo, os valores por baixo da caixa e os avisos ✉. */
.sim-lado .campos-grelha { grid-template-columns: 1fr; gap: 2px 0; margin-bottom: 8px; }
.sim-lado .campos-grelha-nome { font-weight: 600; margin-top: 6px; }
.sim-lado .campo-multi { display: block; }
.sim-lado .campo-multi label { display: flex; align-items: baseline; gap: 6px; margin: 2px 0; }
.sim-lado .campo-multi label input { flex: none; width: auto; }
/* O registo: um passo por linha, e as consequências dele (abriu, salto, avisos)
   recuadas por baixo — numerar contava as linhas «✉» como passos. */
.sim-registo { list-style: none; padding-left: 0; }
.sim-registo li { margin: 3px 0; }
.sim-registo li.sim-sub { padding-left: 14px; }
.sim-lado input[type=text], .sim-lado input[type=search] { width: 100%; box-sizing: border-box; }
.sim-previsao { margin-top: 8px; padding: 6px 8px; border-radius: var(--raio);
    background: var(--aviso-bg); border: 1px solid var(--aviso-border); color: var(--aviso-text); font-size: 13px; }
.sim-previsao.info { background: var(--zebra); border-color: var(--linha); color: var(--muted); }
.fluxo-caixa .sim-valores { display: block; font-size: 11px; color: var(--muted); white-space: pre-wrap; margin-top: 2px; }
.sim-registo li.sim-mail { color: var(--muted); font-size: 12px; }
/* O quadro «✉ Mails deste passo», por cima do registo. */
.sim-mails { margin: 10px 0; padding: 8px 10px; border-radius: var(--raio);
    background: var(--primary-claro); border: 1px solid var(--linha-forte); font-size: 13px; }
.sim-mails ul { margin: 4px 0 0; padding-left: 18px; }
.sim-mails li { margin: 3px 0; }

/* «Acrescentar campo» do modelo: lista própria, com a pesquisa na 1.ª linha
   (`ligarCombo`, no gesprodart.js). */
.combo { position: relative; display: inline-block; min-width: 16em; max-width: 100%; }
.combo-botao {
    width: 100%; text-align: left; background: var(--card); color: inherit;
    border: 1px solid var(--linha-forte); border-radius: 6px; padding: 6px 28px 6px 10px;
    font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative;
}
.combo .combo-botao:hover, .combo .combo-botao:focus {
    background: var(--card); color: inherit; border-color: var(--primary);
}
.combo-botao::after { content: "▾"; position: absolute; right: 10px; color: var(--muted); }
.combo-painel {
    position: absolute; z-index: 30; left: 0; top: calc(100% + 2px);
    min-width: 100%; width: max-content; max-width: 32em;
    background: var(--card); border: 1px solid var(--linha-forte); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15); padding: 6px;
}
.combo-pesquisa { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.combo-lista { list-style: none; margin: 0; padding: 0; max-height: 18em; overflow-y: auto; }
.combo-lista li { padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.combo-lista li.realcado { background: var(--zebra); outline: 1px solid var(--linha-forte); }
.combo-lista li.escolhido { font-weight: 600; }
.combo-lista li.combo-nada { cursor: default; color: var(--muted); font-style: italic; }