/* 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;

  --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;
}

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;
}

@media (prefers-color-scheme: dark) {
  :root {
    --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; }

/* 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%;
}

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;
}

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

.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;
  background: var(--superficie);
  border-bottom: 1px solid var(--contorno);
}

.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; }

.campo-nova { width: 100%; }
.campo-procura { width: 170px; }

.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: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--fundo);
  border-bottom: 1px solid var(--contorno);
}

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

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

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

.tab.activa {
  background: var(--superficie);
  border-color: var(--contorno-forte);
  color: var(--texto);
  font-weight: 500;
}

.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. */
.grelha tr.grupo td {
  height: auto;
  padding: 0;
  background: var(--fundo);
  border-bottom: 1px solid var(--contorno);
}

.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(--superficie-2); }
.grupo-seta { width: 10px; color: var(--texto-3); }
.grupo-nome { letter-spacing: 0.01em; }

.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;
}

/* Segundo nivel de agrupamento: recuado e mais discreto, para se distinguir do
   primeiro sem precisar de linhas nem cores novas. */
.grelha tr.grupo-n2 .grupo-botao {
  padding-left: calc(var(--celula-x) + 18px);
  font-weight: 500;
  color: var(--texto-2);
}

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

.grelha tr.grupo-vazio .grupo-nome { color: var(--texto-3); font-style: italic; }
.grelha tr.dentro-n2 .col-titulo { padding-left: calc(var(--celula-x) + 12px); }
.grelha tr.dentro-n3 .col-titulo { padding-left: calc(var(--celula-x) + 24px); }

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

.grelha {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.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);
  background: var(--superficie);
  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);
  border-bottom: 1px solid var(--contorno);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.linha:hover td { background: var(--superficie-2); }
.linha.selecionada td { background: var(--selecao); }
.linha.destacada td { background: var(--destaque); }
.linha.fechada .titulo-texto { color: var(--texto-3); 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. */
.col-feito { width: 30px; text-align: center; }
.col-ref { width: 46px; }
.col-titulo { width: auto; }
.col-prioridade { width: 74px; }
.col-data { width: 92px; }
.col-contextos { width: 150px; }
.col-team { width: 80px; }
.col-horas { width: 48px; text-align: right; }
.col-estado { width: 90px; }
.col-inbox { width: 40px; text-align: center; }
.col-dono { width: 44px; }
.col-momento { width: 92px; }
.col-accoes { width: 30px; text-align: center; }

.caixa-feito { cursor: pointer; margin: 0; }

.ref { color: var(--texto-3); font-variant-numeric: tabular-nums; font-size: var(--tipo-pequeno); }
.titulo-texto { font-weight: 450; }
.titulo-texto.em-inbox::before {
  content: '≫';
  margin-right: 5px;
  color: var(--acento);
  font-size: var(--tipo-pequeno);
}

.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); }
.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);
}

.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;
}

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

.marca-inbox { color: var(--acento); font-weight: 600; }

.accao-apagar {
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--texto-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.linha:hover .accao-apagar, .linha.selecionada .accao-apagar { opacity: 1; }
.accao-apagar:hover { color: var(--perigo); }

.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; }

/* ------------------------------------------------------------------ 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; }

.painel {
  flex: 0 0 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);
}

.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-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 {
  padding: 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);
  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; }
.comentario-data { color: var(--texto-3); font-size: 10px; }
.comentario-topo .comentario-apagar { margin-left: auto; }
.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);
  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); }

/* ----------------------------------------------------------------- popovers */
.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; }

/* 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; max-height: 260px; overflow: auto; }

.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); }
.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; }

/* ------------------------------------------------------------------ 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. */
@media (max-width: 1180px) {
  .col-momento, .col-dono { display: none; }
}

/* Abaixo disto o painel deixa de caber ao lado da grelha e passa a sobrepor-se
   pela direita; ainda se ve a lista por baixo. */
@media (max-width: 1023px) {
  .painel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    flex-basis: min(var(--painel-largura), 100vw);
    max-height: 100vh;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.22);
  }
}

/* Telemovel: folha a subir de baixo, com espaco para o polegar. */
@media (max-width: 640px) {
  .painel {
    top: auto;
    left: 0;
    flex-basis: auto;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--contorno-forte);
    border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .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;
    grid-template-columns: 34px 1fr;
    align-items: start;
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--contorno);
  }

  .grelha tr.linha td { border: 0; height: auto; padding: 0; overflow: visible; }

  .grelha td.col-feito {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .grelha td.col-titulo {
    white-space: normal;
    font-size: calc(var(--tipo) + 1px);
    line-height: 1.35;
    padding-bottom: 3px;
  }

  /* Os campos secundarios em fila, com rotulo pequeno por cima do valor. */
  .grelha td.col-prioridade, .grelha td.col-data, .grelha td.col-contextos,
  .grelha td.col-team, .grelha td.col-horas, .grelha td.col-estado,
  .grelha td.col-inbox, .grelha td.col-ref, .grelha td.col-momento,
  .grelha td.col-dono {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    width: auto;
    min-height: 30px;
    margin: 2px 10px 0 0;
    padding: 2px 4px;
    border-radius: var(--raio);
  }

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

  /* O titulo nao precisa de rotulo, e o ≫ da inbox ja se ve no texto. */
  .grelha td.col-titulo::before, .grelha td.col-inbox::before { content: none; }
  .grelha td.col-feito { grid-column: 1; }

  .grelha td.col-accoes {
    position: absolute;
    top: 6px;
    right: 4px;
  }

  .accao-apagar { opacity: 1; min-width: 34px; min-height: 34px; }

  /* 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; }
  .campo-procura { width: 100%; }
  .topo-direita { flex: 1; }
  .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. */
  .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: 6px; padding-bottom: 6px; }
}

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

@media (max-width: 820px) {
  /* O topo passa a duas linhas: a altura deixa de ser fixa e o cabecalho da
     tabela deixa de poder ancorar nela. */
  .topo { flex-wrap: wrap; height: auto; padding: 6px 12px; }
  .barra-tabs { height: auto; }
  .topo-centro { order: 3; flex-basis: 100%; }
  .barra-tabs { position: static; }
  .campo-procura { width: 130px; }
  .col-estado, .col-ref { display: none; }
  .grelha thead th { position: static; }
}

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