/* CentraliT - folha de estilos
   Extraido do index.html. */

/* ── Reset e base ─────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #FAFAFA;
    color: #333;
}

/* ── App layout ───────────────────────────────────────── */
#app-page { min-height: 100vh; }
.container { width: 100%; }

/* ── Navbar ───────────────────────────────────────────── */
.navbar {
    background: #014894;
    color: white;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Compensar a altura do navbar fixo — o conteúdo começa por baixo */
#app-page { padding-top: 70px; }
.navbar h1 { font-size: 22px; font-weight: 600; }
.navbar .user-info { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.navbar .role-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 15px;
}
.navbar button {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}
.navbar button:hover { background: rgba(255,255,255,0.25); }

/* ── Login ────────────────────────────────────────────── */
.login-container {
    max-width: 380px;
    margin: 100px auto;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.login-container h2 { text-align: center; margin-bottom: 24px; color: #014894; }
.login-container input {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 17px;
}
.login-container button {
    width: 100%;
    padding: 12px;
    background: #014894;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 19px;
    cursor: pointer;
}
.login-container button:hover { background: #026AD3; }
.login-error { color: #d32f2f; text-align: center; margin-top: 10px; font-size: 16px; }

/* ── Layout principal ─────────────────────────────────── */
.container { max-width: 2400px; margin: 0 auto; padding: 20px; }

/* ── Tabs (fixed logo abaixo do navbar) ─────────────────── */
/* Barra dos separadores: ocupa a largura toda e é opaca. Era um cartão com
   margens de 20px, e o conteúdo passava por trás dela pelos lados quando se
   fazia scroll — via-se o texto a atravessar a navegação. */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: #fff;
    padding: 6px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    position: fixed;
    /* Colada ao topo do ecrã, com os botões empurrados para baixo pelo
       padding. O navbar está à frente (1000 contra 900) e tapa a parte de
       cima. Assim não há como sobrar uma faixa transparente entre os dois —
       era o que acontecia com `top: 70px`, quando o navbar media menos do que
       isso. A margem inferior fica no mesmo sítio de antes: 6 + 70 no topo. */
    top: 0;
    padding-top: 76px;
    left: 0;
    right: 0;
    z-index: 900;
}
/* Espaço para a tabs bar fixa */
.container { padding-top: 84px; }

/* ── Filtros (fixed logo abaixo das tabs) ─────────────── */
/* Mesma razão da barra dos separadores: largura toda e opaca, para o conteúdo
   não passar por trás pelos lados. */
.filters-bar {
    background: #fff;
    padding: 14px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    margin-bottom: 12px;
    position: fixed;
    top: 132px;                         /* 70 do navbar + ~62 da barra de tabs */
    left: 0;
    right: 0;
    z-index: 800;
}
/* Compensar filtros fixos: em todas as secções que os têm */
#section-sugestoes,
#section-iniciativas,
#section-topicos,
#section-reunioes { padding-top: 82px; }
/* Atividades tem 3 barras fixas (tabs + filtros + colunas) — mais padding */
#section-tabela { padding-top: 190px; }
/* Tabela fixa na viewport para o thead ficar mesmo congelado */
#section-tabela .table-container {
    position: fixed;
    top: 315px;                        /* mais espaço abaixo da 3ª barra */
    left: 20px;
    right: 20px;
    bottom: 100px;                     /* deixa espaço para o rodapé */
    max-width: 2360px;
    margin: 0 auto;
    max-height: none;                  /* override do genérico */
}
/* Barra de scroll horizontal do topo — fixed acima da tabela para acompanhar o scroll */
#section-tabela .table-scroll-top {
    position: fixed;
    top: 300px;                        /* logo acima da table-container (que está a 315px) */
    left: 20px;
    right: 20px;
    max-width: 2360px;
    margin: 0 auto;
    z-index: 650;
}
.table-scroll-top {
    background: white;
    padding: 4px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 500;
    color: #014894;
}
.tab.active { background: #014894; color: white; }
.tab:hover:not(.active) { background: #e6f0fa; color: #014894; }

/* Tab com dropdown menu */
.tab-with-dropdown { position: relative; display: inline-block; }
.tab-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    padding: 4px;
    z-index: 200;
    min-width: 220px;
}
.tab-dropdown.open { display: block; }
.tab-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 9px 14px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 17px;
    color: #014894;
}
.tab-dropdown button:hover { background: #e6f0fa; }
.tab-dropdown button.active { background: #014894; color: white; }

/* ── Cards KPI ────────────────────────────────────────── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.kpi-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-align: center;
}
.kpi-card .number { font-size: 36px; font-weight: 700; color: #014894; }
.kpi-card .label { font-size: 19px; color: #0AA0FF; margin-top: 4px; }

/* ── Gráficos ─────────────────────────────────────────── */
.charts-grid-half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.charts-grid-full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.chart-card {
    background: white;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.charts-grid-full .chart-card { min-height: 400px; }
.charts-grid-full .chart-card canvas { min-height: 350px; }
.chart-card h3 { font-size: 20px; margin-bottom: 16px; color: #014894; }

/* ── Início: grelha de departamentos ──────────────────── */
.home-hero {
    background: #fff; padding: 26px 30px; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 20px;
}
.home-hero h2 { color: #014894; font-size: 26px; margin-bottom: 6px; }
.home-hero p { color: #666; font-size: 17px; }
.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dept-card {
    background: #fff; border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border-top: 4px solid #014894;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    display: flex; flex-direction: column; gap: 10px;
}
.dept-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(1,72,148,0.16); }
.dept-card .dept-ic {
    width: 56px; height: 56px; border-radius: 12px;
    background: #eaf3ff; color: #014894;
    display: flex; align-items: center; justify-content: center;
}
.dept-card .dept-nome { font-size: 21px; font-weight: 600; color: #014894; line-height: 1.3; }
.dept-card .dept-num { font-size: 16px; color: #026AD3; font-weight: 500; }
.dept-card .dept-dono { font-size: 15px; color: #777; line-height: 1.45; margin-top: auto; }
.dept-vazio { color: #888; font-size: 17px; padding: 24px; text-align: center; }

/* ── Página de um departamento ────────────────────────── */
.dep-top {
    display: flex; align-items: center; gap: 14px;
    background: #fff; padding: 16px 20px; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 14px;
}
.dep-ic {
    width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
    background: #eaf3ff; color: #014894;
    display: flex; align-items: center; justify-content: center;
}
.dep-titulo { font-size: 30px; font-weight: 600; color: #014894; }
.dep-search {
    width: 100%; padding: 12px 16px; font-size: 17px; font-family: inherit;
    border: 1px solid #cbd6e2; border-radius: 8px; margin-bottom: 16px;
    background: #fff; color: #333;
}
.dep-search:focus { outline: none; border-color: #026AD3; }

.dep-grupo-tit {
    font-size: 16px; font-weight: 600; color: #014894;
    text-transform: uppercase; letter-spacing: 0.6px;
    margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #e6e6e6;
}
.dep-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.dep-item {
    background: #fff; border: 1px solid #eee; border-left: 3px solid #026AD3;
    border-radius: 0 8px 8px 0; padding: 11px 14px; cursor: pointer;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.dep-item:hover { background: #f5f9ff; border-color: #026AD3; }
.dep-item .cod { font-size: 15px; font-weight: 600; color: #026AD3; min-width: 74px; }
.dep-item .nom { font-size: 17px; color: #333; flex: 1; }
.dep-item .met { font-size: 15px; color: #888; }

.dep-ficha { background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.dep-ficha h3 { color: #014894; font-size: 22px; margin-bottom: 4px; }
.dep-ficha .fsub { font-size: 15px; color: #888; margin-bottom: 18px; }
.dep-ficha dl { display: grid; grid-template-columns: 190px 1fr; gap: 9px 18px; font-size: 16px; }
.dep-ficha dt { color: #777; }
.dep-ficha dd { color: #333; }
.dep-nada { color: #888; font-size: 17px; padding: 20px; text-align: center; }

/* ── Ficha da atividade: rótulos por extenso e explicações ────────────
   A ficha explica, a tabela compara. Daí os nomes longos aqui e curtos lá. */
/* Cada campo é um cartão, como as linhas das listas de atividades. Antes eram
   duas colunas de uma grelha, e como o rótulo leva explicação por baixo e o
   valor não, os riscos das duas ficavam desencontrados. */
.dep-ficha dl.f-dl { display: block; }
.f-campo {
    display: flex; gap: 24px; align-items: flex-start;
    background: #fff; border: 1px solid #eee; border-left: 3px solid #026AD3;
    border-radius: 0 8px 8px 0; padding: 13px 16px; margin-bottom: 6px;
}
.f-campo:hover { background: #f5f9ff; border-color: #cfe3f8; border-left-color: #014894; }
.f-rot { width: 300px; flex-shrink: 0; color: #333; font-weight: 600; }
.f-val { flex: 1; min-width: 0; color: #333; }

.f-expl { display: block; font-size: 14px; color: #9aa4b0; line-height: 1.5;
          margin-top: 4px; font-weight: 400; }
.f-vazio { color: #c3c9d0; font-style: italic; }
.f-sigla { display: inline-block; background: #eef2f7; color: #666; font-size: 13px;
           font-weight: 700; padding: 1px 7px; border-radius: 4px;
           margin-left: 6px; vertical-align: middle; }

/* Título de grupo: barra a toda a largura, com a cor da secção à esquerda.
   Clicar abre e fecha o grupo — com 20 campos, poder recolher o que não
   interessa poupa muito scroll. */
.f-grupo {
    font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 18px 22px; border-radius: 0 10px 10px 0;
    margin: 30px 0 6px; border-left: 6px solid;
    cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
}
.f-grupo:first-of-type { margin-top: 8px; }
.f-grupo::after { content: '▾'; font-size: 18px; opacity: .75; }
.f-grupo.fechado::after { content: '▸'; }
/* Tem de ser tão específico como o `.dep-ficha dl.f-dl { display: block }`
   acima, senão o bloco continua visível e a seta muda sozinha. */
.dep-ficha dl.f-dl.fechado { display: none; }

.f-ident { background: #fdf0e3; color: #a35a12; border-left-color: #e08b30; }
.f-carac { background: #e8f2ff; color: #014894; border-left-color: #026AD3; }
.f-sist  { background: #e6f7ec; color: #1a6b3c; border-left-color: #2e9e5b; }

/* Os cartões herdam a cor do cabeçalho do seu grupo */
.f-dl-ident .f-campo { border-left-color: #e08b30; }
.f-dl-ident .f-campo:hover { background: #fdf7f0; border-color: #f2d9be; border-left-color: #a35a12; }
.f-dl-carac .f-campo { border-left-color: #026AD3; }
.f-dl-carac .f-campo:hover { background: #f5f9ff; border-color: #cfe3f8; border-left-color: #014894; }
.f-dl-sist .f-campo { border-left-color: #2e9e5b; }
.f-dl-sist .f-campo:hover { background: #f2fbf5; border-color: #cbe9d6; border-left-color: #1a6b3c; }

/* Caixas grandes do departamento (mesma linguagem da entrada) */
/* Flex e não grid, para as caixas poderem alargar ao passar o rato — a mesma
   ideia dos pilares da Hierarquia Documental. */
.dep-caixas {
    display: flex;
    gap: 22px; margin: 10px auto 24px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.dep-caixa {
    flex: 1;
    min-width: 290px;
    max-width: 360px;
    position: relative;
    background: #fff; border-radius: 12px; padding: 28px 26px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border-top: 4px solid #014894; cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s, flex-grow 0.25s, max-width 0.25s;
    display: flex; flex-direction: column; gap: 12px;
}
/* Mantém-se alargada enquanto o menu estiver aberto, mesmo que o rato saia */
.dep-caixa:hover,
.dep-caixa:has(.cx-drop.aberto) {
    z-index: 10;
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(1,72,148,0.20);
    flex-grow: 2.4;
    max-width: 560px;
}

/* Cores dos níveis da Hierarquia Documental, para as duas páginas falarem a
   mesma linguagem: azul nas Atividades, laranja no 2º Nível, verde no 3º. */
.dep-caixa.cx-azul   { border-top-color: #026AD3; }
.dep-caixa.cx-azul   .cx-nome, .dep-caixa.cx-azul   .cx-num { color: #014894; }
.dep-caixa.cx-azul   .cx-ic { background: #eaf3ff; color: #014894; }

.dep-caixa.cx-laranja { border-top-color: #e08b30; }
.dep-caixa.cx-laranja .cx-nome, .dep-caixa.cx-laranja .cx-num { color: #a35a12; }
.dep-caixa.cx-laranja .cx-ic { background: #fdf0e3; color: #a35a12; }
.dep-caixa.cx-laranja .cx-sig { color: #c47a1a; }
.dep-caixa.cx-laranja .cx-drop {
    --dd-cor: #e08b30; --dd-escura: #a35a12;
    --dd-fundo: #fdf0e3; --dd-suave: #fdf7f0; --dd-contorno: #f2d9be;
}

.dep-caixa.cx-verde  { border-top-color: #2e9e5b; }
.dep-caixa.cx-verde  .cx-nome, .dep-caixa.cx-verde  .cx-num { color: #1a6b3c; }
.dep-caixa.cx-verde  .cx-ic { background: #e6f7ec; color: #1a6b3c; }
.dep-caixa.cx-verde  .cx-drop {
    --dd-cor: #2e9e5b; --dd-escura: #1a6b3c;
    --dd-fundo: #e6f7ec; --dd-suave: #f2fbf5; --dd-contorno: #cbe9d6;
}

/* O menu fica logo abaixo da contagem, e não no fundo do cartão. Só aparece ao
   passar o rato — com `opacity` e não `display`, para o cartão não saltar de
   altura quando aparece e desaparece. */
.dep-caixa .cx-drop {
    margin-top: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.dep-caixa:hover .cx-drop,
.dep-caixa .cx-drop.aberto {
    opacity: 1;
    pointer-events: auto;
}

/* ── Menu de acesso direto das caixas do departamento ─────────────────
   Substituiu o <select> nativo, cuja lista é desenhada pelo sistema e não se
   consegue formatar nem pesquisar. As linhas repetem a lista de Procedimentos:
   código a azul e a negrito à esquerda, nome à direita, barra azul na margem.
   Usado nas caixas do departamento e nos pilares das Referências. */
/* As cores vêm de variáveis para o painel poder acompanhar a caixa onde está.
   Azul por defeito; cada pilar das Referências redefine-as mais abaixo. */
.cx-drop {
    position: relative; margin-top: auto; padding-top: 6px;
    --dd-cor: #026AD3;
    --dd-escura: #014894;
    --dd-fundo: #e3f0ff;
    --dd-suave: #f5f9ff;
    --dd-contorno: #cfe3f8;
}
.cx-drop-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 15px; font-size: 15px; font-family: inherit;
    color: var(--dd-escura); text-align: left; font-weight: 500;
    border: 1.5px solid var(--dd-cor); border-radius: 8px;
    background: var(--dd-fundo); cursor: pointer;
}
.cx-drop-btn:hover:not(:disabled) { background: var(--dd-cor); color: #fff; }
.cx-drop-btn:disabled { border-color: #ddd; background: #f5f5f5; color: #aaa; cursor: default; }
.cx-drop-btn .seta { font-size: 13px; transition: transform .15s; }
.cx-drop.aberto .cx-drop-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cx-drop.aberto .cx-drop-btn .seta { transform: rotate(180deg); }

.cx-drop-painel {
    display: none; position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    background: #fff; border: 1.5px solid var(--dd-cor); border-top: none;
    border-radius: 0 0 8px 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.14);
    max-height: 340px; overflow: auto; padding: 10px;
}
.cx-drop.aberto .cx-drop-painel { display: block; }
.cx-drop-busca {
    width: 100%; padding: 10px 13px; font-size: 15px; font-family: inherit;
    border: 1px solid #e2e8f0; border-radius: 7px; margin-bottom: 10px; background: #fcfcfc;
}
/* Fora dos pilares não há --dd-cor: o azul é o valor de reserva */
.cx-drop-busca:focus { outline: none; border-color: var(--dd-cor, #026AD3); }
.cx-drop-lista { display: flex; flex-direction: column; gap: 6px; }
.cx-drop-item {
    background: #fff; border: 1px solid #eee; border-left: 3px solid var(--dd-cor);
    border-radius: 0 8px 8px 0; padding: 11px 14px; cursor: pointer;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.cx-drop-item:hover {
    background: var(--dd-suave); border-color: var(--dd-contorno);
    border-left-color: var(--dd-escura);
}
.cx-drop-item .cod { font-size: 15px; font-weight: 700; color: var(--dd-cor); min-width: 76px; }
.cx-drop-item .nom { font-size: 15px; color: #333; flex: 1; }
.cx-drop-vazio { font-size: 15px; color: #999; text-align: center; padding: 16px; }
/* Nos pilares das Referências as linhas são só para consulta */
.cx-drop-item.nao-clicavel { cursor: default; }
.cx-drop-item.nao-clicavel:hover { background: #fff; border-color: #eee; border-left-color: var(--dd-cor); }
/* Lista de documentos de uma atividade: botões Ver e Descarregar à direita, e o
   nome cortado com "…" para os botões nunca saltarem de linha */
.cx-drop-item.docs-item {
    align-items: center; flex-wrap: nowrap; padding: 11px 10px 11px 14px;
    /* Fora dos pilares não há --dd-cor definida, e a regra de cima fica inválida
       — a barra da esquerda desaparecia. Repetida aqui com azul de reserva. */
    border-left: 3px solid var(--dd-cor, #026AD3);
}
.cx-drop-item.docs-item .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-drop-item.docs-item .btn-mini { flex-shrink: 0; }

/* Cada pilar veste o seu painel com a cor do próprio cabeçalho. O 2º Nível usa
   o mesmo laranja da secção Identidade das fichas, para a plataforma ter uma
   paleta só em vez de dois amarelos parecidos. */
.pillar.pillar-2 .cx-drop {
    --dd-cor: #e08b30; --dd-escura: #a35a12;
    --dd-fundo: #fdf0e3; --dd-suave: #fdf7f0; --dd-contorno: #f2d9be;
}
.pillar.pillar-3 .cx-drop {
    --dd-cor: #2e9e5b; --dd-escura: #1a6b3c;
    --dd-fundo: #e6f7ec; --dd-suave: #f2fbf5; --dd-contorno: #cbe9d6;
}
.dep-caixa .cx-ic {
    width: 48px; height: 48px; border-radius: 10px;
    background: #eaf3ff; color: #014894;
    display: flex; align-items: center; justify-content: center;
}
.dep-caixa .cx-nome { font-size: 24px; font-weight: 600; color: #014894; }
.dep-caixa .cx-num { font-size: 17px; color: #026AD3; font-weight: 500; }
.dep-caixa .cx-desc { font-size: 16px; color: #777; line-height: 1.75; }
.dep-caixa .cx-sig {
    display: inline-block; min-width: 42px;
    color: #026AD3; font-weight: 600; font-size: 15px;
}

/* Zona de carregamento do documento de um código */
.doc-drop {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border: 1.5px dashed #cbd6e2; border-radius: 10px; padding: 20px 16px;
    background: #fafcff; cursor: pointer; text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.doc-drop:hover, .doc-drop.sobre { border-color: #026AD3; background: #f0f7ff; }
.doc-drop .dd-tit { font-size: 16px; color: #014894; font-weight: 600; }
.doc-drop .dd-sub { font-size: 15px; color: #999; }
.doc-sel {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
    background: #f4f8fd; border: 1px solid #dbe6f2; border-radius: 8px; padding: 9px 12px;
}
.doc-sel .ds-nome { flex: 1; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-btn {
    background: #014894; color: #fff; border: none;
    padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 16px;
}
.doc-btn:hover { background: #026AD3; }
.doc-btn.limpar { background: #eee; color: #666; }
.doc-btn.limpar:hover { background: #ddd; }
.doc-semver { font-size: 15px; color: #999; font-style: italic; }

/* Códigos clicáveis dentro de uma ficha */
.dep-cod-link {
    display: inline-block; margin: 0 4px 4px 0; padding: 2px 9px;
    background: #eaf3ff; color: #014894; border: 1px solid #cfe0f5;
    border-radius: 11px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.dep-cod-link:hover { background: #d7e8fa; border-color: #026AD3; }
.dep-cod-off {
    display: inline-block; margin: 0 4px 4px 0; padding: 2px 9px;
    background: #f4f4f4; color: #888; border-radius: 11px; font-size: 15px;
}

/* ── Tabela ───────────────────────────────────────────── */
.table-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: auto;
    max-height: calc(100vh - 320px);  /* barras fixas (navbar+tabs+filtros+colunas) + margem inferior */
    margin-bottom: 24px;
}
.filters-bar {
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
}
/* Dropdown de filtros (com checkboxes) */
.filter-dropdown { position: relative; display: inline-block; }
.filter-dropdown-btn {
    padding: 8px 14px;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    min-width: 140px;
    text-align: left;
    white-space: nowrap;
}
.filter-dropdown-btn:hover { background: #f7f9fc; border-color: #014894; }
.filter-dropdown-btn .filter-count {
    color: #014894;
    font-weight: 600;
}
.filter-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 38px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 8px 12px;
    z-index: 200;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
}
.filter-dropdown-content.open { display: block; }
.filter-dropdown-content label {
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 4px;
    border-radius: 4px;
    white-space: nowrap;
}
.filter-dropdown-content label:hover { background: #e6f0fa; }
.filters-bar .btn-filtrar,
.filters-bar .btn-limpar-filtros {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    margin-left: 8px;
}
.filters-bar .btn-filtrar { background: #014894; color: #fff; }
.filters-bar .btn-filtrar:hover { background: #026AD3; }
.filters-bar .btn-limpar-filtros { background: #eee; color: #555; }
.filters-bar .btn-limpar-filtros:hover { background: #ddd; }

/* O .btn-filtrar é usado também como botão principal das janelas (Guardar,
   Associar, Aplicar). Fora da barra de filtros não tinha estilo nenhum e saía
   branco. Verde porque é a ação que confirma. */
.btn-filtrar {
    padding: 9px 18px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: #2e7d32;
    color: #fff;
}
.btn-filtrar:hover { background: #1b5e20; }

/* Cancelar — vermelho mais leve que o Apagar, para os dois não parecerem
   igualmente destrutivos. Usa-se junto ao .btn-mini, que dá a forma. */
.btn-cancelar {
    background: #fdecec;
    border-color: #d32f2f;
    color: #c62828;
}
.btn-cancelar:hover { background: #d32f2f; border-color: #b71c1c; color: #fff; }
.filter-action-buttons { display: inline-flex; gap: 6px; align-items: center; }
table { width: 100%; border-collapse: collapse; font-size: 16px; table-layout: fixed; }
td { overflow: hidden; text-overflow: ellipsis; }
thead { background: #f5f5f5; }
th { padding: 12px 10px; text-align: center; font-weight: 600; color: #555; white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid #f0f0f0; text-align: center; }
tr:hover { background: #fafafa; }
td.editable {
    background: #fffde7;
    cursor: pointer;
}
td.editable:hover { background: #fff9c4; }

/* ── Cabeçalho fixo no topo da tabela (scroll interno) ── */
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f5f5f5;   /* fundo próprio — senão fica transparente quando sticky */
}

/* ── Coluna spacer (última) — expande para preencher espaço restante ── */
th.spacer-col, td.spacer-col {
    padding: 0;
    border: none;
    /* sem width → em table-layout:fixed, absorve espaço restante */
}
th.spacer-col { background: #f5f5f5; }

/* ── Colunas fixas (sticky) à esquerda ──────────────── */
th.sticky-col, td.sticky-col {
    position: sticky;
    background: white;
    z-index: 2;
}
/* Cabeçalho das colunas sticky = fixo na vertical E horizontal (canto) */
thead th.sticky-col { background: #f5f5f5; z-index: 5; top: 0; }
tr:hover td.sticky-col { background: #fafafa; }
td.sticky-col.editable { background: #fffde7; }
tr:hover td.sticky-col.editable { background: #fff9c4; }

/* Barra de scroll no topo da tabela (sincronizada com a de baixo) */
.table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    background: white;
    border-radius: 10px 10px 0 0;
    margin-bottom: -1px;
}
.table-scroll-top-inner { height: 1px; }

/* ── Colunas redimensionáveis ────────────────────────── */
th { position: relative; user-select: none; overflow: visible !important; }
th .resize-handle {
    position: absolute;
    right: -4px;             /* ligeiramente para fora do th para não ficar tapado pela sticky ao lado */
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    background: transparent;
    z-index: 100;            /* muito acima de qualquer sticky */
    user-select: none;
}
th .resize-handle:hover { background: #014894; opacity: 0.4; }
th.resizing .resize-handle { background: #014894; opacity: 0.6; }

/* ── Seletor de colunas (dropdown) — fixed abaixo dos filtros ── */
.column-dropdown {
    position: fixed;
    top: 228px;                        /* abaixo da barra de filtros (1 linha ~74px) */
    left: 20px;
    right: 20px;
    max-width: 2360px;
    margin-left: auto;
    margin-right: auto;
    z-index: 700;
    display: block;
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.column-dropdown-btn {
    padding: 6px 14px;
    background: #014894;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}
.column-dropdown-btn:hover { background: #026AD3; }
.btn-export-excel {
    padding: 6px 14px;
    margin-left: 8px;
    background: #1d8348;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}
.btn-export-excel:hover { background: #239b56; }
.btn-export-pdf {
    padding: 6px 14px;
    margin-left: 8px;
    background: #c62828;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}
.btn-export-pdf:hover { background: #d32f2f; }
.btn-novo-processo {
    padding: 6px 14px; margin-left: 8px;
    background: #014894; color: white; border: none;
    border-radius: 6px; cursor: pointer; font-size: 16px;
}
.btn-novo-processo:hover { background: #026AD3; }
.column-dropdown-content {
    display: none;
    position: absolute;
    left: 20px;
    top: 40px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 12px 16px;
    z-index: 100;
    min-width: 200px;
}
.column-dropdown-content.open { display: block; }
.column-dropdown-content label {
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 5px 4px;
    border-radius: 4px;
}
.column-dropdown-content label:hover { background: #e6f0fa; }
.column-dropdown-content label.unchecked { color: #aaa; }
.column-dropdown-content label.draggable-col { cursor: grab; }
.column-dropdown-content label.draggable-col:active { cursor: grabbing; }
.column-dropdown-content label.dragging { opacity: 0.4; }
.column-dropdown-content label.drag-over-top { border-top: 2px solid #014894; }
.column-dropdown-content label.drag-over-bottom { border-bottom: 2px solid #014894; }
.column-dropdown-content label.fixed-col { cursor: default; opacity: 0.7; }
.column-dropdown-content label.fixed-col::after {
    content: '🔒';
    margin-left: auto;
    font-size: 13px;
    opacity: 0.6;
}
.column-dropdown-content .fixed-separator {
    border-top: 1px dashed #ddd;
    margin: 6px 0;
}

/* ── Cabeçalhos de categoria no dropdown de colunas ─── */
.column-dropdown-content .col-category-header {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 4px 4px;
    margin-top: 4px;
    border-top: 1px solid #eee;
    color: #888;
}
.column-dropdown-content .col-category-header:first-child {
    border-top: none;
    margin-top: 0;
}
.column-dropdown-content .col-category-header.cat-carac { color: #014894; }
.column-dropdown-content .col-category-header.cat-sist  { color: #1d8348; }

/* Ponto colorido antes do nome da coluna no dropdown */
.column-dropdown-content label.cat-carac::before,
.column-dropdown-content label.cat-sist::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 2px;
    margin-right: 2px;
    flex-shrink: 0;
}
.column-dropdown-content label.cat-carac::before { background: #dceaf7; border: 1px solid #b9d3ec; }
.column-dropdown-content label.cat-sist::before  { background: #dcf0e0; border: 1px solid #b6d9c1; }

/* ── Cor de fundo nos cabeçalhos da tabela por categoria ── */
thead th.col-cat-carac { background: #dceaf7; }
thead th.col-cat-sist  { background: #dcf0e0; }

/* ── Admin panel ──────────────────────────────────────── */
.admin-panel { margin-bottom: 24px; }
.admin-panel h3 { margin-bottom: 12px; }

/* ── Tabela de permissões por perfil ─────────────────── */
.permissoes-table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; }
.permissoes-table th, .permissoes-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: center; }
.permissoes-table thead th { background: #014894; color: #fff; text-align: center; }
.permissoes-table .acao-col { text-align: left; }
.permissoes-table .section-row td {
    background: #f5f8ff; color: #014894; font-weight: 600;
    font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px;
    text-align: left; padding: 10px;
}
.permissoes-table tr:hover:not(.section-row) td { background: #fafafa; }
.user-form {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
}
.user-form .field { display: flex; flex-direction: column; gap: 4px; }
.user-form label { font-size: 15px; color: #666; }
.user-form input, .user-form select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}
.btn-primary { background: #014894; color: white; }
.btn-primary:hover { background: #026AD3; }
.btn-danger { background: #d32f2f; color: white; }
.btn-danger:hover { background: #c62828; }
.btn-upload { background: #2e7d32; color: white; }
.btn-upload:hover { background: #1b5e20; }

.user-table { width: 100%; }

/* ── Legenda ──────────────────────────────────────────── */
.legenda-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    position: relative;
}
.legenda-card h3 {
    font-size: 19px;
    color: #014894;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e6f0fa;
}
.legenda-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.legenda-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; text-align: left; }
.legenda-table tr:last-child td { border-bottom: none; }
.legenda-table .codigo { font-weight: 600; color: #0AA0FF; white-space: nowrap; width: 120px; }
.legenda-card.wide .legenda-table .codigo { width: 280px; white-space: normal; }
.legenda-table .nome { font-weight: 500; color: #444; }
.legenda-table .desc { color: #777; font-size: 15px; line-height: 1.4; }

/* Botão de minimizar/expandir no canto inferior direito */
.legenda-toggle {
    position: absolute;
    bottom: 8px;
    right: 12px;
    background: #f7f9fc;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    color: #014894;
    transition: transform 0.2s ease, background 0.2s ease;
    user-select: none;
}
.legenda-toggle:hover { background: #e6f0fa; }
.legenda-card.collapsed .legenda-toggle { transform: rotate(180deg); }
.legenda-card.collapsed .legenda-table { display: none; }
.legenda-card.collapsed .pillars-diagram { display: none; }
.legenda-card.collapsed .sgqas-pillars-card > p { display: none; }

/* ── Hierarquia Documental: os três níveis ───────────────────────────
   Colunas separadas, que alargam ao passar o rato. O leque com os cartões
   sobrepostos foi tentado em 31/08/2026 e abandonado: tapava o texto e não
   convivia com os menus. As setas entre níveis saíram nessa altura. */
.pillars-diagram {
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: stretch;
    padding: 20px 10px;
    flex-wrap: wrap;
}
.pillar {
    flex: 1;
    min-width: 240px;
    max-width: 340px;
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 20px 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
    transition: transform 0.25s, box-shadow 0.25s, flex-grow 0.25s, max-width 0.25s;
    cursor: default;
    /* `visible` e não `hidden`: o painel dos menus sai fora do cartão e era
       cortado. Os cantos do cabeçalho passam a ser arredondados por ele mesmo. */
    overflow: visible;
}

/* A coluna sob o rato alarga e as outras encolhem, para o texto respirar.
   Mantém-se alargada enquanto um menu estiver aberto, mesmo que o rato saia —
   senão encolhia por baixo do painel e a lista saltava. */
.pillar:hover,
.pillar:has(.cx-drop.aberto) {
    z-index: 10;
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.20);
    flex-grow: 2.4;
    max-width: 560px;
}
.pillar.pillar-1 { background: #f3f8fd; }
.pillar.pillar-2 { background: #fffdf0; }
.pillar.pillar-3 { background: #f0f8f2; }

/* Cabeçalho a cheio, letras brancas */
.pillar .pillar-title,
.pillar .pillar-subtitle {
    margin-left: -20px;
    margin-right: -20px;
    text-align: center;
    color: #fff;
}
.pillar .pillar-title {
    padding: 16px 20px;
    font-weight: 700;
    font-size: 21px;
    margin: 0 -20px 16px;
    /* Arredonda-se a si próprio, agora que o cartão deixou de cortar o que sai */
    border-radius: 12px 12px 0 0;
}
.pillar.pillar-1 .pillar-title,
.pillar.pillar-1 .pillar-subtitle { background: #014894; }
.pillar.pillar-2 .pillar-title,
.pillar.pillar-2 .pillar-subtitle { background: #c47a1a; }
.pillar.pillar-3 .pillar-title,
.pillar.pillar-3 .pillar-subtitle { background: #1d8348; }
.pillar ul { list-style: none; padding: 0; margin: 0; font-size: 16px; color: #333; line-height: 1.5; }
.pillar ul li { padding: 8px 0; border-bottom: 1px dashed rgba(0,0,0,0.08); }
.pillar ul li:last-child { border-bottom: none; }
.pillar ul li strong { display: block; color: #014894; font-weight: 600; }
.pillar.pillar-2 ul li strong { color: #a35a12; }
.pillar.pillar-3 ul li strong { color: #1d8348; }
.pillar ul li .desc { display: block; font-size: 15px; color: #666; margin-top: 2px; line-height: 1.4; }
/* Crachá de documentos nos itens da Hierarquia sem código (Manual SGQAS,
   Matrizes dos processos, ...). Linha própria, para não empurrar a descrição. */
.pillar ul li .ref-badge { display: inline-block; margin-top: 6px; }
.pillar-dropdown {
    display: block; width: 100%; margin-top: 6px;
    padding: 4px 8px; font-size: 15px; color: #014894;
    border: 1px solid #cbd6e2; border-radius: 4px;
    background: #fff; cursor: pointer;
}
.pillar-dropdown:hover { border-color: #026AD3; }
.pillar ul ul { padding-left: 12px; font-size: 15px; color: #666; margin-top: 4px; list-style: disc; }
.pillar ul ul li { padding: 1px 0; border: none; }

.legenda-card.collapsed { padding-bottom: 44px; }
.legenda-card.collapsed h3 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }

/* ── Rodapé (fixo no fundo da viewport) ─────────────── */
.footer {
    background: #014894;
    color: rgba(255,255,255,0.7);
    padding: 20px 40px;
    font-size: 15px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 36px 36px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
/* Espaço no fundo do #app-page para o rodapé fixo não tapar conteúdo */
#app-page { padding-bottom: 90px; }
.footer-left {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: white;
    letter-spacing: 1px;
}
.footer-right {
    text-align: right;
}
.footer a { color: rgba(255,255,255,0.9); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ── Ocultar secções ──────────────────────────────────── */
.hidden { display: none !important; }

/* ── Mensagem toast ───────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-size: 17px;
    /* Acima das janelas (.historico-overlay usa 9999). Com 1000 os avisos
       levantados dentro de uma janela ficavam escondidos por trás dela, e os
       botões pareciam não fazer nada. */
    z-index: 10001;
    animation: fadeIn 0.3s;
}
.toast-success { background: #2e7d32; }
.toast-error { background: #d32f2f; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Botão histórico */
.btn-historico {
    background: none; border: none; cursor: pointer; font-size: 22px; padding: 2px 6px; border-radius: 4px;
}
.btn-historico:hover { background: #e3f2fd; }
/* Botão apagar processo (admin) */
.btn-apagar-processo {
    background: none; border: none; cursor: pointer; font-size: 20px; padding: 2px 6px;
    border-radius: 4px; color: #d32f2f; font-weight: bold; margin-left: 4px;
}
.btn-apagar-processo:hover { background: #ffebee; }
/* Coluna dos botões: histórico, anexar e apagar sempre na mesma linha. Sem o
   nowrap o × caía para baixo; sem o overflow visível ficava cortado com "…"
   quando a largura guardada no browser era menor que os botões. */
td.sticky-col:first-child {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
td.sticky-col:first-child > button { vertical-align: middle; }

/* Botão anexar ficheiro numa linha da tabela */
/* Mesmas cores do .btn-mini (o "+ Adicionar"): fundo claro, contorno e letra
   azuis. Aparece em todas as linhas da tabela, e o azul cheio competia com o
   conteúdo. */
.btn-anexar-processo {
    background: #e3f0ff; color: #014894; border: 1.5px solid #026AD3;
    padding: 7px 14px; margin-left: 4px;
    border-radius: 6px; cursor: pointer;
    font-size: 16px; font-weight: 600; font-family: inherit;
    white-space: nowrap; line-height: 1.4;
}
.btn-anexar-processo:hover { background: #026AD3; border-color: #014894; color: #fff; }
/* Ter ou não ter anexos distingue-se pelo número entre parênteses, não pela
   cor — os dois estados usam o mesmo azul. */

/* Modal de anexos (reusa layout do histórico) */
.anexos-popup h3 { margin: 0 0 16px 0; color: #014894; font-size: 22px; }
.anexos-popup .anexo-upload-bar {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 12px; padding: 10px; background: #f5f8ff;
    border-radius: 6px;
}
.anexos-popup .anexo-upload-bar input[type="file"] { flex: 1; font-size: 15px; }
.anexos-popup .anexo-upload-hint { font-size: 15px; color: #888; margin-bottom: 12px; }
.anexos-popup .anexo-list { display: flex; flex-direction: column; gap: 6px; }
.anexos-popup .anexo-vazio { color: #888; font-style: italic; padding: 20px 0; text-align: center; font-size: 16px; }

/* Painel dos documentos da Hierarquia Documental: mesmo aspeto dos menus dos
   pilares — caixa de filtrar em cima, lista por baixo, contorno azul. */
.ref-painel {
    border: 1.5px solid #026AD3; border-radius: 8px; padding: 10px;
    background: #fff; max-height: 380px; overflow: auto;
}
.ref-painel .dep-grupo-tit { margin: 4px 0 8px 0; }
.ref-painel .dep-grupo-tit:first-child { margin-top: 0; }

/* Barra de carregar dentro das janelas de documentos (Hierarquia Documental).
   As regras acima são só do .anexos-popup; esta janela é a do histórico. */
.historico-popup .anexo-upload-bar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 10px; background: #f5f8ff; border-radius: 6px;
}
.historico-popup .anexo-upload-bar input[type="file"] { flex: 1; min-width: 180px; }
.historico-popup .anexo-upload-hint { font-size: 15px; color: #888; margin-top: 6px; }
/* Escolher o tipo antes de carregar, nos itens que se dividem (Alvarás, ...) */
.ref-tipo {
    font-family: inherit; font-size: 15px; font-weight: 600; padding: 7px 10px;
    border: 1.5px solid #026AD3; border-radius: 6px; color: #014894;
    background: #fff; cursor: pointer;
}

/* Popup histórico */
.historico-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.historico-popup {
    background: #fff; border-radius: 12px; padding: 28px 32px; max-width: 700px; width: 90%;
    max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.historico-popup h3 { margin: 0 0 16px 0; color: #014894; font-size: 22px; }
.historico-popup table { width: 100%; border-collapse: collapse; font-size: 16px; }
.historico-popup th { background: #014894; color: #fff; padding: 8px 10px; text-align: left; }
.historico-popup td { padding: 8px 10px; border-bottom: 1px solid #eee; }
.historico-popup tr:hover td { background: #f5f8ff; }
.historico-popup .btn-fechar {
    background: #014894; color: #fff; border: none; padding: 8px 20px; border-radius: 6px;
    cursor: pointer; font-size: 17px; margin-top: 16px;
}
.historico-popup .btn-fechar:hover { background: #026AD3; }
.historico-vazio { color: #888; font-style: italic; padding: 20px 0; text-align: center; }

/* Password com olho */
.password-wrapper { position: relative; margin-bottom: 14px; }
.password-wrapper input {
    width: 100%;
    padding-right: 40px !important;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    display: block;
}
.toggle-password {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    cursor: pointer; font-size: 22px; user-select: none; opacity: 0.6;
}
.toggle-password:hover { opacity: 1; }

/* Popup mudar password */
.changepass-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.changepass-popup {
    background: #fff; border-radius: 12px; padding: 28px 32px; max-width: 400px; width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.changepass-popup h3 { margin: 0 0 16px 0; color: #014894; font-size: 22px; }
.changepass-popup label { display:block; font-size:15px; color:#555; margin-bottom:4px; margin-top:2px; }
.changepass-popup input {
    width: 100%; padding: 10px 40px 10px 12px; margin-bottom: 12px;
    border: 1px solid #ccc; border-radius: 6px; font-size: 17px; box-sizing: border-box;
}
.changepass-popup .btns { display: flex; gap: 10px; margin-top: 8px; }
.changepass-popup button {
    flex: 1; background: #014894; color: #fff; border: none; padding: 10px; border-radius: 6px;
    cursor: pointer; font-size: 17px;
}
.changepass-popup button:hover { background: #026AD3; }
.changepass-popup button.cancel { background: #888; }
.changepass-popup button.cancel:hover { background: #555; }
.changepass-error { color: #d32f2f; font-size: 15px; margin-bottom: 8px; }

/* ── Iniciativas ────────────────────────────────────── */
.ini-detail-card {
    background: #fff; padding: 24px; border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 20px;
}
.ini-detail-card h3 {
    margin-top: 0; color: #014894; border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px; margin-bottom: 16px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; user-select: none;
}
.ini-detail-card h3:hover { color: #026AD3; }
.ini-detail-card .toggle-arrow { font-size: 17px; transition: transform 0.2s; }
.ini-detail-card.collapsed .toggle-arrow { transform: rotate(-90deg); }
.ini-detail-card.collapsed .card-body { display: none; }
.ini-detail-card.collapsed h3 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.ini-form-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px;
}
.ini-form-grid label { display: flex; flex-direction: column; font-size: 15px; color: #555; gap: 4px; }
.ini-form-grid label.full { grid-column: 1 / -1; }
.ini-form-grid input, .ini-form-grid select, .ini-form-grid textarea {
    padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;
    font-family: inherit;
}
.ini-form-grid textarea { min-height: 60px; resize: vertical; }
.ini-form-buttons { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }

.ini-sub-section { margin-top: 18px; }
.ini-sub-section h4 {
    margin: 0 0 10px 0; color: #014894; display: flex; justify-content: space-between; align-items: center;
}
.ini-sub-section .btn-add-sub {
    background: #014894; color: #fff; border: none; padding: 6px 12px;
    border-radius: 6px; cursor: pointer; font-size: 15px;
}
.ini-sub-section .btn-add-sub:hover { background: #026AD3; }
.ini-sub-list { display: flex; flex-direction: column; gap: 8px; }
.ini-sub-item {
    border: 1px solid #eee; border-radius: 8px; padding: 12px;
    background: #fafafa;
}
.ini-sub-item .ini-sub-item-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.ini-sub-item .ini-sub-item-meta { font-size: 15px; color: #888; }
.btn-mini {
    background: #e3f0ff; border: 1.5px solid #026AD3; padding: 7px 15px;
    border-radius: 6px; cursor: pointer; font-size: 15px; color: #014894;
    font-weight: 600; font-family: inherit;
    display: inline-block;
    transition: background .15s, border-color .15s;
}
.btn-mini:hover { background: #026AD3; border-color: #014894; color: #fff; }
/* O "Escolher ficheiro" é desenhado pelo Windows e vinha pequeno e cinzento ao
   lado dos nossos botões. Esta regra veste-o de `.btn-mini`, em toda a
   plataforma — é o único pedaço de um input de ficheiro que se pode formatar. */
input[type="file"] { font-size: 15px; font-family: inherit; color: #666; }
input[type="file"]::file-selector-button {
    background: #e3f0ff; border: 1.5px solid #026AD3; padding: 7px 15px;
    border-radius: 6px; cursor: pointer; font-size: 15px; color: #014894;
    font-weight: 600; font-family: inherit; margin-right: 12px;
    transition: background .15s, border-color .15s, color .15s;
}
input[type="file"]:hover::file-selector-button {
    background: #026AD3; border-color: #014894; color: #fff;
}
/* Ação que não se aplica a este item (ex.: Ver um Excel). É um span e não um
   button disabled, porque um botão desativado não mostra a explicação do title. */
.btn-mini.desativado,
.btn-mini.desativado:hover { background: #f2f2f2; border-color: #ccc; color: #aaa; cursor: not-allowed; }
.btn-mini.danger { color: #c62828; border-color: #d32f2f; background: #fdecec; }
.btn-mini.danger:hover { background: #d32f2f; border-color: #b71c1c; color: #fff; }

.estado-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 15px; font-weight: 600; text-transform: uppercase;
}
.estado-em-avaliacao { background: #e3f2fd; color: #1976d2; }
.estado-aprovada { background: #e8f5e9; color: #2e7d32; }
.estado-em-piloto { background: #fff3e0; color: #e65100; }
.estado-validada { background: #c8e6c9; color: #1b5e20; }
.estado-escalada { background: #d1c4e9; color: #4527a0; }
.estado-arquivada { background: #eeeeee; color: #555; }
.estado-rejeitada { background: #ffebee; color: #c62828; }

/* Crachá do nº de anexos nas listas do departamento. Mesma forma dos estados,
   para a plataforma falar uma linguagem só. */
.anexos-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 14px; font-weight: 600;
    background: #e3f0ff; color: #014894;
}
.anexos-badge.vazio { background: #f2f2f2; color: #999; font-weight: 500; }
.anexos-badge.clicavel { cursor: pointer; }
.anexos-badge.clicavel:hover { background: #026AD3; color: #fff; }

.processos-link-list {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.processo-chip {
    background: #e6f0fa; color: #014894; padding: 4px 10px;
    border-radius: 12px; font-size: 15px; display: inline-flex; gap: 6px; align-items: center;
}
.processo-chip .remove { cursor: pointer; opacity: 0.6; font-weight: bold; }
.processo-chip .remove:hover { opacity: 1; color: #c62828; }

/* Timeline de eventos */
.evento-timeline { position: relative; padding-left: 4px; }
.evento-timeline-item {
    position: relative; padding-left: 32px; padding-bottom: 12px;
}
.evento-timeline-item:not(.last)::before {
    content: '';
    position: absolute;
    left: 9px; top: 16px; bottom: 0;
    border-left: 2px solid #d0d0d0;
}
.evento-timeline-item.future:not(.last)::before {
    border-left-style: dashed;
}
.evento-timeline-dot {
    position: absolute; left: 0; top: 6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #d0d0d0;
    z-index: 1;
}
.evento-today-marker {
    position: relative;
    margin: 6px 0 14px 0;
    padding-left: 32px;
}
.evento-today-marker::before {
    content: '';
    position: absolute;
    left: 4px; top: 50%; transform: translateY(-50%);
    width: 11px; height: 11px;
    background: #014894; border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #014894;
}
.evento-today-marker span {
    background: #014894; color: #fff;
    padding: 3px 12px; border-radius: 12px;
    font-size: 15px; font-weight: 700;
    letter-spacing: 0.5px;
}

/* Modal de formulário (stages, eventos, gates) */
.ini-form-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.ini-form-modal {
    background: #fff; border-radius: 12px; padding: 24px;
    width: 90%; max-width: 560px; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.ini-form-modal h3 { margin: 0 0 16px 0; color: #014894; }
.ini-form-modal > label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 15px; color: #555; margin-bottom: 12px;
}
.ini-form-modal input, .ini-form-modal select, .ini-form-modal textarea {
    padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px;
    font-size: 16px; font-family: inherit;
}
.ini-form-modal textarea { min-height: 80px; resize: vertical; }
.ini-form-modal .actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}
.ini-form-modal .actions button {
    padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
}
.ini-form-modal .actions .btn-cancel { background: #eee; color: #555; }
.ini-form-modal .actions .btn-save { background: #014894; color: #fff; }

/* ══════════════════════════════════════════════════════════════
   IMPRESSÃO / EXPORT PDF
   Ao imprimir (ou Guardar como PDF) só o cabeçalho + tabela é
   impresso; toda a UI (navbar, tabs, filtros, botões) é escondida.
   ══════════════════════════════════════════════════════════════ */
#print-header { display: none; }
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    /* Esconder toda a UI */
    .navbar, .tabs, .filters-bar, .column-dropdown, .table-scroll-top,
    #section-dashboard, #section-iniciativas, #section-reunioes, #section-topicos,
    #section-biblioteca, #section-guia, #section-home, #section-departamento,
    #section-admin, #section-sugestoes,
    .footer, #app-page > .navbar {
        display: none !important;
    }
    #app-page { padding-top: 0 !important; }
    /* Mostrar cabeçalho de impressão */
    #print-header {
        display: block !important;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #014894;
        font-size: 15px;
        color: #333;
    }
    #print-header h2 { margin: 0 0 4px 0; font-size: 20px; color: #014894; }
    #print-header .print-meta { color: #666; font-size: 13px; }
    #print-header .print-filters { margin-top: 6px; font-size: 13px; }
    /* Tabela: sem scroll, sem sticky */
    .table-container {
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border: none !important;
    }
    #processos-table { font-size: 13px; page-break-inside: auto; }
    #processos-table thead th {
        position: static !important;
        background: #f0f0f0 !important;
        color: #333 !important;
        z-index: auto !important;
        padding: 4px 6px !important;
    }
    #processos-table td {
        padding: 3px 6px !important;
        text-align: left !important;
        page-break-inside: avoid;
    }
    #processos-table tr { page-break-inside: avoid; page-break-after: auto; }
    /* Esconder a coluna sticky de botões (histórico, anexar, apagar) */
    #processos-table th.sticky-col:first-child,
    #processos-table td.sticky-col:first-child { display: none !important; }
    /* Escoder resize handle e botões dentro das células */
    .resize-handle, .btn-historico, .btn-anexar-processo, .btn-apagar-processo { display: none !important; }
    /* Sem cores de categoria (economia de tinta) */
    thead th.col-cat-carac, thead th.col-cat-sist { background: #f0f0f0 !important; }
}