/* Agenda — linguagem visual do funil e do admin de clientes, não a do site:
   fundo claro, painéis brancos, azul-marinho de marca, sombras suaves e cantos
   a 12px. É uma ferramenta de trabalho como o funil, não uma página de
   apresentação.

   O `style.css` do backoffice é escuro. Em vez de o duplicar em claro,
   redefinem-se aqui os mesmos tokens só para esta página: tudo o que vem de lá
   (cartões, botões, campos) passa a ler os valores claros por herança. */

:root:has(body.agenda-body) {
  --bg: #f4f5f7;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-hi: #eef1f7;

  --line: #e4e7ec;
  --line-hi: #d5d9e0;

  --ink: #14181f;
  --ink-soft: #5b6472;
  --ink-faint: #858e9c;

  /* O "acento" do backoffice é latão; aqui é o azul-marinho de marca dos
     outros dois, para os botões e destaques saírem iguais aos de lá. */
  --accent: #1a2b4a;
  --accent-hi: #24406e;
  --accent-dim: #eef1f7;

  --red: #d23b3b;
  --red-dim: #fbe8e8;
  --green: #1f9d57;
  --amber: #c9820a;

  --radius: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: var(--sans);
}

body.agenda-body {
  font-size: 15px;
  line-height: 1.45;
}

/* Os dois halos do tema escuro (latão e azul, à volta da hero) não fazem
   sentido numa ferramenta de trabalho: o fundo aqui é chapado. */
body.agenda-body::before, body.agenda-body::after { display: none; }

/* O painel e as vistas trazem `display: flex`, que ganharia ao atributo
   `hidden`. Sem isto, o editor abre-se sozinho assim que a página carrega. */
[hidden] { display: none !important; }

/* ---------- Barra do topo: sólida e escura, como o cabeçalho do funil ---------- */

.agenda-body .topbar {
  background: var(--accent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
.agenda-body .topbar-in { height: 58px; }
.agenda-body .marca { width: 44px; fill: #fff; }
.agenda-body .wordmark-txt { color: #fff; font-size: 15px; }
.agenda-body .wordmark-sub { color: rgba(255, 255, 255, 0.66); margin-top: 3px; }

/* ---------- Cabeçalho da página ---------- */

.agenda-body .wrap.wide { padding: 28px 20px 72px; }
/* A página de Tarefas cresce com a janela e cola à esquerda — alinhada com a
   barra de menus fixa, e com mais espaço para as tasks. */
.pagina-tarefas .wrap.wide { max-width: none; margin: 0; padding: 16px 20px 72px 8px; }
.pagina-tarefas .menu-head { margin-bottom: 12px; padding-left: 12px; }
.agenda-body .menu-head { margin-bottom: 20px; }
.agenda-body .menu-head h1 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 4px 0 0;
}
.agenda-body .eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
.sub { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.voltar { color: inherit; text-decoration: none; }
.voltar:hover { color: var(--accent); }

/* Botões cheios (`.primario` do style.css): sobre latão o texto era escuro,
   sobre azul-marinho tem de ser branco. Nada de `button:not(...)` aqui — esse
   tipo de seletor apanharia também os chips e as marcas do calendário. */
.agenda-body .primario { color: #fff; }
.agenda-body button.ghost:hover, .agenda-body .botao-link:hover {
  background: #eef1f7;
  border-color: var(--line-hi);
}

.avisos {
  background: #fbf1de;
  border: 1px solid #f0dcb2;
  color: #8a5a06;
  border-radius: 10px;
  padding: 11px 15px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ---------- Barra de navegação ---------- */

.barra {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.nav { display: flex; align-items: center; gap: 6px; }
.nav button.ghost { padding: 7px 13px; background: var(--surface); }
.nav strong {
  margin-left: 10px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* Só a primeira letra: `capitalize` dava "Agosto De 2026". */
.nav strong::first-letter { text-transform: uppercase; }
.vistas { display: flex; gap: 6px; }
.vistas button.ghost { padding: 7px 15px; background: var(--surface); }
/* `.vistas button.ghost.activa` e não `.vistas .activa`: senão a regra de cima
   (mais específica) voltava a pintar de branco a vista escolhida. */
.vistas button.ghost.activa {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.vistas button.ghost.activa:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--sombra);
}
.filtro .ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor, currentColor);
  flex: none;
}
.filtro.on { color: var(--ink); border-color: var(--line-hi); }
.filtro.off { opacity: 0.6; box-shadow: none; background: transparent; }
.filtro.off .ponto { background: var(--ink-faint); }
.filtro .conta { font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* ---------- Vista de mês ---------- */

.mes {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}
/* minmax(0, 1fr) e não 1fr: com `1fr` a coluna cresce até caber o título mais
   comprido do dia e a semana fica torta. Assim as sete colunas são iguais e é
   o texto que se corta. */
.semana-cab, .grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.semana-cab { border-bottom: 1px solid var(--line); background: #fafbfc; }
.semana-cab span {
  padding: 8px 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dia {
  min-height: 116px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}
.dia:nth-child(7n) { border-right: 0; }
.dia:hover { background: #f8f9fb; }
.dia.fora { background: #fafbfc; }
.dia.fora .num { color: var(--ink-faint); }
.dia.fora:hover { background: #f3f5f8; }
.dia.fds .num { color: var(--ink-faint); }
.dia .num {
  font-size: 12.5px;
  font-weight: 600;
  align-self: flex-start;
  min-width: 22px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.dia.hoje { background: #f7f9fc; }
.dia.hoje .num { background: var(--accent); color: #fff; }

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.3;
  padding: 3px 7px;
  border: 0;
  border-left: 3px solid var(--cor, var(--accent));
  border-radius: 4px;
  background: #f2f4f7;
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { background: #e8ebf1; }
.chip .h { color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; font-weight: 400; }
.chip .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip.feita .t { text-decoration: line-through; color: var(--ink-faint); }
.chip.mais {
  justify-content: center;
  background: transparent;
  border-left-color: transparent;
  color: var(--ink-faint);
  font-weight: 400;
}
.chip.mais:hover { background: transparent; color: var(--accent); }

/* ---------- Vistas de lista ---------- */

.lista { display: flex; flex-direction: column; gap: 12px; }
.dia-bloco {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 14px 18px 12px;
}
.dia-bloco h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dia-bloco.hoje h3 { color: var(--accent); }
.dia-bloco.atrasado h3 { color: var(--red); }
.item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.item:first-of-type { border-top: 0; }
.item .barrinha { width: 3px; align-self: stretch; border-radius: 2px; background: var(--cor, var(--accent)); flex: 0 0 3px; }
.item .corpo { flex: 1; min-width: 0; }
.item .tit { font-weight: 400; font-size: 15px; letter-spacing: -0.01em; }
.item:hover .tit { color: var(--accent); }
.item.feito .tit { text-decoration: line-through; color: var(--ink-faint); font-weight: 500; }
.item .det { font-size: 13px; color: var(--ink-soft); }
.item .quando { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item .marca {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-faint);
}
.item .marca:hover { border-color: var(--accent); color: var(--accent); }
.item .marca.on { background: var(--green); border-color: var(--green); color: #fff; }
.vazio { color: var(--ink-soft); font-size: 14px; padding: 24px; text-align: center; }

/* ---------- Apple Calendar ---------- */

.apple {
  margin-top: 24px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
}
.apple h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 4px; }
.apple h3 { font-size: 15px; font-weight: 650; margin: 0 0 4px; }

/* Tag do cliente no popup da tarefa (vista Mês incluída). */
.pill-cliente {
  display: inline-block; background: #eef2f9; color: #3c4454; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 600; margin-right: 8px;
}
.apple p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; }
.feed-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.feed-linha input {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft);
  background: #fafbfc;
}
.agenda-body .botao-link { background: var(--surface); }
.feed-opcao { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.feed-opcao input { width: auto; }
.icloud { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
#icloud-estado { margin-bottom: 12px; }

/* ---------- Editor ---------- */

.painel { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.painel-fundo { position: absolute; inset: 0; background: rgba(16, 24, 40, 0.42); }
.painel-caixa {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 15px rgba(16, 24, 40, 0.1), 0 20px 40px rgba(16, 24, 40, 0.14);
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.painel-caixa header { display: flex; align-items: center; justify-content: space-between; }
.painel-caixa h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.painel-caixa header button.ghost { padding: 5px 11px; }
.painel-caixa label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.painel-caixa label.check {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
}
.painel-caixa label.check input { width: auto; }
.painel-caixa .linha { display: flex; gap: 10px; }
.painel-caixa .linha label { flex: 1; }
.painel-caixa footer { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.painel-caixa .espaco { flex: 1; }
.painel-caixa .meta { font-size: 12.5px; margin: 0; color: var(--ink-faint); }
.painel-caixa .meta a { color: var(--accent); }
.editor-err { min-height: 0; }

/* ---------- Ecrãs pequenos ---------- */

@media (max-width: 760px) {
  .agenda-body .wrap.wide { padding: 20px 14px 64px; }
  .dia { min-height: 78px; padding: 4px; }
  .chip .h { display: none; }
  .chip { font-size: 11px; padding: 2px 5px; }
  /* Os dois botões ficam lado a lado, numa linha só: empilhados comiam meio
     ecrã antes de se ver o calendário. */
  .agenda-body .menu-head { flex-wrap: wrap; gap: 12px; }
  .agenda-body .head-acoes { flex-direction: row; }
  .painel-caixa .linha { flex-direction: column; }
  .dia-bloco { padding: 12px 14px 10px; }
}

/* Nome do cliente na tarefa — a agenda mostra sempre de quem é. */
.item .tit .quem {
  display: inline-block;
  font-weight: 600;
  font-size: .82em;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(26, 43, 74, .09);
  color: #1a2b4a;
  vertical-align: 1px;
}

/* Bloco das atrasadas, no topo da vista Tarefas. */
.sec-atraso {
  font-size: 15px;
  margin: 4px 0 10px;
  color: #b3261e;
}
.sec-normal {
  font-size: 15px;
  margin: 22px 0 10px;
}
.atrasadas .dia-bloco {
  border-left: 3px solid #b3261e;
}

/* Sub-tarefas: cada avaliação de imóvel dentro da tarefa do cliente. */
.subtarefas { margin-top: 6px; display: grid; gap: 3px; }
.subtarefas .sub {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #4a5262;
  padding-left: 12px; border-left: 2px solid rgba(26,43,74,.14);
}
.subtarefas .sub-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtarefas .sub-estado {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(31,157,87,.12); color: #146c40;
}

/* Título que é link para o registo de origem. */
.item .tit .tit-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(26,43,74,.28); }
.item .tit .tit-link:hover { border-bottom-color: currentColor; }

/* Procurar em toda a agenda, incluindo o que já está feito. */
.procura {
  flex: 1 1 180px; min-width: 140px; max-width: 260px;
  padding: 7px 11px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--linha, #e1e5ea); border-radius: 8px; background: #fff;
}

/* Feito fica cinzento claro — continua no calendário, sem pesar. */
.item.feito { opacity: .55; }
.item.feito .barrinha { background: #c4cad4 !important; }
.chip.feita { opacity: .5; }

/* Ações rápidas em cada item: feito e os três adiar. */
.acoes-mini { display: inline-flex; gap: 4px; margin-left: 8px; flex: 0 0 auto; }
.acoes-mini .mini {
  border: 1px solid #e1e5ea; background: #fff; border-radius: 7px;
  padding: 2px 7px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: #3c4454;
}
.acoes-mini .mini:hover { border-color: #1a2b4a; }

/* Guardar manda: ~75% para o guardar, ~25% para o apagar. */
#editor footer { display: flex; gap: 8px; align-items: stretch; }
#editor footer .espaco { display: none; }
#editor footer #f-guardar { flex: 3; }
#editor footer #f-apagar { flex: 1; }
#editor footer .ghost[data-fechar] { flex: 0 0 auto; }

/* Inbox nas Tarefas: a triagem vem primeiro. */
.sec-inbox {
  font-size: 15px; margin: 4px 0 10px;
  color: #1a2b4a;
}
.inbox-lista { border-left: 3px solid rgba(26, 43, 74, .5); }

/* Ações à esquerda, junto à barrinha. */
.acoes-mini.esq { margin-left: 0; margin-right: 8px; }


/* ---------- Tarefas com menu lateral de tags (à Todoist) ---------- */
.tarefas-wrap { display: flex; gap: 18px; align-items: flex-start; }
.tags-menu {
  flex: 0 0 216px; position: sticky; top: 12px;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  padding: 8px; display: flex; flex-direction: column; gap: 1px;
}
.tarefas-wrap > .lista { flex: 1; min-width: 0; }
.tag-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; background: none; border-radius: 8px; padding: 7px 10px;
  font-size: 13.5px; color: #5b6472; cursor: pointer; text-align: left; width: 100%;
}
.tag-item .seta { color: #8a93a6; padding: 0 2px; font-size: 11px; }
.tag-item .seta:hover { color: #1c2433; }
.tag-item:hover { background: #f3f5f9; }
.tag-item.activa { background: #eef1f7; font-weight: 650; }
.tag-item.sub { padding-left: 26px; font-size: 13px; color: #5b6472; }
.tag-item .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-item .n { font-size: 11.5px; color: #8a93a6; font-variant-numeric: tabular-nums; }
.vazio-dia { color: #c3c9d6; margin: 2px 0 10px; font-size: 14px; }

/* O menu de tags alinha com o primeiro CARTÃO da direita, não com o
   cabeçalho «A seguir» — os h2 das secções têm altura fixa para isso. */
.tarefas-wrap > .lista > h2:first-child { margin-top: 0; }
.tarefas-wrap .sec-inbox, .tarefas-wrap .sec-atraso, .tarefas-wrap .sec-normal {
  line-height: 22px; margin: 0 0 10px;
}
.tarefas-wrap .tags-menu { margin-top: 44px; }

/* Cliente por baixo do título no editor — e o nome nas listas é link. */
.cliente-linha { margin: -6px 0 10px; }
a.pill-cliente { text-decoration: none; }
a.pill-cliente:hover { background: #e2e8f4; }
.item .tit a.quem { cursor: pointer; text-decoration: none; }
.item .tit a.quem:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .tarefas-wrap { flex-direction: column; }
  .tags-menu { position: static; flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .tag-item { width: auto; }
  .tag-item.sub { padding-left: 10px; }
}


/* O botão Tarefas é laranja — é a porta de entrada do dia. */
.vistas button.ghost.laranja { background: #e8801a; border-color: #e8801a; color: #fff; font-weight: 600; }
.vistas button.ghost.laranja:hover { background: #d67213; border-color: #d67213; }
.vistas button.ghost.laranja.activa { background: #c9660d; border-color: #c9660d; color: #fff; }

/* Entrada permanente do Inbox. */
.inbox-nova { padding: 10px 14px; border-bottom: 1px dashed var(--line, #e4e7ec); }
.inbox-nova input {
  width: 100%; border: 1px solid var(--line, #e4e7ec); border-radius: 9px;
  padding: 9px 12px; font-size: 14px; font-family: inherit; background: #fff;
}
.inbox-nova input:focus { outline: 2px solid rgba(232, 128, 26, .35); border-color: #e8801a; }


/* ---------- Tarefas v2: pastas, urgente, limites, tipos ---------- */
.pasta-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; border-radius: 8px; padding: 8px 10px; margin-top: 8px; width: 100%;
  background: var(--accent, #1a2b4a); color: #fff; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pasta-cab .n { color: rgba(255,255,255,.75); font-size: 11px; }
.pasta-cab .seta { font-size: 10px; opacity: .8; }
.tag-linha { display: flex; align-items: center; }
.tag-linha .tag-item { flex: 1; }
.mover-tag {
  border: 0; background: none; color: #8a93a6; cursor: pointer; font-size: 13px;
  padding: 2px 6px; border-radius: 6px;
}
.mover-tag:hover { color: #1a2b4a; background: #eef1f7; }
.tag-item.vazia { color: #c3c9d6; cursor: default; }

.urg {
  display: inline-block; color: #e8801a; font-weight: 800; font-size: 1.05em;
  margin-right: 6px; transform: translateY(-1px);
}
.urgente-check strong { color: #e8801a; }

.chip.chip-limite {
  background: #e8801a; color: #fff; border-left-color: #c9660d; font-weight: 600;
}
.chip.chip-limite:hover { background: #d67213; }
/* ✕ de apagar tarefa: laranja em fundo branco. */
.acoes-mini .mini.x-apagar { background: #fff; color: #e8801a; border-color: #e8801a; font-weight: 700; }
.acoes-mini .mini.x-apagar:hover { background: #fff4ea; }
/* Tags escritas no texto: azuis. */
.tag-inline { color: #2b6cb0; font-weight: 600; }

/* Pasta-cab v2: nome filtra, ✎ renomeia, seta colapsa, + Nova pasta. */
.pasta-cab { cursor: default; }
.pasta-cab .rot {
  flex: 1; text-align: left; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer; padding: 0; letter-spacing: inherit; text-transform: inherit;
}
.pasta-cab .lapis, .pasta-cab .seta {
  background: none; border: 0; color: rgba(255,255,255,.75); cursor: pointer; font-size: 11px; padding: 0 2px;
}
.pasta-cab .lapis:hover, .pasta-cab .seta:hover { color: #fff; }
.pasta-cab.pasta-ativa { outline: 2px solid #e8801a; }
.nova-pasta {
  margin-top: 10px; width: 100%; border: 1px dashed var(--line, #d5d9e0); background: none;
  border-radius: 8px; padding: 7px; font-size: 12.5px; color: #5b6472; cursor: pointer;
}
.nova-pasta:hover { background: #f3f5f9; color: #1a2b4a; }

/* Sub-master: fundo sólido a 50%, ligeiramente indentado. */
.subpasta-cab { background: rgba(26, 43, 74, .5) !important; margin-left: 10px; margin-top: 4px; }
.subpasta-cab + .tag-linha .tag-item.sub, .subpasta-cab ~ .tag-linha .tag-item.sub { padding-left: 30px; }
.tag-linha[draggable="true"] { cursor: grab; }
.pasta-cab.recebe { outline: 2px dashed #e8801a; }
.apagar-tag { border: 0; background: none; color: #c3c9d6; cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 6px; }
.apagar-tag:hover { color: #d23b3b; background: #fbe8e8; }
.tag-item.recebe-tarefa { outline: 2px dashed #1f9d57; background: #e7f6ee; }
.pasta-cab[draggable="true"] { cursor: grab; }
/* O INBOX é a triagem: laranja, um só. */
.pasta-cab.pasta-inbox { background: #e8801a !important; }
.pasta-cab.pasta-inbox .n { color: rgba(255,255,255,.85); }

/* TODAS (verde, topo) e NO DATE (vermelho, fundo) — pedidos de 2/10. */
.tag-item.linha-todas { background: #1f9d57; border-radius: 8px; }
.tag-item.linha-todas .rot, .tag-item.linha-todas .n { color: #fff; font-weight: 700; }
.tag-item.linha-todas.activa { outline: 2px solid rgba(31, 157, 87, .35); }
.tag-item.linha-nodate { background: #b3261e; border-radius: 8px; margin-top: 8px; }
.tag-item.linha-nodate .rot, .tag-item.linha-nodate .n { color: #fff; font-weight: 700; }
.tag-item.linha-nodate.activa { outline: 2px solid rgba(179, 38, 30, .35); }

/* Cápsulas de tags (editor + listas): clicáveis, com ✕ para tirar. */
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 2px; align-items: center; }
.chips-linha { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; align-items: center; }
.chip-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #d7e3f2; background: #eef4fb; color: #2b6cb0;
  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600;
}
.chip-tag:hover { background: #dfeafd; }
.chip-tag.chip-pasta { background: #1c2b4a; border-color: #1c2b4a; color: #fff; }
.chip-rot { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.chip-x { border: 0; background: transparent; color: inherit; opacity: .55; font-size: 10px; cursor: pointer; padding: 0 0 0 1px; }
.chip-x:hover { opacity: 1; color: #b3261e; }
.chip-tag.chip-pasta .chip-x:hover { color: #ffb4a8; }
.chip-mais {
  border: 1px dashed #b9c3d4; background: #fff; color: #5b6472; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.chip-mais:hover { background: #f3f5f9; }
.chip-input {
  border: 1px solid #b9c3d4; border-radius: 999px; padding: 2px 10px;
  font-size: 12px; width: 120px; font-family: inherit;
}

/* Paleta de cores das pastas (32 cores, 8 por fila). */
.paleta-cores {
  position: fixed; z-index: 400; background: #fff; border: 1px solid #d8dde6;
  border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 25, 50, .18);
  display: grid; grid-template-columns: repeat(8, 24px); gap: 6px; padding: 10px;
}
.paleta-cores .cor {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .14);
  cursor: pointer; padding: 0;
}
.paleta-cores .cor:hover { transform: scale(1.18); }
.paleta-cores .cor.atual { outline: 2px solid #1c2b4a; outline-offset: 1px; }
.paleta-cores .cor-limpar {
  grid-column: 1 / -1; border: 1px dashed #c3cad6; background: #fff; border-radius: 6px;
  padding: 5px; font-size: 12px; color: #5b6472; cursor: pointer; font-family: inherit;
}
.paleta-cores .cor-limpar:hover { background: #f3f5f9; }

/* Chip WhatsApp nas linhas: verde, direto à conversa. */
.chip-tag.chip-wa { background: #1f9d57; border-color: #1f9d57; color: #fff; text-decoration: none; }
.chip-tag.chip-wa:hover { background: #188549; }