/* Magical Tasks — folha de estilo unica.
 *
 * Tipos de letra do sistema (sem webfonts: carregam a zero e sao os mais
 * legiveis no telemovel). Claro e escuro automaticos.
 *
 * As duas densidades — normal e compacto — sao o mesmo layout com variaveis
 * diferentes, nao dois CSS. body.compacto muda ~6 variaveis e a grelha inteira
 * fica mais densa.
 */

:root {
  --fundo: #f7f7f5;
  --superficie: #ffffff;
  --superficie-2: #f0f0ed;
  --texto: #1c1c1a;
  --texto-2: #6b6b66;
  --texto-3: #9a9a94;
  --contorno: #e4e4e0;
  --contorno-forte: #d0d0ca;
  --acento: #4a5fd0;
  --acento-fundo: #eceffb;
  --selecao: #eef1fd;
  --destaque: #fff6d8;

  /* Cor de identidade da barra de topo (escolhivel no menu; o JS sobrepoe esta
     omissao com a escolha guardada). Temporario, ate decidirmos a definitiva. */
  --barra-topo: #4a5fd0;
  --barra-topo-texto: #fff;

  --max: #c0392b;
  --alot: #d35400;
  --more: #b8860b;
  --normal: #4a5fd0;
  --less: #6b8f71;
  --little: #7f8c8d;
  --none: #a9a9a4;

  --perigo: #c0392b;
  --ok: #2f7d5b;

  /* Densidade normal */
  --linha-altura: 34px;
  --celula-x: 10px;
  --celula-y: 6px;
  --tipo: 14px;
  --tipo-pequeno: 12px;
  --raio: 6px;
  /* Altura fixa do topo: e a ancora do sticky do cabecalho da tabela. Calcular
     "mais ou menos" deixava uma fenda por onde se via as linhas a passar. */
  --topo-altura: 48px;
  --tabs-altura: 36px;
  --painel-largura: 420px;
  /* Recuo de cada nivel de agrupamento. Um passo so, usado pelos cabecalhos e
     pelas linhas, para a hierarquia se ler sem se pensar nela. */
  --recuo: 11px;
}

body.compacto {
  --linha-altura: 24px;
  --celula-x: 6px;
  --celula-y: 2px;
  --tipo: 12.5px;
  --tipo-pequeno: 11px;
  --raio: 4px;
  --topo-altura: 42px;
  --tabs-altura: 32px;
  --painel-largura: 380px;
  --recuo: 10px;
}

/* Terceiro nivel: o que cresce e a LETRA, nao so o espaco. Uma lista com mais
   ar mas com a mesma letra pequena nao se le melhor — le-se igual, com menos
   tarefas por ecra. */
body.amplo {
  --linha-altura: 40px;
  --celula-x: 12px;
  --celula-y: 8px;
  --tipo: 16px;
  --tipo-pequeno: 13.5px;
  --raio: 7px;
  --topo-altura: 52px;
  --tabs-altura: 40px;
  --painel-largura: 480px;
  --recuo: 13px;
}

/* A paleta escura vive num atributo e nao numa media query: o js/tema.js
   resolve "auto" para claro/escuro antes do primeiro pixel e escreve aqui. Uma
   media query em paralelo seria uma segunda fonte de verdade para a mesma cor —
   e as duas divergiriam a primeira vez que eu ajustasse uma. */
[data-tema="escuro"] {
    --fundo: #141413;
    --superficie: #1e1e1c;
    --superficie-2: #262624;
    --texto: #eeeeea;
    --texto-2: #9a9a94;
    --texto-3: #6f6f6a;
    --contorno: #2e2e2b;
    --contorno-forte: #3d3d39;
    --acento: #8fa2ff;
    --acento-fundo: #232840;
    --selecao: #23273a;
    --destaque: #3a3320;

    --max: #ff7b6b;
    --alot: #ff9f5a;
    --more: #e8c25a;
    --normal: #8fa2ff;
    --less: #8fc79a;
    --little: #a5b1b2;
    --none: #6f6f6a;
    --perigo: #ff7b6b;
    --ok: #57b98a;
}

* { box-sizing: border-box; }

/* Os controlos nativos (checkboxes, inputs) seguem o color-scheme. Sem isto, um
   Android com o SISTEMA em escuro desenhava a checkbox com fundo preto mesmo no
   tema claro da app: prende-se o color-scheme ao tema resolvido, nao ao do SO. */
[data-tema="claro"] { color-scheme: light; }
[data-tema="escuro"] { color-scheme: dark; }

/* Checkboxes: um pouco maiores e na cor de acento. */
input[type="checkbox"] { accent-color: var(--acento); width: 16px; height: 16px; }

/* O atributo hidden do HTML vale display:none, MAS vem da folha do browser: uma
   regra de autor com display ganha-lhe sempre. Foi o que aconteceu com o ecra
   de entrada (.entrada tem display:flex): depois do login ficava marcado como
   hidden e continuava visivel, a ocupar um ecra inteiro por cima da app.
   Esta regra fecha a classe de problema toda, nao so aquele caso. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font: var(--tipo)/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Sem isto, o iOS mantem o double-tap-to-zoom e um atraso de 300 ms no
     toque — os dois estragam a sensacao de app nativa. */
  touch-action: manipulation;
}

button, input { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ entrada */
.entrada {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
}

.entrada-marca { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }

.entrada-caixa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: 10px;
}

/* A COR faz parte do par: um campo com fundo do tema e cor por omissao do
   browser da texto preto sobre fundo escuro — ilegivel, e foi o que aconteceu
   na descricao e nos comentarios. O `input, textarea, select` abaixo e a rede
   de seguranca para o proximo campo que eu esquecer. */
input, textarea, select { color: var(--texto); }

.entrada-email, .campo-nova, .campo-procura, .pop-numero, .pop-novo, .pop-hora,
.celula-input {
  padding: 7px 9px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--contorno-forte);
  border-radius: var(--raio);
  outline: none;
}

/* O iOS faz zoom automatico ao focar um campo com fonte < 16px. Nos ecras de
   toque forcamos 16px nos campos editaveis para o evitar, sem mexer na
   densidade (--tipo) do ambiente de trabalho, onde o zoom nao existe. */
@media (pointer: coarse) {
  .entrada-email, .campo-nova, .campo-procura, .pop-numero, .pop-novo,
  .pop-hora, .celula-input, textarea, input { font-size: 16px; }
}

/* O texto de sugestao tem de se distinguir do texto escrito. */
input::placeholder, textarea::placeholder { color: var(--texto-3); }

.entrada-email:focus, .campo-nova:focus, .campo-procura:focus, .celula-input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-fundo);
}

.entrada-nota { margin: 0; color: var(--texto-2); font-size: var(--tipo-pequeno); }

.botao-principal {
  padding: 9px 14px;
  background: var(--acento);
  color: #fff;
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
}

.botao-principal:hover { filter: brightness(1.08); }

/* --------------------------------------------------------------------- topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topo-altura);
  padding: 0 12px;
  /* Barra de topo com a cor de identidade da app (escolhivel no menu da conta,
     var --barra-topo). Texto/controlos a claro por cima. */
  background: var(--barra-topo);
  color: var(--barra-topo-texto);
}

/* Os controlos do topo seguem a cor de texto contrastante (clara sobre cor
   escura, escura sobre pastel); os secundarios ficam mais apagados. */
.topo .marca { color: var(--barra-topo-texto); }
.topo .contador, .topo .eu { color: var(--barra-topo-texto); opacity: 0.8; }
.topo .botao-menu, .topo .botao-sino { color: var(--barra-topo-texto); }
.topo .botao-sino.tem-novas { color: var(--barra-topo-texto); }
.topo .botao-menu:hover, .topo .botao-sino:hover {
  background: color-mix(in srgb, var(--barra-topo-texto) 16%, transparent);
  border-color: transparent;
  color: var(--barra-topo-texto);
}

.topo-esquerda, .topo-direita { display: flex; align-items: center; gap: 8px; }
.topo-centro { flex: 1; min-width: 120px; }

.marca { font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.contador, .eu { color: var(--texto-2); font-size: var(--tipo-pequeno); white-space: nowrap; }

.captura { display: flex; align-items: stretch; }
.campo-nova { width: 100%; border-radius: var(--raio) 0 0 var(--raio); }
.campo-procura { width: 170px; }

.captura-ok {
  /* Centrar a seta (estava a fugir para cima) e carregar-lhe a mao: maior e mais
     forte, para dar sensacao de accao. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.captura-ok:hover { filter: brightness(1.08); }
.botao-instalar { border-color: var(--acento); color: var(--acento); }

/* Combo dos modos de criar, colado ao botao ›: o › fica quadrado a direita e o
   ▾ leva o canto arredondado. */
#nova-ok { border-radius: 0; }
.captura-modo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-left-color: rgba(255, 255, 255, 0.3);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.captura-modo:hover { filter: brightness(1.08); }

.botao-topo {
  padding: 6px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto-2);
  cursor: pointer;
  white-space: nowrap;
}

.botao-topo:hover { color: var(--texto); border-color: var(--contorno-forte); }

/* --------------------------------------------------------------------- tabs */
.barra-tabs {
  position: sticky;
  top: var(--topo-altura);
  height: var(--tabs-altura);
  z-index: 15;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 12px;
  background: var(--fundo);
}

/* A risca por baixo da barra. E um ::after posicionado na barra (nao nas tabs):
   como elemento posicionado, pinta POR CIMA do conteudo em fluxo (tabs, setas,
   ⋯), logo a linha atravessa a barra toda. A tab activa e o unico com z-index,
   por isso e a unica que fica por cima e a "corta" — ligando-se-lhe os contornos.
   Sem margens negativas: assim o overflow-x das tabs nao a recorta. */
.barra-tabs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--contorno-forte);
}

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

/* Setas de scroll dos separadores: so aparecem quando ha mais para o lado do
   que cabe (o JS liga/desliga o `hidden`). Clicar rola com animacao. */
.tabs-seta {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 4px;
  background: var(--fundo);
  border: 0;
  color: var(--texto-2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.tabs-seta:hover { color: var(--texto); }

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: none;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  border-radius: var(--raio) var(--raio) 0 0;
  color: var(--texto-2);
  cursor: pointer;
  white-space: nowrap;
}

.tab:hover { background: var(--superficie-2); color: var(--texto); }

/* A tab activa liga-se ao "chrome" da lista (cabecalho de colunas e de grupo):
   mesmo fundo (--superficie-2), contorno em cima e nos lados, nada em baixo. E a
   continuidade dessa cor — nao das tarefas — que faz a ligacao. */
.tab.activa {
  /* z-index para ficar por cima da risca da barra (.barra-tabs::after) e corta-la
     debaixo de si; relative para o z-index valer. */
  position: relative;
  z-index: 1;
  background: var(--superficie-2);
  border-color: var(--contorno-forte);
  border-bottom-color: transparent;
  color: var(--texto);
  font-weight: 600;
}

.tab-conta {
  padding: 0 5px;
  background: var(--superficie-2);
  border-radius: 999px;
  color: var(--texto-3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.tab.activa .tab-conta { background: var(--acento-fundo); color: var(--acento); }
.botao-colapsar { margin-left: auto; }

/* ------------------------------------------------------------------ grupos */
/* O cabecalho de grupo e uma linha da propria tabela — e o que mantem as
   colunas alinhadas de grupo para grupo. */
/* O "chrome" da lista — cabecalho de grupo, cabecalho de colunas (thead) e a tab
   activa — partilha o mesmo fundo (--superficie-2), que contrasta com as tarefas
   (--superficie). E esse contraste que separa o grupo das tarefas: nao ha risca,
   e a mudanca de cor chega e nao "salta" entre mobile e desktop. */
.grelha tr.grupo td {
  height: auto;
  padding: 0;
  background: var(--superficie-2);
}

.grupo-botao {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: var(--celula-y) var(--celula-x);
  background: none;
  border: 0;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  font-size: var(--tipo-pequeno);
}

.grupo-botao:hover { background: var(--contorno); }
.grupo-seta { width: 10px; color: var(--texto-3); }
/* O nome do grupo usa o acento para reforcar a hierarquia visual: o rotulo do
   agrupamento le-se como nivel acima das tarefas (que ficam em --texto). */
.grupo-nome { letter-spacing: 0.01em; color: var(--acento); }

.grupo-conta {
  padding: 0 6px;
  background: var(--superficie-2);
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Cada nivel abaixo do primeiro recua um passo e fica mais discreto, para se
   distinguir sem precisar de linhas nem cores novas. */
.grelha tr.grupo-n2 .grupo-botao {
  padding-left: calc(var(--celula-x) + var(--recuo));
  font-weight: 500;
  color: var(--texto-2);
}

.grelha tr.grupo-n3 .grupo-botao {
  padding-left: calc(var(--celula-x) + var(--recuo) * 2);
  font-weight: 400;
  color: var(--texto-2);
}

/* O grupo vazio (None, Sem prioridade…) continua a ser um agrupamento: mantem
   a cor de acento dos outros rotulos e distingue-se so pelo italico. */
.grelha tr.grupo-vazio .grupo-nome { font-style: italic; }

/* O recuo das tarefas de um grupo e ANTES da caixa de fecho, nao no titulo:
   recuar so o titulo desalinhava-o do cabecalho da coluna. A primeira coluna
   alarga-se nas vistas agrupadas (.agrupada) para caber o recuo, e o cabecalho
   alarga com ela — por isso continua tudo alinhado. */
@media (min-width: 768px) {
  .grelha.agrupada .col-feito { width: calc(24px + var(--recuo) * 1.6); }
  .grelha.agrupada tr.dentro-n1 td.col-feito { padding-left: var(--recuo); }
  .grelha.agrupada tr.dentro-n2 td.col-feito { padding-left: calc(var(--recuo) * 1.4); }
  .grelha.agrupada tr.dentro-n3 td.col-feito { padding-left: calc(var(--recuo) * 1.6); }
}

/* ------------------------------------------------------------------ grelha */
.zona-grelha { padding: 0 0 40vh; }

.grelha {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  /* Shift+clique numa lista e "seleccionar tarefas", nao "seleccionar texto".
     Sem isto, o browser pintava um bloco de texto azul a cada Shift — o
     "soluco". O painel de edicao continua seleccionavel (ver .painel). */
  user-select: none;
}

.grelha thead th {
  position: sticky;
  /* Abaixo do topo E da barra de tabs, senao o cabecalho tapava as tabs. */
  top: calc(var(--topo-altura) + var(--tabs-altura));
  z-index: 10;
  padding: var(--celula-y) var(--celula-x);
  /* Mesmo "chrome" da tab activa e dos cabecalhos de grupo (ver .grupo td). */
  background: var(--superficie-2);
  border-bottom: 1px solid var(--contorno-forte);
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

.grelha thead th.ordenavel { cursor: pointer; }
.grelha thead th.ordenavel:hover { color: var(--texto); }
.grelha thead th.ordenada { color: var(--acento); }

.grelha td {
  height: var(--linha-altura);
  padding: 0 var(--celula-x);
  /* Sem risca entre tarefas: a informacao fica mais densa e o olho segue as
     colunas. O que separa blocos e o cabecalho do grupo, que mantem a sua. */
  overflow: hidden;
  white-space: nowrap;
  /* clip e nao ellipsis: com ellipsis em TODAS as celulas apareciam "..." ao
     lado da caixa de fecho e da pastilha de prioridade, onde nao ha texto
     cortado nenhum — o "..." e do proprio ellipsis a nao ter espaco. */
  text-overflow: clip;
  vertical-align: middle;
}

/* Só onde ha mesmo texto que pode nao caber. */
.grelha td.col-titulo, .grelha td.col-contextos,
.grelha td.col-envolvidos { text-overflow: ellipsis; }

.linha:hover td { background: var(--superficie-2); }
.linha.selecionada td { background: var(--selecao); }

/* Seleccionada em conjunto: mais marcada que a linha activa, porque uma edicao
   vai afectar todas estas. */
.linha.marcada td { background: var(--acento-fundo); }
.linha.marcada td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.linha.destacada td { background: var(--destaque); }
.linha.fechada .titulo-texto { color: var(--texto-3); text-decoration: line-through; }

/* Titulo com marca de recorrencia: o titulo corta com reticencias, o ↻ nunca. */
.titulo-com-marca { display: flex; align-items: center; gap: 5px; min-width: 0; }
.titulo-com-marca .titulo-texto { overflow: hidden; text-overflow: ellipsis; }
.marca-recorrencia { flex: none; color: var(--acento); font-size: 12px; line-height: 1; }

/* A concluir: janela de arrependimento. A linha esmaece e risca o titulo — o
   mesmo aspecto de uma fechada, mas ainda ca esta e ainda da para desmarcar. */
.linha.a-concluir { opacity: 0.55; transition: opacity 0.15s ease-out; }
.linha.a-concluir .titulo-texto { text-decoration: line-through; }

td.editavel { cursor: pointer; }
td.editavel:hover { box-shadow: inset 0 0 0 1px var(--contorno-forte); }
td.em-edicao { box-shadow: inset 0 0 0 2px var(--acento); background: var(--superficie); }

/* Larguras. table-layout: fixed + estas larguras = colunas estaveis, sem
   saltos quando o conteudo muda de tamanho.
   
   SO em desktop, de proposito: em telemovel a linha e uma grelha de cartao e
   estas larguras nao se aplicam. Enquanto existiram nos dois sitios, a celula
   da caixa de fecho media 62px dentro de uma faixa de 22 e transbordava por
   cima do titulo — e a regra do telemovel perdia por especificidade. Separar
   por media query resolve a causa em vez do sintoma. */
@media (min-width: 768px) {
  /* A caixa de fecho encostada ao titulo: o padding das duas celulas somava-se
     e abria um vao onde nao ha nada para ler. A largura tem de caber a propria
     caixa (18px) + a margem esquerda; a 20px, nas vistas SEM agrupamento (onde
     nao ha a largura extra de .agrupada), a caixa transbordava por cima do
     titulo. Nas agrupadas, a regra .grelha.agrupada .col-feito alarga-a mais. */
  .col-feito { width: 30px; padding: 0 0 0 8px; text-align: left; }
  /* A caixa fica 1px baixa por causa da metrica do input; sobe-se esse pixel. */
  .col-feito .caixa-feito { position: relative; top: -1px; }
  .col-titulo { padding-left: 4px; }
  .col-arrasto { width: 20px; padding: 0; text-align: center; }
  .col-ref { width: 46px; }
  .col-titulo { width: auto; }
  .col-prioridade { width: 84px; }
  .col-data { width: 92px; }
  .col-contextos { width: 150px; }
  .col-envolvidos { width: 150px; }
  .col-team { width: 80px; }
  .col-horas { width: 48px; text-align: right; }
  .col-estado { width: 96px; }
  .col-dono { width: 44px; }
  .col-momento { width: 92px; }
  /* As colunas de servico do fim sao estreitas de proposito: cada pixel que
     levam e um pixel que falta ao titulo, que e a coluna que se le. */
  .col-abrir { width: 22px; padding: 0; text-align: center; }
  .col-colunas { width: 24px; padding: 0; text-align: center; }
}

/* Funil de filtro no cabecalho. Discreto e sempre presente: a aparecer so no
   hover, num tablet com rato ausente nunca se descobria. */
.botao-filtro {
  margin-left: 3px;
  padding: 0 2px;
  background: none;
  border: 0;
  color: var(--texto-3);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}

.botao-filtro:hover { color: var(--acento); }
.botao-filtro.activo { color: var(--acento); }
.grelha thead th.filtrada { color: var(--acento); }

.pop-conta {
  margin-left: auto;
  color: var(--texto-3);
  font-size: var(--tipo-pequeno);
  font-variant-numeric: tabular-nums;
}

.caixa-feito { cursor: pointer; margin: 0; width: 18px; height: 18px; vertical-align: middle; }

/* O caminho explicito para o painel. Em desktop as celulas editaveis engolem o
   clique, portanto sem este botao o detalhe era inalcancavel. */
.accao-abrir {
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--texto-3);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.accao-abrir:hover { color: var(--acento); }
.linha:hover .accao-abrir, .linha.selecionada .accao-abrir { color: var(--texto-2); }

.ref { color: var(--texto-3); font-variant-numeric: tabular-nums; font-size: var(--tipo-pequeno); }
.titulo-texto { font-weight: 450; }
.vazia { color: var(--texto-3); }
.data.passada { color: var(--texto-2); }
.data.vencida { color: var(--perigo); font-weight: 500; }
.horas { font-variant-numeric: tabular-nums; }
.momento { color: var(--texto-2); font-size: var(--tipo-pequeno); }

.pastilha {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--tipo-pequeno);
  font-weight: 500;
  line-height: 1.5;
}

/* Prioridades: a cor carrega o significado antes de se ler a palavra. */
.p-max { background: color-mix(in srgb, var(--max) 16%, transparent); color: var(--max); }
.p-alot { background: color-mix(in srgb, var(--alot) 16%, transparent); color: var(--alot); }
.p-more { background: color-mix(in srgb, var(--more) 18%, transparent); color: var(--more); }
.p-normal { background: color-mix(in srgb, var(--normal) 14%, transparent); color: var(--normal); }
.p-less { background: color-mix(in srgb, var(--less) 16%, transparent); color: var(--less); }
.p-little { background: color-mix(in srgb, var(--little) 16%, transparent); color: var(--little); }
.p-none { background: var(--superficie-2); color: var(--texto-3); }
.p-vazia { background: transparent; color: var(--texto-3); }

.e-aberta { background: var(--superficie-2); color: var(--texto-2); }
/* Eyes on: acompanhar trabalho de terceiros. Cor propria — se partilhasse a do
   "em espera" a coluna deixava de dizer, de relance, se ha algo a fazer. */
.e-eyes-on { background: var(--acento-fundo); color: var(--acento); }
.e-em-espera { background: color-mix(in srgb, var(--more) 16%, transparent); color: var(--more); }
.e-concluida { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.e-cancelada { background: var(--superficie-2); color: var(--texto-3); text-decoration: line-through; }

.etiquetas, .equipa { display: inline-flex; gap: 4px; align-items: center; }

.etiqueta {
  padding: 1px 6px;
  background: var(--superficie-2);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
}

/* Envolvidos: mesma forma dos contextos mas em tom de acento, para se lerem
   como pessoas e nao se confundirem com os contextos na mesma linha. */
.etiqueta-pessoa {
  background: var(--acento-fundo);
  border-color: var(--acento-fundo);
  color: var(--acento);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--acento-fundo);
  border-radius: 50%;
  color: var(--acento);
  font-size: 10px;
  font-weight: 600;
  /* O anel e o padrao de qualquer mencao a um utilizador — na grelha, no painel
     e nos comentarios. */
  box-shadow: 0 0 0 1.5px var(--acento);
}

body.compacto .avatar { width: 17px; height: 17px; font-size: 9px; }

/* O dono distingue-se por dentro: o circulo cheio em acento, em vez do fundo
   claro dos colaboradores. */
.avatar-dono { background: var(--acento); color: #fff; }

.celula-input { width: 100%; padding: 2px 4px; }

.vazio-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
  color: var(--texto-2);
  text-align: center;
}

.vazio-texto { margin: 0; }

/* Lista vazia nao precisa de meio ecra de espaco por baixo. */
.zona-grelha.vazia { padding-bottom: 24px; }

/* Marcador de lazy loading no fim das listas simples. */
.sentinela {
  padding: 10px var(--celula-x);
  color: var(--texto-3);
  font-size: var(--tipo-pequeno);
  text-align: center;
}

/* ------------------------------------------------------------------ painel */
/* Desktop: duas colunas, a grelha encolhe e o painel fica fixo a direita —
   ve-se a lista e o detalhe ao mesmo tempo, que e o ponto. Em ecra pequeno o
   painel passa a folha sobreposta (o passo 6 afina o telemovel). */
.area { display: flex; align-items: flex-start; }
.zona-grelha { flex: 1; min-width: 0; background: var(--superficie); }

.painel {
  /* A largura arrastada pelo utilizador (--painel-largura-user, gravada) ganha
     a de omissao. So vale onde ha espaco: abaixo de 1280px as media queries mais
     abaixo repoem uma largura proporcional. */
  flex: 0 0 var(--painel-largura-user, var(--painel-largura));
  position: sticky;
  top: calc(var(--topo-altura) + var(--tabs-altura));
  max-height: calc(100vh - var(--topo-altura) - var(--tabs-altura));
  overflow-y: auto;
  background: var(--superficie);
  border-left: 1px solid var(--contorno-forte);
  /* Anima a largura: a grelha e empurrada para o lado em vez de o painel
     aparecer de repente. O prefers-reduced-motion desliga isto (regra global). */
  transition: flex-basis 0.16s ease-out, opacity 0.16s ease-out;
}

/* Fechado fica no layout com largura zero — e o que permite animar. Nao se usa
   o atributo hidden aqui: display:none nao se anima. */
.painel.fechado {
  flex-basis: 0;
  opacity: 0;
  overflow: hidden;
  border-left-width: 0;
  pointer-events: none;
}

/* Pega para redimensionar o painel. Vive entre a grelha e o painel e so aparece
   onde ha espaco para arrastar (ecra largo, painel aberto) — ver o JS, que grava
   a largura. Abaixo de 1280px o painel e proporcional e nao se arrasta. */
.pega-painel { display: none; }
@media (min-width: 1280px) {
  body.duas-colunas.com-painel .pega-painel {
    display: block;
    flex: 0 0 8px;
    position: sticky;
    top: calc(var(--topo-altura) + var(--tabs-altura));
    height: calc(100vh - var(--topo-altura) - var(--tabs-altura));
    cursor: col-resize;
    touch-action: none;
  }
}
/* O risco central: a parte visivel da pega. */
.pega-painel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--contorno-forte);
}
.pega-painel:hover::before,
body.a-redimensionar-painel .pega-painel::before { background: var(--acento); }

/* Enquanto se arrasta: sem animacao (senao a largura persegue o cursor) e sem
   seleccionar texto sem querer. */
body.a-redimensionar-painel { cursor: col-resize; user-select: none; }
body.a-redimensionar-painel .painel { transition: none; }

.painel-conteudo { padding: 12px 14px 40px; }

.painel-topo { margin-bottom: 12px; }

.painel-topo-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.painel-ancora {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: none;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto-3);
  cursor: pointer;
}

.painel-ancora:hover { color: var(--acento); background: var(--superficie-2); }
.painel-ancora.copiado { color: var(--ok); }

.rodape-etiqueta { color: var(--texto-3); }

/* Apagar e a unica operacao irreversivel da app: fica no fim do painel, a
   direita, com aspecto de perigo e nunca na lista. */
.painel-apagar {
  margin-left: auto;
  padding: 3px 9px;
  background: none;
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto-3);
  cursor: pointer;
  font-size: var(--tipo-pequeno);
}

.painel-apagar:hover {
  border-color: var(--perigo);
  color: var(--perigo);
}

.pop-irreversivel {
  margin: 6px 0 2px;
  color: var(--perigo);
  font-size: var(--tipo-pequeno);
  line-height: 1.4;
  white-space: normal;
}

.painel-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--contorno);
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
}

.painel-ref {
  color: var(--texto-3);
  font-size: var(--tipo-pequeno);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.painel-ref:hover { color: var(--acento); }

.painel-acao {
  padding: 3px 8px;
  background: var(--superficie-2);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto-2);
  cursor: pointer;
  font-size: var(--tipo-pequeno);
  position: relative;
  overflow: hidden;
}

.painel-acao:hover { color: var(--acento); border-color: var(--acento); }
.painel-topo-linha .painel-acao { margin-left: auto; }

.painel-fechar {
  /* Encostado a direita da linha, seja quem for que esteja a sua esquerda. */
  margin-left: auto;
  padding: 0 0 0 4px;
  background: none;
  border: 0;
  color: var(--texto-3);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.painel-fechar:hover { color: var(--texto); }

.painel-titulo {
  margin: 0;
  font-size: calc(var(--tipo) + 3px);
  font-weight: 600;
  line-height: 1.3;
  cursor: text;
}

.painel-titulo:hover { background: var(--superficie-2); }

.painel-campos {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1px 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--contorno);
}

.campo { display: contents; }

.campo-etiqueta {
  padding: 3px 0;
  color: var(--texto-3);
  font-size: var(--tipo-pequeno);
}

.campo-valor { padding: 3px 5px; border-radius: var(--raio); }
.campo-valor.editavel { cursor: pointer; }
.campo-valor.editavel:hover { background: var(--superficie-2); }
.campo-valor.em-edicao { box-shadow: inset 0 0 0 2px var(--acento); }

.painel-secao { margin-bottom: 16px; }

.painel-secao-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.painel-secao-linha .painel-acao { margin-left: auto; }

.painel-secao-titulo {
  margin: 0 0 6px;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.painel-secao-linha .painel-secao-titulo { margin: 0; }

/* ------------------------------------------------------------- markdown */
.md-corpo { cursor: text; }
.md-corpo > *:first-child { margin-top: 0; }
.md-corpo p, .md-p { margin: 0 0 8px; }
.md-titulo { margin: 14px 0 6px; line-height: 1.3; }
.md-corpo h3 { font-size: calc(var(--tipo) + 2px); }
.md-corpo h4, .md-corpo h5, .md-corpo h6 { font-size: calc(var(--tipo) + 1px); }
.md-lista { margin: 0 0 8px; padding-left: 20px; }
.md-lista li { margin: 2px 0; }
.md-tarefa { list-style: none; margin-left: -18px; }
.md-caixa { margin-right: 6px; }

.md-corpo code, .md-previsao code {
  padding: 1px 4px;
  background: var(--superficie-2);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

.md-codigo {
  margin: 0 0 8px;
  padding: 8px 10px;
  background: var(--superficie-2);
  border-radius: var(--raio);
  overflow-x: auto;
}

.md-codigo code { padding: 0; background: none; }

.md-citacao {
  margin: 0 0 8px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--contorno-forte);
  color: var(--texto-2);
}

.md-imagem {
  max-width: 100%;
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
}

.md-imagem-recusada {
  color: var(--texto-3);
  text-decoration: underline dotted;
}

.md-tabela { margin: 0 0 8px; border-collapse: collapse; font-size: var(--tipo-pequeno); }
.md-tabela th, .md-tabela td { padding: 3px 7px; border: 1px solid var(--contorno); text-align: left; }
.md-tabela th { background: var(--superficie-2); }
.md-ref { color: var(--acento); text-decoration: none; }
.md-ref:hover { text-decoration: underline; }
.md-corpo a { color: var(--acento); }

/* --------------------------------------------------------- editor de texto */
.md-barra-linha { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.md-barra { display: flex; gap: 2px; flex-wrap: wrap; }

.md-botao {
  min-width: 26px;
  padding: 3px 6px;
  background: var(--superficie-2);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto-2);
  cursor: pointer;
  font-size: var(--tipo-pequeno);
}

.md-botao:hover { color: var(--acento); border-color: var(--acento); }
.md-botao.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.md-barra-linha > .md-botao:last-child { margin-left: auto; }

.md-area {
  width: 100%;
  padding: 8px 9px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--contorno-forte);
  border-radius: var(--raio);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--tipo-pequeno);
  line-height: 1.5;
  resize: vertical;
}

.md-area:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-fundo); }

.md-previsao {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--superficie-2);
  border-radius: var(--raio);
}

.md-accoes { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.md-dica { color: var(--texto-3); font-size: 10px; }

/* ----------------------------------------------------------------- anexos */
.anexos-lista { display: flex; flex-direction: column; gap: 3px; border-radius: var(--raio); }
.anexos-lista.a-receber { outline: 2px dashed var(--acento); outline-offset: 3px; }

.anexo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: var(--superficie-2);
  border-radius: var(--raio);
}

.anexo-nome { flex: 1; color: var(--acento); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-tamanho { color: var(--texto-3); font-size: 10px; font-variant-numeric: tabular-nums; }

.anexo-apagar, .comentario-apagar {
  padding: 0 3px;
  background: none;
  border: 0;
  color: var(--texto-3);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.anexo-apagar:hover, .comentario-apagar:hover { color: var(--perigo); }
.anexo-input { display: none; }
label.painel-acao { cursor: pointer; }

/* ------------------------------------------------------------ comentarios */
.comentarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.comentario {
  padding: 7px 9px;
  background: var(--superficie-2);
  border-radius: var(--raio);
}

.comentario-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.comentario-autor { font-size: var(--tipo-pequeno); font-weight: 600; }
/* Sem o nome ao lado, a data encosta-se a direita (e o apagar fica-lhe depois). */
.comentario-data { color: var(--texto-3); font-size: 10px; margin-left: auto; }
.comentario-topo .comentario-apagar { margin-left: 6px; }
.comentario-corpo p:last-child { margin-bottom: 0; }

.comentario-caixa { display: flex; gap: 6px; align-items: flex-end; }

.comentario-novo {
  flex: 1;
  padding: 6px 8px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--contorno-forte);
  border-radius: var(--raio);
  font: inherit;
  resize: vertical;
}

.comentario-novo:focus { outline: none; border-color: var(--acento); }

/* ------------------------------------------------------------- historico */
.historico { margin: 0; padding: 0; list-style: none; font-size: var(--tipo-pequeno); }
.historico li { display: flex; gap: 6px; padding: 2px 0; color: var(--texto-2); }
.historico-data { flex: 0 0 66px; color: var(--texto-3); }
.historico-campo { flex: 0 0 74px; font-weight: 500; }
.historico-valor { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historico-quem { color: var(--texto-3); }

/* ---------------------------------------------------------------- arrastar */
/* A faixa vazia a esquerda da caixa de fecho E a pega: nao ha modo a ligar. O
   cursor de mao anuncia-a, e o touch-action: none impede o browser de tratar o
   gesto como rolar a pagina (era isso que travava o arrasto no telemovel).
   Arrasta-se por ali e nao pela linha inteira porque a linha e toda editavel
   por clique — sem uma zona propria, arrasto e clique confundem-se. */
.pega-arrasto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--linha-altura);
  color: transparent;      /* os pontinhos so aparecem ao passar o rato */
  cursor: grab;
  font-size: 13px;
  line-height: 1;
  touch-action: none;
  transition: color 0.1s;
}

.linha:hover .pega-arrasto { color: var(--texto-3); }
.pega-arrasto:active { cursor: grabbing; color: var(--acento); }
.grelha tr.a-ser-arrastada td { opacity: 0.4; }

.grelha tr.grupo.alvo .grupo-botao {
  background: var(--acento-fundo);
  box-shadow: inset 2px 0 0 var(--acento);
}

.fantasma {
  position: fixed;
  z-index: 300;
  max-width: 60vw;
  padding: 4px 10px;
  background: var(--acento);
  border-radius: var(--raio);
  color: #fff;
  font-size: var(--tipo-pequeno);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.botao-topo.activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* ----------------------------------------------------------------- popovers */
/* Fundo do popover (so em telemovel, ligado pelo JS): esbate o resto e apanha o
   toque de fora, para fechar sem abrir outra coisa por baixo. */
.popover-fundo {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--fundo) 45%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.popover {
  position: fixed;
  z-index: 100;
  min-width: 200px;
  max-width: min(380px, calc(100vw - 16px));
  padding: 10px;
  background: var(--superficie);
  border: 1px solid var(--contorno-forte);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.pop-titulo {
  margin-bottom: 8px;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pop-aviso { margin-bottom: 8px; color: var(--texto); }

.pop-secao {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--contorno);
}

.pop-etiqueta { color: var(--texto-2); font-size: var(--tipo-pequeno); }

.pop-botao {
  padding: 6px 9px;
  background: var(--superficie-2);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.pop-botao:hover { border-color: var(--acento); color: var(--acento); }
.pop-botao.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.pop-botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.pop-limpar { color: var(--texto-2); }
.pop-perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.pop-aplicar { background: var(--acento); border-color: var(--acento); color: #fff; }
.pop-aplicar:hover { color: #fff; filter: brightness(1.08); }

/* prioridade */
.popover-prioridade { min-width: 228px; }
.pop-prioridades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.pop-prioridades .pop-botao:first-child { grid-column: 1 / -1; }
.pop-numero { width: 84px; }

/* recorrencia: os sete dias da semana como interruptores pequenos. */
.pop-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 6px; }
.pop-semana .pop-botao { padding: 4px 0; text-align: center; }
.pop-dia-semana.activo { background: var(--acento); border-color: var(--acento); color: #fff; }

/* datas */
.popover-data { min-width: 268px; }
.pop-dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pop-saltos { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.pop-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pop-salto { color: var(--texto-2); }

.pop-cal-caixa { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--contorno); }

.pop-cal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.pop-cal-mes { font-size: var(--tipo-pequeno); font-weight: 600; }
.pop-cal-nav { padding: 2px 8px; }

.pop-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.pop-cal-cabeca {
  padding: 2px 0;
  color: var(--texto-3);
  font-size: 10px;
  text-align: center;
}

.pop-cal-dia {
  padding: 4px 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-variant-numeric: tabular-nums;
}

.pop-cal-dia:hover { background: var(--superficie-2); }
.pop-cal-dia.hoje { border-color: var(--acento); color: var(--acento); }
.pop-cal-dia.activo { background: var(--acento); color: #fff; }
.pop-hora { width: 104px; }

/* listas */
.popover-lista { min-width: 214px; }
.pop-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Relativa ao ecra e nao 260px fixos: num telefone deitado 260px era quase
     tudo, e num ecra grande sobrava espaco a nao ser usado. */
  max-height: min(46vh, 320px);
  overflow-y: auto;
  /* Ao chegar ao fim da lista, o embalo nao passa para a pagina (que fecharia o
     popover, porque rolar a pagina fecha-o). */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Espaco para a barra nao ficar por cima das caixas. */
  padding-right: 2px;
}

.pop-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--raio);
  cursor: pointer;
}

.pop-opcao:hover { background: var(--superficie-2); }
/* A entrada fixa (o dono) mostra-se marcada mas apagada — nao se pode tirar. */
.pop-opcao-fixa { cursor: default; color: var(--texto-2); }
.pop-opcao-fixa:hover { background: none; }
.pop-opcao-botao { text-align: left; }
.pop-novo { width: 100%; }

/* --------------------------------------------------------- faixa de rede */
.estado-rede {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 150;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: var(--more);
  border-radius: 999px;
  color: #fff;
  font-size: var(--tipo-pequeno);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------- captura em ecra pequeno */
/* Escondida em desktop: la a caixa de captura vive no topo. */
.barra-fundo { display: none; }

/* -------------------------------------------------------- menus do cabecalho */
.botao-menu {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  color: var(--texto-2);
  cursor: pointer;
  max-width: 40vw;
  overflow: hidden;
  white-space: nowrap;
}

.botao-menu:hover { background: var(--superficie-2); color: var(--texto); border-color: var(--contorno); }
.botao-menu.em-edicao { background: var(--superficie-2); }
.menu-seta { color: var(--texto-3); font-size: 10px; }
.menu-nome { overflow: hidden; text-overflow: ellipsis; }

.pop-menu { display: flex; flex-direction: column; gap: 1px; min-width: 200px; }

.pop-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  background: none;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.pop-menu-item:hover { background: var(--superficie-2); }
.pop-menu-item .estado-item { color: var(--texto-3); font-size: var(--tipo-pequeno); }
.pop-menu-separador { height: 1px; margin: 4px 0; background: var(--contorno); }
.pop-menu-cabeca { padding: 2px 9px 6px; color: var(--texto-3); font-size: var(--tipo-pequeno); }

/* Selector da cor do topo: uma fila de amostras. */
.pop-menu-cor { padding: 4px 9px 6px; }
.pop-menu-cor-etiqueta { display: block; margin-bottom: 5px; color: var(--texto-3); font-size: var(--tipo-pequeno); }
.cores-topo { display: flex; flex-wrap: wrap; gap: 6px; }
.cor-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  cursor: pointer;
}
.cor-swatch.activa { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--texto); }

/* Gestao de contextos: lista com contagem, renomear e apagar. */
.ctx-lista { display: flex; flex-direction: column; gap: 1px; max-height: 46vh; overflow-y: auto; }
.ctx-linha { display: flex; align-items: center; gap: 6px; padding: 3px 4px; }
.ctx-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-conta {
  min-width: 20px;
  padding: 0 6px;
  background: var(--superficie-2);
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ctx-accao {
  padding: 2px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  color: var(--texto-2);
  cursor: pointer;
}
.ctx-accao:hover { background: var(--superficie-2); color: var(--texto); }
.ctx-confirmar {
  background: var(--perigo);
  border-color: var(--perigo);
  color: #fff;
  font-size: var(--tipo-pequeno);
}
.ctx-confirmar:hover { background: var(--perigo); color: #fff; filter: brightness(1.05); }

/* Gestao de pessoas: nome + aliases por baixo, em pequeno. */
.ctx-pessoa { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ctx-pessoa .ctx-nome { flex: none; }
.ctx-aliases {
  color: var(--texto-3);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Escolher colunas, no fim da linha de cabecalhos. */
.botao-colunas {
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--texto-3);
  cursor: pointer;
  font-size: 13px;
}

.botao-colunas:hover { color: var(--acento); }

/* ------------------------------------------------------------------ avisos */
.avisos {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aviso {
  padding: 9px 12px;
  background: var(--superficie);
  border: 1px solid var(--contorno-forte);
  border-left: 3px solid var(--perigo);
  border-radius: var(--raio);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s, transform 0.3s;
}

.aviso.ok { border-left-color: var(--ok); }
.aviso.a-sair { opacity: 0; transform: translateY(6px); }

/* -------------------------------------------------------------- adaptacao */
/* Passo 6 trata o telemovel a fundo. Isto ja evita o pior: colunas
   secundarias saem antes de a tabela comecar a apertar o titulo. */
/* Nada de esconder colunas por largura: se a pessoa escolheu a coluna no menu
   de colunas, ela tem de aparecer. Antes, ligar "Alterada" num ecra de 1024px
   nao fazia nada visivel — parecia que o menu estava avariado. Quem quiser
   menos colunas, desliga-as (e a escolha fica guardada por vista). */

/* Em duas colunas o painel divide o ecra a serio: fica no fluxo e a lista
   encolhe. A versao anterior sobrepunha-o pela direita abaixo dos 1024px, o que
   tapava metade da lista em vez de a estreitar — e nao era isso que "aparece de
   lado e ocupa parte do ecra" queria dizer.

   A largura e proporcional com tectos: num tablet a 1024px um painel de 357px
   fixos deixava a lista larga e o painel apertado. */
@media (max-width: 1279px) {
  /* So o painel ABERTO reserva largura: senao, com estas regras a ganharem em
     especificidade a `.painel.fechado { flex-basis: 0 }`, um painel fechado
     continuava a roubar ~42% do ecra e a grelha nunca chegava a ocupa-lo. */
  body.duas-colunas .painel:not(.fechado) { flex-basis: clamp(300px, 42%, 460px); }
}

/* Num desdobravel aberto (~673px) as duas colunas so cabem se o painel apertar
   e a lista deixar cair as colunas secundarias — o titulo e a caixa de fecho
   sao o que tem de sobreviver. */
@media (max-width: 767px) {
  body.duas-colunas .painel:not(.fechado) { flex-basis: min(320px, 52%); }
  body.duas-colunas .painel-campos { grid-template-columns: 70px 1fr; }
}

/* ------------------------------------------------------ uma coluna (edicao
   a ecra cheio). Vale por CLASSE e nao por largura: e o js/app.js que resolve
   "auto" a partir da largura, para a escolha manual do menu de conta poder
   ganhar-lhe num telefone desdobravel aberto ou num tablet. */
body.uma-coluna .painel {
  position: fixed;
  inset: 0;
  z-index: 60;
  flex-basis: auto;
  max-height: 100vh;
  border: 0;
  border-radius: 0;
  padding-bottom: env(safe-area-inset-bottom);
  transition: none;
}

body.uma-coluna .painel.fechado { display: none; }

/* Animacao de entrada do painel a ecra cheio: desliza da direita, como o empurra
   de um "abrir", para casar com o gesto de voltar atras. Desligada por
   prefers-reduced-motion (regra global). */
@keyframes painel-entra {
  from { transform: translateX(6%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
body.uma-coluna .painel:not(.fechado) { animation: painel-entra 0.2s ease-out; }

/* Com o painel aberto a ecra cheio, a lista e as barras nao fazem falta e
   roubam contexto. */
body.uma-coluna.com-painel .topo,
body.uma-coluna.com-painel .barra-tabs,
body.uma-coluna.com-painel .barra-fundo,
body.uma-coluna.com-painel .zona-grelha { display: none; }

/* Telemovel: o resto do que muda abaixo de 768px. */
@media (max-width: 767px) {

  .painel-conteudo { padding: 10px 14px 40px; }
  .painel-topo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 0 8px;
    background: var(--superficie);
    border-bottom: 1px solid var(--contorno);
  }

  .painel-campos { grid-template-columns: 76px 1fr; }
  /* Alvos de toque: 44 px e o minimo utilizavel com o dedo. */
  .painel-fechar { min-width: 44px; min-height: 44px; font-size: 24px; }
  .painel-acao, .md-botao { min-height: 34px; }
  .anexo-apagar, .comentario-apagar { min-width: 34px; min-height: 34px; }
}

/* ------------------------------------------------ telemovel: cartoes */
/* Abaixo de 768 px a tabela deixa de fazer sentido: cada linha passa a cartao,
   com o titulo em cima e os campos em baixo, cada um com o seu rotulo (vem do
   data-rotulo). As celulas continuam a ser as mesmas, portanto TODA a edicao
   inline continua a funcionar — muda o layout, nao o comportamento. */
@media (max-width: 767px) {
  .grelha, .grelha tbody, .grelha tr, .grelha td { display: block; }
  .grelha thead { display: none; }

  .grelha tr.linha {
    position: relative;
    display: grid;
    /* Colunas explicitas: a caixa de fecho na 1, tudo o mais na 2. Sem isto, a
       colocacao automatica punha o titulo por cima da caixa. */
    grid-template-columns: 22px 1fr;
    /* Afasta o titulo da caixa: colados, liam-se como uma coisa so. */
    column-gap: 8px;
    align-items: center;
    /* Margem a esquerda para a caixa nao ficar colada a borda; as tarefas
       agrupadas recuam mais (ver .dentro-n*), o que as poe visivelmente DENTRO
       do cabecalho do grupo. */
    padding: 3px 40px 3px 8px;
  }

  /* As larguras de coluna da tabela nao valem aqui: se valessem, a celula da
     caixa media 62px numa faixa de 22px e transbordava para cima do titulo. */
  .grelha tr.linha td {
    width: auto;
    min-width: 0;
    border: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
  }

  .grelha td.col-feito {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 34px continua a ser um alvo de toque confortavel e poupa 10px por linha. */
    min-height: 34px;
  }

  .grelha td.col-titulo {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;
    font-size: var(--tipo);
    line-height: 1.3;
  }

  /* Por omissao a lista mostra SO o titulo: numa lista de tarefas ao telefone,
     ler o titulo e o que importa. Os campos aparecem ao tocar na linha
     (classe .expandida), e o botao › abre o detalhe completo. */
  .grelha tr.linha td.col-prioridade, .grelha tr.linha td.col-data,
  .grelha tr.linha td.col-contextos, .grelha tr.linha td.col-team,
  .grelha tr.linha td.col-horas, .grelha tr.linha td.col-estado,
  .grelha tr.linha td.col-ref, .grelha tr.linha td.col-momento,
  .grelha tr.linha td.col-dono { display: none; }

  /* Os campos secundarios em fila, com rotulo pequeno por cima do valor. */
  /* Campos expandidos: colados ao titulo, sem herdar o padding da grelha. */
  /* Expandida: um campo por linha, na coluna do titulo. Empilhados na mesma
     celula da grelha sobrepunham-se; em fila obrigavam a adivinhar onde acaba
     um e comeca o outro. */
  .grelha tr.linha.expandida td.col-prioridade,
  .grelha tr.linha.expandida td.col-data,
  .grelha tr.linha.expandida td.col-contextos,
  .grelha tr.linha.expandida td.col-team,
  .grelha tr.linha.expandida td.col-horas,
  .grelha tr.linha.expandida td.col-estado,
  .grelha tr.linha.expandida td.col-ref,
  .grelha tr.linha.expandida td.col-momento,
  .grelha tr.linha.expandida td.col-dono {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: 4px;
    width: auto;
    min-height: 30px;
    gap: 8px;
    margin: 0;
    padding: 2px 0;
    border-radius: var(--raio);
  }

  .grelha tr.linha.expandida td.editavel::before { min-width: 62px; }

  .grelha td.editavel::before {
    content: attr(data-rotulo);
    color: var(--texto-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .grelha td.col-titulo::before { content: none; }
  .grelha td.col-feito { grid-column: 1; }
  .grelha td.col-titulo { white-space: normal; text-overflow: clip; }

  /* Em telemovel nao ha pega: arrasta-se com uma pressao longa sobre a tarefa
     (ver js/arrastar.js). Um icone de pega no cartao ficava sobreposto ao › de
     abrir e roubava largura ao titulo, que e o que se le. */
  .grelha tr.linha td.col-arrasto { display: none; }

  /* A coluna do menu de colunas nao existe em telemovel: nao ha cabecalho. */
  .grelha tr.linha td.col-colunas { display: none; }

  /* O › fica no canto, com area de toque decente. */
  .grelha td.col-abrir {
    position: absolute;
    top: 2px;
    right: 0;
  }

  .accao-abrir { min-width: 38px; min-height: 34px; font-size: 22px; }

  /* O cartao inteiro recua, que e o que se le como hierarquia num ecra
     estreito (recuar so o titulo nao chegava). O +8px e a mesma margem base da
     linha, para a caixa nunca ficar colada a borda e o recuo do grupo somar-se
     a ela em vez de a substituir. */
  .grelha tr.linha.dentro-n1 { padding-left: calc(var(--recuo) + 8px); }
  .grelha tr.linha.dentro-n2 { padding-left: calc(var(--recuo) * 2 + 8px); }
  .grelha tr.linha.dentro-n3 { padding-left: calc(var(--recuo) * 3 + 8px); }

  /* Grupos: cabecalho colado ao rolar, para se saber sempre em que dia se esta. */
  .grelha tr.grupo { display: block; position: sticky; top: 0; z-index: 5; }
  .grelha tr.grupo td { display: block; }
  .grupo-botao { min-height: 38px; }

  /* Captura ancorada em baixo, ao alcance do polegar. */
  .topo-centro { display: none; }
  .topo { flex-wrap: nowrap; }
  .marca { display: none; }
  /* A pesquisa absorve a folga e o botao da conta fica encostado a direita.
     Com width:100% na pesquisa e sem justify-content, sobrava espaco a direita
     do nome e o botao ficava a meio. */
  .campo-procura { flex: 1; min-width: 0; width: auto; }
  .topo-direita { flex: 1; justify-content: flex-end; }
  .eu { display: none; }

  .barra-fundo {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--superficie);
    border-top: 1px solid var(--contorno);
  }

  .barra-fundo .campo-nova { width: 100%; min-height: 40px; }
  .zona-grelha { padding-bottom: 96px; }
  .zona-grelha.vazia { padding-bottom: 96px; }

  /* Popovers passam a folha: largura toda e ao alcance do polegar. */
  /* Ancorado num ecra pequeno: nunca mais largo do que o ecra, e rola se for
     mais alto. Sem isto, um menu com muitas opcoes saia por baixo do ecra. */
  .popover {
    max-width: calc(100vw - 12px);
    max-height: 70vh;
    overflow-y: auto;
  }

  .popover .pop-opcao, .popover .pop-menu-item { min-height: 40px; }

  .popover.folha {
    left: 6px !important;
    right: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    top: auto !important;
    max-width: none;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 14px;
  }

  .popover.folha .pop-botao { min-height: 40px; }
  .popover.folha .pop-cal-dia { min-height: 36px; }
  .popover.folha .pop-opcao { min-height: 40px; }

  /* Em ecra pequeno o modo compacto ainda tem de ser tocavel. */
  body.compacto .grelha tr.linha { padding-top: 2px; padding-bottom: 2px; }
  body.compacto .grelha td.col-feito { min-height: 32px; }

  /* Sem riscas entre tarefas tambem aqui; o grupo continua a separar. */
  .grelha tr.linha + tr.linha { border-top: 0; }

  /* No layout de cartao a linha e uma grelha e as celulas nao a cobrem toda:
     pintar o fundo nas celulas dava um realce so por tras dos textos, com
     buracos entre eles. O fundo passa para o cartao. */
  .grelha tr.linha.selecionada td,
  .grelha tr.linha.marcada td,
  .grelha tr.linha.destacada td,
  .linha:hover td { background: none; }

  .grelha tr.linha.selecionada { background: var(--selecao); }
  .grelha tr.linha.marcada { background: var(--acento-fundo); }
  .grelha tr.linha.destacada { background: var(--destaque); }
  .grelha tr.linha.marcada { box-shadow: inset 3px 0 0 var(--acento); }
  .grelha tr.linha.selecionada, .grelha tr.linha.marcada,
  .grelha tr.linha.destacada { border-radius: var(--raio); }
}

@media (max-width: 1000px) {
  .col-horas, .col-inbox { display: none; }
  .col-contextos { width: 110px; }
}

@media (max-width: 820px) {
  .campo-procura { width: 130px; }
  .col-estado, .col-ref { display: none; }
}

/* Faixa tablet-em-retrato: aqui o topo tem espaco para a captura numa segunda
   linha e passa a duas — a altura deixa de ser fixa, por isso as tabs e o
   cabecalho da tabela nao podem ancorar nela e ficam estaticos. Em telemovel
   (<768px) isto NAO se aplica: o topo e uma linha so, as tabs continuam fixas
   (nao sobem com o scroll das tarefas) e o cabecalho do dia ancora nelas. */
@media (min-width: 768px) and (max-width: 820px) {
  .topo { flex-wrap: wrap; height: auto; padding: 6px 12px; }
  .barra-tabs { height: auto; position: static; }
  .topo-centro { order: 3; flex-basis: 100%; }
  .grelha thead th { position: static; }
  .proj-dia-cabeca { top: var(--topo-altura); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------- filtros activos */
/* Amarelo de aviso e nao a cor de acento: isto nao e um estado normal da app, e
   uma lente posta por cima da lista. Um filtro esquecido faz a lista parecer
   vazia e nao ha nada a explicar porque. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--destaque);
  border-bottom: 1px solid var(--contorno);
}

.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 8px;
  background: var(--superficie);
  border: 1px solid var(--contorno-forte);
  border-radius: 999px;
  color: var(--texto);
  cursor: pointer;
  font-size: var(--tipo-pequeno);
}

.filtro-chip:hover { border-color: var(--perigo); }
.filtro-chip-campo { color: var(--texto-2); }
.filtro-chip-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.filtro-chip-x { color: var(--texto-3); font-size: 14px; line-height: 1; }
.filtro-chip:hover .filtro-chip-x { color: var(--perigo); }

.filtro-limpar {
  background: none;
  border: 0;
  color: var(--texto-2);
  cursor: pointer;
  font-size: var(--tipo-pequeno);
  text-decoration: underline;
}

@media (max-width: 767px) {
  /* Alvos de toque: o chip e a unica forma de remover o filtro no telefone. */
  .filtro-chip { min-height: 36px; }
}

/* ---------------------------------------------------------- folha modal */
/* Usada pelos atalhos de teclado. Centrada, com fundo a escurecer o resto: e
   informacao para ler e fechar, nao uma zona de trabalho. */
.folha-fundo {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.folha {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(80vh, 700px);
  overflow-y: auto;
  padding: 14px 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--contorno-forte);
  border-radius: calc(var(--raio) * 2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.folha-topo { display: flex; align-items: center; gap: 8px; }
.folha-titulo { margin: 0; font-size: calc(var(--tipo) + 3px); font-weight: 600; }

.atalhos-secao { margin-top: 14px; }

.atalhos-titulo {
  margin: 0 0 6px;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tecla a esquerda, o que faz a direita: le-se em coluna, sem procurar. */
.atalhos-lista {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 5px 12px;
  margin: 0;
  align-items: baseline;
}

.atalhos-lista dt { margin: 0; }
.atalhos-lista dd { margin: 0; color: var(--texto); font-size: var(--tipo); }

.atalhos-lista kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--superficie-2);
  border: 1px solid var(--contorno-forte);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--texto-2);
  font-family: inherit;
  font-size: var(--tipo-pequeno);
  white-space: nowrap;
}

/* ------------------------------------------------------------------- visor */
/* Imagem em ecra cheio, com zoom. Fundo quase opaco: o que interessa e a
   imagem, e um print de ecra claro sobre fundo claro perde-se. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.92);
  /* O gesto e nosso: sem isto o browser tenta rolar e dar zoom a pagina. */
  touch-action: none;
  overscroll-behavior: contain;
}

.visor-imagem {
  max-width: 100vw;
  max-height: 100vh;
  transform-origin: center center;
  /* Sem transicao: com zoom por pinca, uma animacao a seguir cada passo do
     gesto arrasta-se atras do dedo. */
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.visor.ampliado .visor-imagem { cursor: grab; }
.visor.ampliado .visor-imagem:active { cursor: grabbing; }

.visor-barra {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: 8px;
  z-index: 1;
  display: flex;
  gap: 4px;
}

.visor-botao {
  min-width: 40px;
  min-height: 40px;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: var(--raio);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.visor-botao:hover { background: rgba(255, 255, 255, 0.24); }

/* Com o visor aberto, nada por baixo rola. */
body.com-visor { overflow: hidden; }

/* ------------------------------------------------- editor de comentario */
/* Um comentario tem o mesmo editor da descricao (barra, previsao, colar
   imagens), mas comeca pequeno: a maioria dos comentarios sao duas linhas. */
.comentario-editor { margin-top: 8px; }
.comentario-editor .md-area { min-height: 46px; }

/* Expandido, a caixa toma o espaco que faz falta para escrever a serio. O
   valor e em vh e nao em px porque o painel muda de altura entre desktop,
   tablet e telemovel a ecra cheio. */
.md-editor.grande .md-area { min-height: 52vh; }
.md-editor.grande .md-previsao { max-height: 52vh; overflow-y: auto; }

/* Botao dentro de um aviso: "ver" a tarefa que nasceu noutra vista. */
.aviso { display: flex; align-items: center; gap: 10px; }

.aviso-accao {
  padding: 2px 8px;
  background: none;
  border: 1px solid var(--contorno-forte);
  border-radius: var(--raio);
  color: var(--acento);
  cursor: pointer;
  font: inherit;
  font-size: var(--tipo-pequeno);
  white-space: nowrap;
}

.aviso-accao:hover { border-color: var(--acento); background: var(--acento-fundo); }

/* Botao que abre a caixa de comentario. Discreto e de largura inteira: e uma
   acao, nao um campo — a caixa aparece quando for para escrever. */
.comentario-abrir {
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  background: var(--superficie-2);
  border: 1px dashed var(--contorno-forte);
  border-radius: var(--raio);
  color: var(--texto-2);
  cursor: pointer;
  font: inherit;
  font-size: var(--tipo-pequeno);
  text-align: left;
}

.comentario-abrir:hover { color: var(--acento); border-color: var(--acento); }

@media (max-width: 767px) {
  .comentario-abrir { min-height: 40px; }
}

/* ------------------------------------------------------------- notificacoes */
.botao-sino {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 30px;
  padding: 0 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.botao-sino:hover { background: var(--superficie-2); border-color: var(--contorno); }
/* Sino solido, na cor do texto secundario; ganha o acento quando ha novas — a
   unica pista de que ha algo para ver. Sem emoji: cor unica, sem gradiente. */
.botao-sino { color: var(--texto-2); }
.sino-icone { display: block; }
.botao-sino.tem-novas { color: var(--acento); }

.sino-conta {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 15px;
  padding: 0 3px;
  background: var(--perigo);
  border-radius: 999px;
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}

.popover-notificacoes { min-width: min(360px, calc(100vw - 16px)); padding: 6px; }

.notif-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.notif {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--raio);
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.notif:hover { background: var(--superficie-2); }
/* Nao lida: barra de acento a esquerda. Nao negrito — com dez seguidas, dez
   linhas em negrito lem-se pior do que dez normais. */
.notif.nova { border-left-color: var(--acento); background: var(--acento-fundo); }

.notif-linha {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
}

.notif-quem { font-weight: 500; color: var(--texto); }
.notif-ref { font-variant-numeric: tabular-nums; }
.notif-quando { margin-left: auto; color: var(--texto-3); white-space: nowrap; }

.notif-titulo {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.notif-resumo {
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-vazio {
  padding: 14px 10px;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  line-height: 1.5;
}

.notif-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--contorno);
}

@media (max-width: 767px) {
  .botao-sino { min-width: 40px; min-height: 38px; }
  .notif { padding: 10px 8px; }
}

/* ------------------------------------------------------------- projeccao */
/* O dia empilhado numa linha do tempo (js/projeccao.js).
 *
 * A altura do bloco diz a duracao — ve-se de relance o que come a tarde. Mas
 * a Content-Security-Policy nao permite style="" (style-src 'self'), portanto
 * nao ha como escrever uma altura calculada no elemento: sao quatro degraus em
 * classes (alt-1 a alt-4). Da o peso visual sem inline styles. */

.projeccao { padding: 0 0 8px; }

.proj-dia { border-bottom: 1px solid var(--contorno); }

.proj-dia-cabeca {
  position: sticky;
  /* Encosta ao que ja e fixo em cima: sem isto o cabecalho do dia passava por
     baixo das tabs e perdia-se o "que dia e este" ao rolar. */
  top: calc(var(--topo-altura) + var(--tabs-altura));
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: var(--celula-y) var(--celula-x);
  background: var(--superficie-2);
  border: none;
  border-top: 1px solid var(--contorno);
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.proj-dia-nome { font-weight: 600; }
.proj-hoje .proj-dia-nome { color: var(--acento); }

/* O resumo e a resposta a pergunta que a vista faz ("isto cabe?"), por isso
   vive no cabecalho e nao no fundo — le-se antes de se olhar para os blocos. */
.proj-dia-resumo {
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.proj-bloco {
  display: grid;
  /* Hora (em duas linhas) · corpo · prioridade. A duracao ja se le no intervalo
     de horas e a sua coluna desalinhava as linhas — saiu. */
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 2px var(--celula-x);
  border-top: 1px solid var(--contorno);
  font-size: var(--tipo);
}

.proj-bloco:first-child { border-top: none; }

/* Os quatro degraus de duracao. */
.alt-1 { min-height: var(--linha-altura); }
.alt-2 { min-height: calc(var(--linha-altura) * 1.5); }
.alt-3 { min-height: calc(var(--linha-altura) * 2.2); }
.alt-4 { min-height: calc(var(--linha-altura) * 3); }

.proj-hora {
  /* Duas linhas: inicio por cima, fim por baixo. Poupa largura ao titulo e
     lê-se de relance. O traco fica escondido (ver .proj-hora-sep). */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.proj-hora-de, .proj-hora-ate { display: block; }
.proj-hora-sep { display: none; }

.proj-corpo { min-width: 0; }

.proj-titulo {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proj-tarefa { cursor: pointer; background: var(--superficie); }
.proj-tarefa:hover { background: var(--selecao); }
.proj-tarefa.selecionada { background: var(--selecao); box-shadow: inset 2px 0 0 var(--acento); }
.proj-tarefa.marcada { background: var(--acento-fundo); }

/* Ancora: a barra a esquerda diz "isto nao se mexe" sem precisar de legenda. */
.proj-tarefa.ancora { box-shadow: inset 3px 0 0 var(--texto-2); }
.proj-tarefa.ancora.selecionada { box-shadow: inset 3px 0 0 var(--acento); }
.proj-tarefa.risco { background: color-mix(in srgb, var(--perigo) 7%, var(--superficie)); }
.proj-tarefa.conflito { background: color-mix(in srgb, var(--max) 10%, var(--superficie)); }

/* O que ja passou fica esbatido em vez de desaparecer: saber que a reuniao das
   10h aconteceu faz parte de perceber porque o resto do dia esta como esta. */
.proj-tarefa.passada { opacity: 0.5; }

.proj-marcas { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.proj-marca {
  padding: 0 5px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: var(--tipo-pequeno);
  line-height: 1.6;
}

.proj-marca.m-fixa { background: var(--acento-fundo); color: var(--acento); }
.proj-marca.m-risco,
.proj-marca.m-conflito { background: color-mix(in srgb, var(--perigo) 14%, transparent); color: var(--perigo); }
.proj-marca.m-atrasada { background: color-mix(in srgb, var(--alot) 14%, transparent); color: var(--alot); }

/* Vago e almoco: presentes mas sem peso. O buraco tem de se ver — e ele que
   explica porque a tarefa seguinte comeca mais tarde do que se esperava. */
.proj-vago, .proj-almoco {
  color: var(--texto-3);
  font-size: var(--tipo-pequeno);
}

.proj-vago { background: repeating-linear-gradient(
  135deg, transparent, transparent 6px, var(--superficie-2) 6px, var(--superficie-2) 12px); }

.proj-almoco { background: var(--superficie-2); }

/* A linha do agora: a unica coisa no ecra que e o dia real e nao o plano. */
.proj-agora {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 2px solid var(--perigo);
  color: var(--perigo);
  font-size: var(--tipo-pequeno);
  font-weight: 600;
}

.proj-agora .proj-hora { color: var(--perigo); font-weight: 600; }

.proj-transbordo { padding: 4px 0 8px; }

.proj-transbordo-titulo {
  padding: 6px var(--celula-x) 2px;
  color: var(--perigo);
  font-size: var(--tipo-pequeno);
  font-weight: 600;
}

.proj-fora { opacity: 0.85; }
.proj-fora .proj-hora { color: var(--texto-3); }

.proj-nada, .proj-rodape {
  padding: 10px var(--celula-x);
  color: var(--texto-3);
  font-size: var(--tipo-pequeno);
}

.proj-rodape { border-top: 1px solid var(--contorno); }

@media (max-width: 767px) {
  /* A hora ja se empilha em qualquer largura (ver .proj-hora); aqui so se aperta
     a grelha e se deixa o resumo do dia quebrar. */
  .proj-bloco { grid-template-columns: 48px 1fr auto; gap: 6px; }
  .proj-dia-cabeca { flex-wrap: wrap; gap: 2px 8px; }
  .proj-dia-resumo { flex-basis: 100%; }
}