/* ==========================================================================
   núcleo — folha de estilo única.

   A paleta vem da direcção "triagem" da ronda anterior: fundo quente (não
   branco de escritório), tinta castanha em vez de preto, ultramarino como cor
   de acção, e uma rampa de azul-oceano para as barras — a profundidade na
   árvore lê-se pela saturação da barra, não por cinco cores a competir.
   ========================================================================== */

:root {
  --bg:          oklch(0.962 0.014 75);
  --surface:     oklch(0.995 0.004 80);
  --surface-2:   oklch(0.938 0.016 73);
  --surface-3:   oklch(0.916 0.018 72);

  --ink:         oklch(0.26 0.032 45);
  --ink-2:       oklch(0.34 0.032 47);
  --ink-3:       oklch(0.45 0.033 52);
  --ink-faint:   oklch(0.53 0.033 56);

  --line:        oklch(0.884 0.02 70);
  --line-soft:   oklch(0.918 0.016 72);
  --line-strong: oklch(0.80 0.026 66);

  --primary:     oklch(0.5 0.165 265);
  --primary-ink: oklch(0.975 0.008 80);
  --primary-bg:  oklch(0.93 0.04 262);

  --ok:      oklch(0.52 0.125 152);
  --ok-bg:   oklch(0.93 0.06 150);
  --warn:    oklch(0.55 0.135 76);
  --warn-bg: oklch(0.94 0.065 85);
  --danger:  oklch(0.55 0.185 30);
  --coral:   oklch(0.63 0.16 33);
  /* O desvio ao planificado não é um alarme: é uma constatação. Tinta apagada,
     para se ver sem gritar por cima do que está mesmo atrasado. */
  --desvio:  oklch(0.6 0.045 55);

  /* Os três níveis de contentor têm de se distinguir de relance, e não por
     graus da mesma cor: eram cinco azuis seguidos e, no diagrama, o objectivo,
     o sub-objectivo e a actividade liam-se como a mesma barra. Índigo, azul de
     oceano e turquesa afastam-se em matiz, não só em claridade — e nenhum deles
     colide com o verde, o âmbar e o vermelho, que no cronograma passaram a
     querer dizer prazo. */
  --bar-1: oklch(0.42 0.175 285);
  --bar-2: oklch(0.57 0.145 242);
  --bar-3: oklch(0.68 0.115 198);
  --bar-4: oklch(0.72 0.09 178);
  --bar-5: oklch(0.78 0.07 165);

  /* O mesmo azul das barras, diluído, para pintar a linha da árvore. Ler o
     nível não pode obrigar a contar indentações. */
  --nivel-0: oklch(0.5 0.16 265 / .12);
  --nivel-1: oklch(0.55 0.14 248 / .05);

  /* Urgência: três degraus que se distinguem de relance e não se confundem
     com o coral de "criado aqui". */
  --urg-atraso:    oklch(0.52 0.19 25);
  --urg-atraso-bg: oklch(0.93 0.06 25);
  --urg-urgente:   oklch(0.6 0.17 48);
  --urg-urgente-bg:oklch(0.945 0.07 58);
  --urg-alta:      oklch(0.56 0.12 88);
  --urg-alta-bg:   oklch(0.95 0.06 92);

  --grid:        oklch(0.928 0.012 74);
  --grid-strong: oklch(0.855 0.02 70);

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;

  --row-h: 38px;
  --w-arvore: 460px;
  --w-col: 34px;
  --w-max: 1400px;

  --sombra-1: 0 1px 2px oklch(0.42 0.06 50 / .09), 0 4px 14px -4px oklch(0.42 0.06 50 / .12);
  --sombra-2: 0 2px 4px oklch(0.42 0.06 50 / .1), 0 14px 38px -8px oklch(0.42 0.06 50 / .22);

  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-texto: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-texto);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.fraco { color: var(--ink-faint); }
.mono  { font-family: var(--f-mono); font-size: .82em; letter-spacing: -.01em; }

/* --- topo ---------------------------------------------------------------- */

/* Uma só medida de largura para o topo, a faixa e o conteúdo: em ecrã largo as
   três alinham na mesma coluna em vez de a página parecer encostada. */
.limite { max-width: var(--w-max); margin-inline: auto; width: 100%; }

.topo {
  position: sticky; top: 0; z-index: 40;
  padding: 10px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
/* Com a Organização e o sino, o cabeçalho passou a ter mais uma aba e mais um
   botão: num ecrã estreito empurrava o "Sou" para fora da janela e a página
   ganhava barra horizontal. Passa para a linha de baixo em vez de sair. */
.topo-dentro { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 9px; }
.topo-dir { flex-wrap: wrap; row-gap: 8px; }

.marca {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.026em;
}
.marca .ponto {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px oklch(0.5 0.165 265 / .16);
}

.vistas { display: flex; gap: 2px; }
.vistas button {
  border: 0; background: transparent; color: var(--ink-3);
  padding: 6px 13px; border-radius: 999px; font-weight: 500;
  transition: background 120ms, color 120ms;
}
.vistas button:hover { background: var(--surface-3); color: var(--ink); }
.vistas button[aria-current="true"] { background: var(--ink); color: var(--bg); }
.vistas button[disabled] { opacity: .35; pointer-events: none; }

.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.campo-periodo, .campo-eu {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-faint);
}
.campo-periodo select, .campo-eu select {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 4px 8px; font-size: 13px; color: var(--ink);
}
.campo-periodo select { font-weight: 600; }
.campo-eu select[disabled] { color: var(--ink-faint); }

/* Hoje, num clique. Procurar a semana de hoje numa lista de vinte e oito era
   contar de cabeça todas as manhãs. */
.btn-hoje {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 4px 9px; font-size: 12px; color: var(--ink-3);
  cursor: pointer;
}
.btn-hoje:hover { border-color: var(--primary); color: var(--primary); }
.btn-hoje.aqui { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-hoje.desligado { opacity: .45; }

.faixa-projecto {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.faixa-dentro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.faixa-projecto strong {
  font-family: var(--f-display); font-weight: 700; font-size: 16px;
  letter-spacing: -.02em; max-width: 70ch;
}
.faixa-projecto .fraco { font-size: 12.5px; }
#sel-projeto {
  font-family: var(--f-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: -.02em; color: var(--ink); max-width: min(66ch, 100%);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; padding: 3px 6px;
}
#sel-projeto:hover { border-color: var(--line); background: var(--surface); }

/* --- pessoas -------------------------------------------------------------
   Quem trabalha aqui vive numa lista, num sítio só. É dela que sai o "Sou" lá
   em cima, quem pode ficar responsável e quem pode validar — em vez de cada um
   escrever o nome à sua maneira em cada caixa.
   ------------------------------------------------------------------------ */

.bloco-pessoas {
  margin-bottom: 24px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.bloco-pessoas h2 { font-family: var(--f-display); font-size: 17px; margin: 0 0 6px; letter-spacing: -.02em; }
.pessoas-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.chip.pessoa {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary-bg); border: 1px solid oklch(0.5 0.165 265 / .22);
  border-radius: 999px; padding: 3px 5px 3px 11px; font-size: 12.5px;
}
.chip.pessoa button {
  border: 0; background: transparent; color: var(--ink-faint);
  font-size: 14px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.chip.pessoa button:hover { color: var(--danger); }
#pessoa-nova {
  border: 1px dashed var(--line-strong); border-radius: 999px;
  background: var(--surface-2); padding: 4px 12px; font: inherit; font-size: 12.5px;
}
#pessoa-nova:focus { border-style: solid; border-color: var(--primary); outline: none; }

/* Escolher a equipa é ligar e desligar nomes, não escrever uma lista outra vez. */
.chip.escolha {
  border: 1px dashed var(--line-strong); background: var(--surface-2);
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px; color: var(--ink-3); cursor: pointer;
}
.chip.escolha:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }
.chip.escolha.dentro {
  border-style: solid; border-color: var(--primary);
  background: var(--primary); color: var(--primary-ink);
}

/* --- a ficha de um projecto ----------------------------------------------
   O cronograma diz o que se faz e quando; não diz quem lidera, quem promove,
   com quem é feito nem quanto custa. Isso ia à candidatura de cada vez.
   ------------------------------------------------------------------------ */

.projecto-cartao { margin-bottom: 7px; }
.projecto-cartao .linha-projecto { margin-bottom: 0; }
.projecto-cartao .caixa-ficha:not([hidden]) + * { margin-top: 0; }
.caixa-ficha {
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--surface-2); padding: 14px 14px 12px;
}
.projecto-cartao:has(.caixa-ficha:not([hidden])) .linha-projecto {
  border-radius: var(--r-md) var(--r-md) 0 0; border-bottom-color: var(--line-soft);
}
.ficha-equipa { margin-bottom: 14px; }
.ficha-equipa > label,
.campo-ficha label { display: block; font-size: 11px; color: var(--ink-faint); }
.ficha-equipa .pessoas-chips { margin-top: 6px; }
.campos-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.campo-ficha.largo { grid-column: span 2; }
.campo-ficha input, .campo-ficha textarea {
  width: 100%; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 5px 8px; font: inherit; font-size: 12.5px;
  color: var(--ink); margin-top: 2px;
}
.campo-ficha textarea { resize: vertical; min-height: 44px; }
.campo-ficha input:focus, .campo-ficha textarea:focus { outline: none; border-color: var(--primary); }
.campo-ficha .calculado {
  margin-top: 2px; padding: 6px 8px; font-size: 12.5px;
  border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-2);
}

/* Parceiros: uma linha por entidade, com o contacto de referência lá dentro à
   frente do nome. Duas caixas de texto livre não diziam de quem era o contacto,
   que é a única coisa que se vai lá procurar. */
.bloco-parceiros, .bloco-planificado { margin-top: 14px; }
.bloco-parceiros > label,
.bloco-planificado > label { display: block; font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; }
.lista-parceiros { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
/* Três campos que se lêem juntos ficam na mesma linha, e não onde o auto-fit da
   grelha os atirar: o início, o fim e a duração são a mesma frase, e o
   orçamento, o recebido e a co-participação também. */
.linha-tres {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px;
}
@media (max-width: 720px) { .linha-tres { grid-template-columns: 1fr; } }

.linha-parceiro { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.linha-parceiro input {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 5px 8px; font: inherit; font-size: 12.5px; color: var(--ink);
}
.linha-parceiro input:first-child { flex: 1 1 200px; min-width: 0; }
.linha-parceiro input:nth-child(2) { flex: 1 1 140px; min-width: 0; }
.linha-parceiro input:nth-child(3) { flex: 1.4 1 200px; min-width: 0; }
.linha-parceiro input:focus { outline: none; border-color: var(--primary); }
.linha-parceiro .apagar { flex: none; }
.bloco-planificado { border-top: 1px solid var(--line-soft); padding-top: 12px; }

/* Importar é o gesto que se faz uma vez por projecto. Fica em último, fechado,
   e a lista dos projectos fica em cima, que é o que se consulta todas as semanas. */
.importar-caixa {
  margin-top: 22px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); padding: 12px 16px;
}
.importar-caixa > summary {
  font-family: var(--f-display); font-size: 14px; letter-spacing: -.02em;
  color: var(--ink-2); cursor: pointer;
}
.importar-caixa[open] > summary { margin-bottom: 8px; }
.importar-caixa > p { font-size: 12.5px; max-width: 70ch; margin-top: 0; }

/* --- projectos: vários, e o que já foi entregue arruma-se ----------------- */

.projectos { margin-bottom: 26px; }
.projectos h2 { font-family: var(--f-display); font-size: 17px; margin: 0 0 6px; letter-spacing: -.02em; }
.linha-projecto {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px; margin-bottom: 7px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.linha-projecto.aberto { border-color: var(--primary); background: var(--primary-bg); }
/* A linha inteira abre a ficha: obrigar a acertar no botão "Detalhes" escondia
   atrás de uma mira o gesto que mais se faz nesta vista. */
.linha-projecto.abre-detalhe { cursor: pointer; }
.linha-projecto.abre-detalhe:hover { border-color: var(--primary); }
.linha-projecto.abre-detalhe:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.linha-projecto .dele { min-width: 0; }
.linha-projecto .dele b { display: block; font-size: 13.5px; }
.linha-projecto .dele .fraco { font-size: 11.5px; }
.linha-projecto .accoes { display: flex; gap: 6px; flex: none; }
.linha-projecto .accoes .btn { font-size: 11.5px; padding: 3px 9px; }
.etiqueta.aberto-agora { background: var(--primary); color: var(--primary-ink); }
.arquivo { margin-top: 10px; }
.arquivo summary { font-size: 12.5px; color: var(--ink-faint); cursor: pointer; margin-bottom: 8px; }
.arquivo .linha-projecto { opacity: .74; }

main { padding: 18px 20px 80px; }

/* --- peças comuns -------------------------------------------------------- */

.barra-ferramentas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.grupo-botoes { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.grupo-botoes button { border: 0; background: transparent; padding: 5px 12px; font-size: 13px; color: var(--ink-3); }
.grupo-botoes button + button { border-left: 1px solid var(--line); }
.grupo-botoes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.btn {
  border: 1px solid var(--line); background: var(--surface);
  padding: 5px 12px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2);
}
.btn:hover { border-color: var(--line-strong); }
.btn-forte { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
.btn-forte:hover { filter: brightness(1.08); }
.btn-perigo { color: var(--danger); }

.etiqueta {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-3); color: var(--ink-3); white-space: nowrap;
}
.etiqueta.n0 { background: oklch(0.5 0.16 265 / .13);  color: oklch(0.42 0.16 265); }
.etiqueta.n1 { background: oklch(0.6 0.125 230 / .16); color: oklch(0.42 0.12 232); }
.etiqueta.n2 { background: oklch(0.74 0.09 195 / .2);  color: oklch(0.42 0.08 200); }
.etiqueta.n3 { background: oklch(0.63 0.16 33 / .15);  color: oklch(0.45 0.15 33); }
.etiqueta.n4 { background: var(--surface-3); color: var(--ink-3); }
.etiqueta.nova { background: var(--warn-bg); color: var(--warn); }
.etiqueta.desvio { background: var(--urg-urgente-bg); color: var(--urg-urgente); font-variant-numeric: tabular-nums; }

.pastilha-estado { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-faint); }
.pastilha-estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.e-em-curso i    { background: var(--warn); }
.e-por-validar i { background: var(--primary); }
.e-feito i       { background: var(--ok); }

.vazio {
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: 40px; text-align: center; color: var(--ink-faint); background: var(--surface);
}

/* --- importar ------------------------------------------------------------ */

.importar { max-width: 900px; margin: 0 auto; }
.importar h1 {
  font-family: var(--f-display); font-size: 26px; letter-spacing: -.028em;
  margin: 18px 0 6px;
}
.importar > p { color: var(--ink-3); max-width: 62ch; margin-top: 0; }

.alvo {
  margin: 22px 0; padding: 46px 24px; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); transition: border-color 140ms, background 140ms;
}
.alvo.sobre { border-color: var(--primary); background: var(--primary-bg); }
.alvo strong { display: block; font-family: var(--f-display); font-size: 17px; margin-bottom: 4px; }

.previa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sombra-1); }
.previa h2 { font-family: var(--f-display); font-size: 16px; margin: 0 0 12px; letter-spacing: -.02em; }
.cartoes-leitura { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cartao-leitura { background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; }
.cartao-leitura b { display: block; font-family: var(--f-display); font-size: 20px; letter-spacing: -.02em; }
.cartao-leitura span { font-size: 11.5px; color: var(--ink-faint); }

.previa-arvore { max-height: 300px; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 8px 10px; font-size: 12.5px; }
.previa-arvore div { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- cronograma ---------------------------------------------------------- */

.gantt-caixa {
  overflow: auto; max-height: calc(100vh - 210px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sombra-1);
}
.gantt { min-width: max-content; }

.g-linha {
  display: grid;
  grid-template-columns: var(--w-arvore) 1fr;
  border-bottom: 1px solid var(--line-soft);
  min-height: var(--row-h);
}
.g-linha:hover .g-arvore { background: var(--surface-2); }
.g-cab { position: sticky; z-index: 20; background: var(--surface-2); min-height: 0; }
.g-cab .g-arvore { background: var(--surface-2); }
.g-cab-1 { top: 0; height: 26px; }
.g-cab-2 { top: 26px; height: 22px; border-bottom-color: var(--line); }

.g-arvore {
  position: sticky; left: 0; z-index: 10;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px; min-width: 0;
}
.g-cab .g-arvore { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }

.g-seta {
  border: 0; background: transparent; padding: 0; width: 15px; flex: none;
  color: var(--ink-faint); font-size: 10px; line-height: 1;
}
.g-seta[data-vazio] { visibility: hidden; }

.g-titulo { min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px; }
.g-titulo .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-titulo .mono, .g-titulo .etiqueta { flex: none; white-space: nowrap; }
.p0 .txt { font-family: var(--f-display); font-weight: 700; font-size: 13.5px; letter-spacing: -.018em; }
.p1 .txt { font-weight: 600; }
.p2 .txt { color: var(--ink-2); }
.p3 .txt, .p4 .txt { color: var(--ink-3); font-size: 13px; }

/* Cada nível tem a sua cor, na barra lateral da árvore e na barra do
   calendário. Um objectivo e um sub-objectivo deixam de se distinguir só pela
   indentação — que é o que obrigava a contar espaços para saber onde se está.
   `inset box-shadow` em vez de border-left: não empurra o texto. */
.g-linha.p0 .g-arvore { box-shadow: inset 5px 0 0 var(--bar-1); background: var(--nivel-0); }
.g-linha.p1 .g-arvore { box-shadow: inset 5px 0 0 var(--bar-2); background: var(--nivel-1); }
.g-linha.p2 .g-arvore { box-shadow: inset 5px 0 0 var(--bar-3); }
.g-linha.p3 .g-arvore { box-shadow: inset 5px 0 0 var(--bar-4); }
.g-linha.p4 .g-arvore { box-shadow: inset 5px 0 0 var(--bar-5); }
.g-linha.p0 { border-bottom-color: var(--line-strong); }
.g-linha.p1 { border-bottom-color: var(--line); }
.g-linha.p0:hover .g-arvore { background: oklch(0.5 0.16 265 / .12); }
.g-linha.p1:hover .g-arvore { background: oklch(0.55 0.14 248 / .1); }

/* O código ("Objective 1" vs "Obj.1.1") passa a ser o terceiro sinal, com a
   cor do nível: rail, fundo e código dizem todos a mesma coisa. */
.g-linha.p0 .g-titulo .mono { color: var(--bar-1); font-weight: 700; }
.g-linha.p1 .g-titulo .mono { color: var(--bar-2); font-weight: 600; }
.g-linha.p2 .g-titulo .mono { color: var(--bar-3); }
.g-linha.p3 .g-titulo .mono { color: var(--bar-4); }

.g-pista { position: relative; display: grid; }
.g-cel { border-right: 1px solid var(--grid); }
.g-cel.fim-grupo { border-right-color: var(--grid-strong); }
.g-cel.agora { background: oklch(0.5 0.165 265 / .07); }

.g-mes {
  text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3);
  border-right: 1px solid var(--grid-strong); padding: 4px 0 2px;
}
.g-sem {
  text-align: center; font-size: 10px; color: var(--ink-faint);
  border-right: 1px solid var(--grid); padding-bottom: 3px;
}
.g-sem.fim-grupo { border-right-color: var(--grid-strong); }
.g-sem.agora, .g-mes.agora { background: oklch(0.5 0.165 265 / .12); color: var(--primary); font-weight: 700; }

.g-barra {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 15px; border-radius: 4px; background: var(--cor-barra, var(--bar-3));
  display: flex; align-items: center; padding: 0 5px;
  font-size: 10px; color: #fff; overflow: hidden;
}
/* A altura também conta a hierarquia: o objectivo é uma faixa grossa, a tarefa
   é um traço fino. Ao passar os olhos pelo Gantt vê-se a estrutura sem ler. */
.b0 { --cor-barra: var(--bar-1); height: 19px; border-radius: 5px; }
.b1 { --cor-barra: var(--bar-2); height: 16px; }
.b2 { --cor-barra: var(--bar-3); height: 14px; }
.b3 { --cor-barra: var(--bar-4); height: 12px; }
.b4 { --cor-barra: var(--bar-5); height: 10px; }
/* Uma barra deduzida do que está por baixo já não se distingue de uma pintada
   no Excel: eram duas categorias na legenda para uma diferença que não muda
   nada para quem lê o cronograma — a linha decorre naquelas semanas, e é isso
   que interessa saber. */
.g-barra.herdada { opacity: .55; height: 11px; }
.g-barra.utilizador { --cor-barra: var(--coral); }
.g-barra.feito { --cor-barra: var(--ok); }

/* Numa tarefa a cor é o prazo, não o nível: verde tem folga, âmbar está a
   chegar, vermelho já falhou. É a mesma linguagem das bolas e dos alfinetes, e
   é o que faz o diagrama responder à pergunta que se lhe faz. */
.g-barra.pb-ok     { --cor-barra: var(--ok); }
.g-barra.pb-perto  { --cor-barra: var(--urg-urgente); }
.g-barra.pb-atraso { --cor-barra: var(--urg-atraso); }
.g-barra.pb-feito  { --cor-barra: var(--ok); opacity: .5; }

/* O que a execução esticou para lá do planificado. Riscado, mas sereno: com a
   cor e o padrão de um alarme, o desvio gritava mais alto do que as tarefas
   atrasadas a que a cor quente pertence — e uma barra que grita em todo o lado
   deixa de se ver. Fica um tom de tinta apagado, que se distingue da parte
   prevista sem competir com o vermelho. */
.g-barra.desvio {
  --cor-barra: var(--desvio);
  background:
    repeating-linear-gradient(135deg, oklch(1 0 0 / .22) 0 3px, transparent 3px 8px),
    var(--desvio);
  opacity: .9;
  border-radius: 0 4px 4px 0;
}
.legenda-gantt .l-desvio {
  width: 16px; height: 7px; border-radius: 3px;
  background:
    repeating-linear-gradient(135deg, oklch(1 0 0 / .28) 0 2px, transparent 2px 6px),
    var(--desvio);
}

/* O prazo é uma data, não uma janela: um ponto na semana em que cai. */
/* O prazo é uma data, não uma janela: um alfinete na semana em que cai. Tem de
   se distinguir da barra por baixo dele — senão escrever um prazo continua a
   não se ver, que é o que acontecia com um ponto da cor da tinta. */
.g-prazo {
  position: absolute; top: 50%; z-index: 4;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--coral); border: 2.5px solid var(--surface); box-sizing: content-box;
  box-shadow: 0 0 0 1px oklch(0.63 0.16 33 / .45);
}
.g-prazo.de-baixo {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  box-shadow: none; opacity: .72;
}

/* A cor de uma marca no diagrama diz uma coisa só: como está o calendário
   daquele ponto. Vermelho já falhou, amarelo está a chegar, verde tem folga.
   Antes eram todas da cor do nível, e um prazo já ultrapassado tinha o mesmo
   ar de um que ainda nem começou. */
.pz-atraso { background: var(--urg-atraso); box-shadow: 0 0 0 1px oklch(0.52 0.19 25 / .5); }
.pz-perto  { background: var(--urg-urgente); box-shadow: 0 0 0 1px oklch(0.6 0.17 48 / .45); }
.pz-ok     { background: var(--ok); box-shadow: 0 0 0 1px oklch(0.52 0.125 152 / .4); }
.pz-feito  { background: var(--ok); opacity: .42; box-shadow: none; }

/* Só com data de fim não há duração para desenhar: bola na semana em que
   acontece. Uma barra de uma semana lia-se como uma duração inventada. */
/* A cor vem sempre da classe `pz-*` — como está o calendário deste ponto —, e
   por isso a regra base não pinta nada: um fundo aqui ganhava-lhe por ordem no
   ficheiro e punha a bola azul quando ela devia estar verde. */
.g-bola {
  position: absolute; top: 50%; z-index: 3;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  border: 2.5px solid var(--surface); box-sizing: content-box;
}
.g-bola.pz-feito { opacity: .45; }

.legenda-gantt {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-faint); flex-wrap: wrap;
}
.legenda-gantt b { display: inline-block; flex: none; }
.legenda-gantt b + b { margin-left: 8px; }
.legenda-cores {
  display: inline-flex; align-items: center; gap: 4px;
  padding-right: 9px; margin-right: 3px; border-right: 1px solid var(--line);
}
.legenda-cores b { width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; box-shadow: none !important; }
.legenda-cores b:first-child { margin-left: 0; }
.campo-ancora.a-confirmar input { border-color: var(--urg-alta); background: var(--urg-alta-bg); }
.campo-ancora.a-confirmar .fraco { font-size: 10.5px; color: var(--urg-alta); }
.g-mes-real {
  margin-left: 5px; font-size: 9.5px; font-weight: 400;
  color: var(--ink-faint); letter-spacing: .01em;
}
.g-mes.agora .g-mes-real { color: inherit; }

.campo-ancora {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-faint);
}
.campo-ancora input {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 3px 6px; font: inherit; font-size: 12px;
  color: var(--ink);
}

/* --- quadro: a hierarquia do ficheiro, aberta ----------------------------
   O quadro não inventa um agrupamento seu. É a árvore do cronograma —
   objectivo › sub-objectivo › actividade — e as tarefas estão penduradas onde
   estão de facto. A cor da barra da esquerda é a mesma do nível no cronograma.
   ------------------------------------------------------------------------ */

.colunas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }

.ramo {
  border: 1px solid var(--line); border-left: 4px solid var(--cor-ramo, var(--line-strong));
  border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: 12px;
}
.ramo.r0 { --cor-ramo: var(--bar-1); }
.ramo.r1 { --cor-ramo: var(--bar-2); }
.ramo.r2 { --cor-ramo: var(--bar-3); }
.ramo.r3 { --cor-ramo: var(--bar-4); }
.ramo.r4 { --cor-ramo: var(--bar-5); }
/* Os três níveis tinham o mesmo fundo do ecrã e uns dos outros, e por isso não
   se via onde acabava um objectivo e começava o seguinte. Cada um tem agora o
   seu papel: o objectivo é uma folha clara pousada no fundo quente, o
   sub-objectivo é papel quente por dentro dela, e a actividade volta ao claro.
   Nenhum deles é da cor do fundo da aplicação. */
.ramo.r0 { background: var(--surface); }
.ramo.r1 { background: var(--surface-2); }
.ramo.r2 { background: var(--surface); }
.ramo.r3 { background: var(--surface-2); }

/* E respiram. Estavam encostados uns aos outros, e três cabeçalhos seguidos
   liam-se como um bloco só. */
.ramo .ramo { margin-top: 12px; }
.ramo-corpo > .ramo:first-child { margin-top: 10px; }

/* A que objectivo é que isto pertence tem de se ver a meio da página, depois
   de rolar por três actividades. A barra lateral fina não chegava: o cabeçalho
   de um objectivo é uma faixa pintada, o de uma actividade é papel. */
.ramo.r0 { border-left-width: 5px; box-shadow: var(--sombra-1); margin-bottom: 18px; }
.ramo.r0 > .ramo-cab {
  background: var(--primary-bg);
  border-bottom: 1px solid oklch(0.42 0.175 285 / .22);
  border-radius: 9px 9px 0 0;
  position: sticky; top: 0; z-index: 5;
}
.ramo.r0.fechado > .ramo-cab { border-radius: 9px; border-bottom-color: transparent; }
.ramo.r0 > .ramo-cab .ramo-tit { color: var(--ink); }
.ramo.r0 > .ramo-cab .ramo-conta { color: var(--ink-3); }
/* O sub-objectivo fica entre os dois: pintado de papel quente, mais fundo do
   que o corpo onde vive, para não competir com o azul do objectivo nem se
   confundir com ele. */
.ramo.r1 > .ramo-cab {
  background: oklch(0.895 0.033 68);
  border-bottom: 1px solid oklch(0.80 0.03 66);
  border-radius: 9px 9px 0 0;
}
.ramo.r1.fechado > .ramo-cab { border-radius: 9px; border-bottom-color: transparent; }
/* A actividade é a mais baixa das três e leva o tom mais leve — um sopro do
   turquesa que a barra dela tem no cronograma, para os dois sítios dizerem a
   mesma coisa. */
.ramo.r2 > .ramo-cab {
  background: oklch(0.945 0.028 198);
  border-bottom: 1px solid oklch(0.87 0.04 198);
  border-radius: 9px 9px 0 0;
}
.ramo.r2.fechado > .ramo-cab { border-radius: 9px; border-bottom-color: transparent; }

.ramo-cab { display: flex; align-items: center; gap: 9px; padding: 9px 12px; min-width: 0; }
.ramo-cab .seta { cursor: pointer; }
.ramo-tit {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-display); font-size: 13px; letter-spacing: -.02em;
}
.ramo-cab .btn-mini { flex: none; white-space: nowrap; margin-left: 0; }
.ramo-cab .etiqueta, .ramo-cab .mono { flex: none; white-space: nowrap; }
.ramo.r0 > .ramo-cab .ramo-tit { font-size: 15px; }
.ramo.r1 > .ramo-cab .ramo-tit { font-size: 13.5px; }
.ramo.r2 > .ramo-cab .ramo-tit,
.ramo.r3 > .ramo-cab .ramo-tit { font-family: var(--f-texto); font-weight: 600; letter-spacing: 0; }
.ramo-conta { margin-left: auto; flex: none; white-space: nowrap; font-size: 11.5px; color: var(--ink-faint); }
.ramo-conta .arde { color: var(--urg-urgente); }
.ramo-corpo { padding: 0 12px 12px; }
.ramo.fechado > .ramo-cab { padding-bottom: 9px; }
.ramo-vazio { margin: 0 0 8px; font-size: 12px; color: var(--ink-faint); }
.ramo .coluna { background: var(--surface); }
.ramo .ramo .coluna { background: var(--surface-2); }

/* Criar uma tarefa sem dizer quando ela acontece não é criar uma tarefa: é
   deixar mais uma barra errada no cronograma para alguém corrigir depois. */
.nova-tarefa {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 9px; padding: 8px 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--surface);
}
.nova-tarefa input[data-novo="titulo"] {
  flex: 1 1 240px; min-width: 150px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 5px 9px; font: inherit; font-size: 12.5px;
}
.nova-tarefa label {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 11.5px; color: var(--ink-faint);
}
.nova-tarefa select {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: 4px 6px; font: inherit; font-size: 12px;
  max-width: 190px;
}
.nova-tarefa .nota-falta,
.nova-tarefa .nota-datas { flex-basis: 100%; font-size: 11px; color: var(--ink-faint); }
.nova-tarefa.em-falta { border-color: var(--danger); border-style: solid; background: var(--urg-atraso-bg); }
.nova-tarefa.em-falta input[type="date"] { border-color: var(--danger); }
.nova-tarefa.em-falta .nota-falta,
.nova-tarefa.em-falta .nota-datas { color: var(--danger); font-weight: 600; }

/* --- quando: calendário à esquerda, semana do cronograma à direita --------
   Escolhe-se a data como se escolhe um prazo. A semana em que ela cai aparece
   logo ao lado, porque é isso que o cronograma desenha e é nisso que o Excel
   do projecto fala.
   ------------------------------------------------------------------------ */

.quando { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.campo-data { display: flex; flex-direction: column; gap: 3px; min-width: 172px; }
.campo-data label { font-size: 11px; color: var(--ink-faint); }
.campo-data input[type="date"] {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: 5px 8px; font: inherit; font-size: 12.5px;
  color: var(--ink);
}
.campo-data .traduz { font-size: 11px; color: var(--primary); min-height: 14px; font-weight: 500; }
.campo-data .traduz.fora { color: var(--danger); }
.sem-ancora {
  font-size: 12px; color: var(--ink-3); background: var(--urg-alta-bg);
  border: 1px solid var(--urg-alta); border-radius: var(--r-md); padding: 8px 10px; margin: 0;
}
.sem-ancora .campo-ancora { margin-left: 6px; }

/* --- quem valida: escolhe-se de quem já anda no projecto ------------------ */

.validadores { display: flex; flex-direction: column; gap: 5px; }
.validadores .chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: 4px 6px;
}
.validadores .chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-bg); color: var(--primary); font-size: 11.5px; font-weight: 600;
  border-radius: 999px; padding: 2px 4px 2px 9px;
}
.validadores .chip button {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 3px; opacity: .7;
}
.validadores .chip button:hover { opacity: 1; }
.validadores .chips input {
  flex: 1 1 110px; min-width: 90px; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; padding: 3px 2px; outline: none;
}
.validadores .sugestoes { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; }
.validadores .sugestoes button {
  border: 1px dashed var(--line-strong); background: var(--surface);
  border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 11px;
  color: var(--ink-3); cursor: pointer;
}
.validadores .sugestoes button:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }

.seta {
  border: 0; background: transparent; padding: 0; width: 16px; flex: none;
  color: var(--ink-faint); font-size: 10px; line-height: 1;
}
.btn-mini { padding: 1px 8px; font-size: 11px; margin-left: 6px; }

/* --- validação, dentro do quadro ---------------------------------------- */

.bloco-validacao { margin-bottom: 20px; }
.bloco-validacao h3 {
  font-family: var(--f-display); font-size: 14px; letter-spacing: -.02em; margin: 0 0 2px;
}
.bloco-validacao h3 b { color: var(--primary); }
.bloco-validacao > p { margin: 0 0 10px; font-size: 12px; }
.bloco-validacao.sem-dono h3 b { color: var(--urg-urgente); }
.bloco-validacao.outras { opacity: .72; }
.quem-valida { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.quem-valida .fraco { font-size: 11px; flex: none; }
.quem-valida input {
  flex: 1 1 auto; max-width: 380px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 4px 8px; font: inherit; font-size: 12px;
}
.conta-aba {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 5px;
  border-radius: 999px; background: var(--primary); color: var(--primary-ink);
  font-size: 10px; font-weight: 700; text-align: center;
}
.grupo-botoes button[aria-pressed="true"] .conta-aba { background: var(--bg); color: var(--ink); }
.rodape .valida { color: var(--primary); font-weight: 600; }
.rodape .valida.sem-dono { color: var(--urg-urgente); }

.reuniao-itens { margin: 4px 0 6px; }

/* --- prioridade e urgência ----------------------------------------------- */

.pri {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--surface-3); color: var(--ink-3);
}
.pri.p-atrasado { background: var(--urg-atraso-bg);  color: var(--urg-atraso); }
.pri.p-urgente  { background: var(--urg-urgente-bg); color: var(--urg-urgente); }
.pri.p-alta     { background: var(--urg-alta-bg);    color: var(--urg-alta); }

.cartao.u-atrasado, .item-reuniao.u-atrasado { border-left: 3px solid var(--urg-atraso); }
.cartao.u-urgente,  .item-reuniao.u-urgente  { border-left: 3px solid var(--urg-urgente); }
.cartao.u-alta,     .item-reuniao.u-alta     { border-left: 3px solid var(--urg-alta); }
/* A urgência ganha à marca de "está a decorrer agora": quem olha para o quadro
   precisa de ver primeiro o que arde. */
.cartao.u-atrasado.no-periodo, .cartao.u-urgente.no-periodo, .cartao.u-alta.no-periodo { border-left-width: 3px; }

.cartao.minha { box-shadow: var(--sombra-1), inset 0 0 0 1px var(--primary); }
.cartao .rodape .parte {
  border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-faint);
  border-radius: 999px; padding: 0 7px; font-size: 10.5px;
}
.cartao .rodape .parte:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }
.item-reuniao.minha { box-shadow: inset 0 0 0 1px var(--primary); }
.cartao .rodape .quem.eu { background: var(--ink); }

/* --- ligações e caixas de fala ------------------------------------------- */

.ligacao {
  border: 0; background: transparent; padding: 0; text-align: left;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligacao:hover { text-decoration-color: var(--primary); color: var(--primary); }
.sublista .falar {
  border: 0; background: transparent; color: var(--ink-faint);
  font-size: 11px; padding: 0 4px; margin-left: auto;
}
.sublista .falar:hover { color: var(--primary); }
.sublista .falar + .apagar { margin-left: 0; }
.sublista li.fala-sub { padding: 0 0 6px 26px; }

/* --- @menções ------------------------------------------------------------ */

.acoes-rapidas { position: relative; }
.mencoes {
  position: absolute; z-index: 30; left: 0; top: 100%; margin-top: 3px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--sombra-2); overflow: hidden; min-width: 170px;
}
.mencoes button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 5px 11px; font-size: 12.5px;
}
.mencoes button:hover { background: var(--primary-bg); color: var(--primary); }

/* --- contador na navegação ----------------------------------------------- */

.conta-nav {
  display: inline-block; margin-left: 6px; min-width: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--urg-urgente); color: var(--primary-ink);
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}
.vistas button[aria-current="true"] .conta-nav { background: var(--bg); color: var(--ink); }
.coluna {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 9px; min-height: 90px;
}
.coluna.alvo-drop { border-color: var(--primary); background: var(--primary-bg); }
.coluna h3 {
  margin: 2px 4px 9px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint); display: flex; gap: 7px;
}
.coluna h3 b { color: var(--ink-3); }

.cartao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 10px; margin-bottom: 8px;
  box-shadow: var(--sombra-1); cursor: pointer;
}
.cartao:hover { border-color: var(--line-strong); }
.cartao.arrastando { opacity: .4; }
.cartao .trilho {
  font-size: 10.5px; color: var(--ink-faint); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao .tit { font-weight: 500; font-size: 13px; line-height: 1.32; }
.cartao .rodape { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; font-size: 11px; color: var(--ink-faint); }
.cartao .rodape .quem {
  background: var(--primary); color: var(--primary-ink); font-weight: 600;
  border-radius: 999px; width: 19px; height: 19px; display: grid; place-items: center; font-size: 9.5px;
}
.cartao.no-periodo { border-left: 3px solid var(--primary); }

/* --- reunião ------------------------------------------------------------- */

.reuniao { max-width: 900px; margin: 0 auto; }
.reuniao-cab {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-1);
}
.reuniao-cab .quando {
  font-family: var(--f-display); font-size: 22px; letter-spacing: -.026em;
  display: flex; align-items: baseline; gap: 10px;
}
.contas { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.conta {
  font-size: 11.5px; color: var(--ink-3); background: var(--surface-2);
  border-radius: 999px; padding: 2px 9px;
}
.conta b { color: var(--ink); }
.conta.entra  { background: var(--primary-bg); color: var(--primary); }
.conta.entra b { color: var(--primary); }
.conta.fecha  { background: var(--ok-bg); color: var(--ok); }
.conta.fecha b { color: var(--ok); }
.conta.atraso { background: var(--warn-bg); color: var(--warn); }
.conta.atraso b { color: var(--warn); }

/* `marca-momento`, não `marca`: a marca da aplicação, lá em cima no cabeçalho,
   também se chamava `.marca` e ficava a herdar isto — 10px e em maiúsculas. */
.marca-momento {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.marca-momento.entra  { background: var(--primary-bg); color: var(--primary); }
.marca-momento.fecha  { background: var(--ok-bg); color: var(--ok); }
.marca-momento.atraso { background: var(--warn-bg); color: var(--warn); }

.item-reuniao.atrasado { border-left: 3px solid var(--warn); }

.ficou-atras {
  border: 1px solid var(--warn); background: var(--warn-bg);
  border-radius: var(--r-lg); padding: 11px 14px; margin-bottom: 20px;
}
.ficou-atras > summary { cursor: pointer; font-size: 13px; color: var(--warn); font-weight: 600; }
.ficou-atras .item-reuniao { background: var(--surface); }

/* Criar uma tarefa e não a ver na reunião parecia a aplicação a demorar. Não
   era: estava noutra semana, ou ainda sem datas. Passa a estar à vista. */
.por-datar, .noutra-semana {
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: 11px 14px; margin-bottom: 20px; background: var(--surface);
}
.por-datar > summary,
.noutra-semana > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.por-datar .item-reuniao { background: var(--surface-2); }
.noutra-semana .sublista li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.item-reuniao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 9px;
}
.item-reuniao .linha1 { display: flex; align-items: flex-start; gap: 10px; }
.item-reuniao .linha1 .tit { font-weight: 500; flex: 1; }
/* Na reunião a tarefa abre-se ao lado, como no quadro: o que se discute é a
   tarefa inteira, não a linha que cabe aqui. */
.item-reuniao .tit-abre {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 0; font: inherit; font-weight: 500;
  color: var(--ink); cursor: pointer;
}
.item-reuniao .tit-abre:hover { text-decoration: underline; text-underline-offset: 2px; }
.item-reuniao .linha1 > .btn-mini { flex: none; margin-left: 0; }
.item-reuniao .trilho { font-size: 10.5px; color: var(--ink-faint); margin-bottom: 3px; }

.segmentado { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; flex: none; }
.segmentado button { border: 0; background: var(--surface); padding: 3px 9px; font-size: 11.5px; color: var(--ink-faint); }
.segmentado button + button { border-left: 1px solid var(--line); }
.segmentado button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }

.sublista { margin: 9px 0 0; padding: 0 0 0 2px; list-style: none; }
.sublista li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.sublista input[type=checkbox] { accent-color: var(--primary); }
.sublista .feita { text-decoration: line-through; color: var(--ink-faint); }
.sublista .apagar { margin-left: auto; border: 0; background: transparent; color: var(--ink-faint); font-size: 15px; line-height: 1; padding: 0 4px; }
.sublista .apagar:hover { color: var(--danger); }

.acoes-rapidas { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.acoes-rapidas input {
  flex: 1; min-width: 190px; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 5px 9px; font-size: 12.5px;
}
.acoes-rapidas input:focus { background: var(--surface); }

.comentarios { margin-top: 9px; border-top: 1px dashed var(--line); padding-top: 8px; }
.comentario { font-size: 12.5px; padding: 3px 0; color: var(--ink-2); }
.comentario .quem { font-weight: 600; color: var(--ink); }
.comentario .qd { font-size: 10.5px; color: var(--ink-faint); }
.comentario .mencao { color: var(--primary); font-weight: 600; }

/* --- gaveta -------------------------------------------------------------- */

.gaveta { position: fixed; inset: 0; z-index: 60; }
.gaveta-fundo { position: absolute; inset: 0; background: oklch(0.3 0.04 50 / .28); }
.gaveta-painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--sombra-2); overflow: auto; padding: 18px 20px 60px;
}
.gaveta-painel h2 { font-family: var(--f-display); font-size: 18px; letter-spacing: -.024em; margin: 6px 0 4px; }
.gaveta-painel h2 .btn-mini { vertical-align: middle; margin-left: 8px; }
/* O caminho até aqui passava por baixo do × e as duas coisas liam-se uma por
   cima da outra. O botão de fechar tem o seu canto, e o texto acaba antes
   dele. */
.gaveta-painel .trilho {
  font-size: 11.5px; color: var(--ink-faint); margin-bottom: 10px;
  padding-right: 34px;
}

/* Um título de cronograma tem gralhas e frases em telegrama. Corrigi-las era
   reimportar o ficheiro inteiro; agora escreve-se aqui, em qualquer nível. */
.editar-titulo { margin: 6px 0 4px; }
.editar-titulo textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: var(--f-display); font-size: 17px; letter-spacing: -.02em;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--primary); border-radius: var(--r-sm); padding: 6px 8px;
}
.editar-titulo textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-bg); }
.acoes-titulo { display: flex; gap: 7px; margin-top: 7px; }
.gaveta-secao { margin-top: 18px; }
.gaveta-secao > h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); margin: 0 0 7px;
}
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.campos label { display: block; font-size: 11px; color: var(--ink-faint); }
.campos input, .campos select, .gaveta-painel textarea {
  width: 100%; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 5px 8px; font-size: 13px; margin-top: 2px;
}
.gaveta-painel textarea { min-height: 68px; resize: vertical; }
.fechar-gaveta { position: absolute; top: 12px; right: 16px; border: 0; background: transparent; font-size: 20px; color: var(--ink-faint); }

/* --- aviso --------------------------------------------------------------- */

.aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 9px 16px;
  border-radius: 999px; font-size: 13px; box-shadow: var(--sombra-2); z-index: 90;
}
.aviso.mau { background: var(--danger); }

/* --- notificações: o sino e a lista de quem te chamou ---------------------
   Um @nome num comentário só chamava alguém se essa pessoa por acaso voltasse
   àquela tarefa. O contador no topo é o que faz a menção existir para quem foi
   chamado — como o contador da validação, ao lado do Quadro.
   ------------------------------------------------------------------------ */

.sino-caixa { position: relative; }
.sino {
  position: relative; border: 1px solid transparent; background: transparent;
  border-radius: var(--r-sm); padding: 4px 7px; font-size: 15px; line-height: 1;
  cursor: pointer; color: var(--ink-3);
}
.sino:hover { background: var(--surface-2); border-color: var(--line); }
.sino.tem { color: var(--ink); }
.sino .conta-nav { position: absolute; top: -3px; right: -4px; }

.painel-mencoes {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  width: min(400px, 92vw); max-height: 62vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sombra-2); padding: 12px 14px;
}
.mencoes-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; font-size: 13px;
}
.lista-mencoes { list-style: none; margin: 0; padding: 0; }
.lista-mencoes li { border-top: 1px solid var(--line-soft); }
.lista-mencoes li:first-child { border-top: 0; }
.lista-mencoes button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 6px; border-radius: var(--r-sm); cursor: pointer; font: inherit;
}
.lista-mencoes button:hover { background: var(--surface-2); }
.lista-mencoes .quem { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.lista-mencoes .onde {
  display: block; font-size: 11.5px; color: var(--primary); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-mencoes .txt { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.lista-mencoes .qd { display: block; font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }
/* Por ler puxa o olho; lida fica só a fazer companhia ao histórico. */
.lista-mencoes li:not(.lida) button { border-left: 3px solid var(--primary); }
.lista-mencoes li.lida button { opacity: .55; }

/* --- organização ---------------------------------------------------------
   A entidade que corre os projectos. O nome, o NIF e a morada são os mesmos em
   todos eles e andavam a ser escritos outra vez em cada candidatura.
   ------------------------------------------------------------------------ */

.organizacao { max-width: 940px; margin: 0 auto; }
.organizacao > h2 { font-family: var(--f-display); font-size: 21px; letter-spacing: -.024em; margin: 0 0 6px; }
.caixa-org {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 20px;
}

/* --- notas da reunião ----------------------------------------------------
   O que se escreve enquanto se fala, e que não é de nenhuma tarefa. Acompanha
   a página ao rolar: uma reunião não pára para se ir buscar a caixa lá acima.
   ------------------------------------------------------------------------ */

.reuniao-palco {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px;
  align-items: start; max-width: 1240px; margin: 0 auto;
}
.reuniao-palco > .reuniao { max-width: none; margin: 0; }
.notas-reuniao { position: sticky; top: 14px; }
.notas-dentro {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px; box-shadow: var(--sombra-1);
}
.notas-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 7px; font-size: 13px;
}
.notas-cab .fraco { font-size: 11.5px; }
.notas-reuniao textarea {
  width: 100%; box-sizing: border-box; min-height: 44vh; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 8px 9px; font: inherit; font-size: 13px;
  color: var(--ink); line-height: 1.5;
}
.notas-reuniao textarea:focus { outline: none; background: var(--surface); border-color: var(--primary); }
.notas-estado { font-size: 10.5px; margin: 5px 0 8px; }
.notas-impressas { display: none; }
@media (max-width: 1080px) {
  .reuniao-palco { grid-template-columns: minmax(0, 1fr); }
  .notas-reuniao { position: static; }
  .notas-reuniao textarea { min-height: 160px; }
}

/* --- papel ---------------------------------------------------------------
   No fim da reunião guarda-se o que ficou. Sai da própria página, pela
   impressão do browser: o que se vê é o que fica, e não uma segunda maneira de
   desenhar a acta que depois divergia do ecrã.
   ------------------------------------------------------------------------ */

@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .topo, .faixa-projecto, .gaveta, .aviso, .painel-mencoes { display: none !important; }
  .reuniao-cab .btn, .segmentado, .acoes-rapidas, .nova-tarefa,
  .item-reuniao .btn-mini, .ramo-cab .btn-mini, .ramo-cab .seta,
  .sublista .apagar, .sublista .falar, #pdf-reuniao, .notas-estado,
  .notas-reuniao textarea { display: none !important; }
  main { padding: 0; }
  .limite { max-width: none; padding: 0; }
  .reuniao-palco { display: block; max-width: none; }
  .notas-reuniao { position: static; margin-top: 16px; break-inside: avoid; }
  .notas-dentro { box-shadow: none; border: 1px solid #bbb; }
  /* Uma caixa de texto imprime só o bocado à vista; o mesmo texto em prosa sai
     inteiro. */
  .notas-impressas { display: block; white-space: pre-wrap; font-size: 12px; line-height: 1.55; }
  .ramo, .item-reuniao, .notas-dentro { break-inside: avoid; }
  .ramo.r0 > .ramo-cab { position: static; }
  details { break-inside: avoid; }
  details > summary { list-style: none; }
}

/* O cabeçalho da acta: só existe no papel. */
.cabecalho-papel { display: none; }
@media print {
  .cabecalho-papel {
    display: block; margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1.5px solid #333;
  }
  .cabecalho-papel b { display: block; font-family: var(--f-display); font-size: 15px; }
  .cabecalho-papel span { font-size: 11px; color: #555; }
}