/* Área Trabalho — lista por status, janela da tarefa, captura rápida e telas (Minhas tarefas, Caixa de entrada, cliente). */

/* Cores de status e prioridade: funcionam como legenda, iguais nos dois temas. */
:root {
  --st-a-fazer: #8C8A83; --st-em-progresso: #6E56CF; --st-alteracao: #2F6FE4; --st-aguardando-info: #D1453B;
  --st-aguardando-resultado: #C77B12; --st-aprovacao-cliente: #9A6B4F; --st-feito: #1E7A55; --st-cancelado: #8C8A83; --st-arquivada: #A39F94;
  --pri-urgente: #D1453B; --pri-alta: #D9A400; --pri-normal: #2F6FE4; --pri-baixa: #8C8A83;
}
[data-status="a-fazer"] { --st: var(--st-a-fazer); } [data-status="em-progresso"] { --st: var(--st-em-progresso); }
[data-status="alteracao"] { --st: var(--st-alteracao); } [data-status="aguardando-info"] { --st: var(--st-aguardando-info); }
[data-status="aguardando-resultado"] { --st: var(--st-aguardando-resultado); } [data-status="aprovacao-cliente"] { --st: var(--st-aprovacao-cliente); }
[data-status="feito"] { --st: var(--st-feito); } [data-status="cancelado"] { --st: var(--st-cancelado); } [data-status="arquivada"] { --st: var(--st-arquivada); }

.st-pilula { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: var(--st); color: #fff; font: 600 calc(11px * var(--fs, 1))/1.4 var(--texto); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.st-pilula[data-status="a-fazer"] { background: transparent; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha); }
.st-ponto { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.st-bola { flex: none; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid var(--st); background: transparent; cursor: pointer; position: relative; }
.st-bola[data-status="a-fazer"] { border-style: dashed; }
.st-bola:not([data-status="a-fazer"])::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--st); opacity: .85; }
.st-bola:hover { box-shadow: 0 0 0 3px var(--linha); }
.pri { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs, 1)); white-space: nowrap; }
.pri__bandeira { width: 10px; height: 12px; background: var(--pri-normal); clip-path: polygon(0 0, 100% 0, 78% 38%, 100% 76%, 22% 76%, 22% 100%, 0 100%); }
.pri[data-pri="urgente"] .pri__bandeira { background: var(--pri-urgente); } .pri[data-pri="alta"] .pri__bandeira { background: var(--pri-alta); } .pri[data-pri="baixa"] .pri__bandeira { background: var(--pri-baixa); }

/* ---- Lista por status ---- */
.tl { display: flex; flex-direction: column; gap: 22px; --colunas: minmax(0, 1fr) 120px 150px 120px; }
@media (max-width: 1024px) { .tl { --colunas: minmax(0, 1fr) 76px 108px 92px; } .tl-cab, .tl-linha { gap: 8px; } }
.tl-grupo__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tl-seta { width: 20px; height: 20px; border: 0; background: none; cursor: pointer; color: var(--tinta-2); position: relative; }
.tl-seta::before { content: ''; position: absolute; inset: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-rapido) var(--ease); }
.tl-grupo--fechado .tl-seta::before { transform: rotate(-45deg); }
.tl-grupo--fechado .tl-corpo { display: none; }
.tl-conta { color: var(--tinta-2); font: 500 calc(12px * var(--fs, 1)) var(--dados); }
.tl-corpo { padding-left: 30px; }
.tl-cab, .tl-linha { display: grid; grid-template-columns: 16px var(--colunas); align-items: center; gap: 12px; }
.tl-cab { grid-template-columns: var(--colunas); padding: 6px 0 6px 28px; color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); border-bottom: 1px solid var(--linha); }
.tl-linha { padding: 0 0 0 0; min-height: 38px; border-bottom: 1px solid var(--linha-suave); cursor: pointer; }
.tl-linha:hover { background: var(--linha-suave); }
.tl-linha:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.tl-nome { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 0; }
.tl-titulo { font-weight: 600; font-size: calc(14px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-linha--feita .tl-titulo { text-decoration: line-through; color: var(--tinta-2); }
.tl-marca { font-style: normal; font-size: calc(11px * var(--fs, 1)); color: var(--tinta-2); white-space: nowrap; }
.tl-cliente { font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); text-decoration: none; white-space: nowrap; padding: 1px 7px; border-radius: 6px; background: var(--superficie-2); }
.tl-cliente:hover { color: var(--tinta); }
/* Selo do cliente ao lado do título (substitui o "[Cliente]" escrito no título). */
.tl-cli { flex: 0 0 auto; display: inline-flex; align-items: center; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; line-height: 1.5; color: var(--tinta-2); text-decoration: none; padding: 0 8px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha, rgba(0, 0, 0, .08)); }
.tl-cli:hover { color: var(--tinta); }
.tj__cli { margin: 0 0 4px; }
.qd-cli { margin: 4px 0 2px; }
.tl-cel { display: flex; align-items: center; min-height: 38px; padding: 0 4px; border: 0; background: none; color: var(--tinta); font: inherit; font-size: calc(13px * var(--fs, 1)); text-align: left; cursor: pointer; border-radius: 6px; position: relative; }
.tl-cel:hover { background: var(--linha); }
.tl-data input { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; }
.tl-data--atrasada { color: var(--st-aguardando-info); }
.tl-data--hoje { color: var(--st-aguardando-resultado); }
.tl-vazio { color: var(--tinta-2); }
.tl-avatares { display: inline-flex; }
.tl-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: var(--fundo); font: 600 calc(9px * var(--fs, 1))/1 var(--texto); border: 2px solid var(--fundo); margin-left: -6px; }
.tl-avatares .tl-avatar:first-child, .tl-menu .tl-avatar, .tj-coment .tl-avatar { margin-left: 0; }
.tl-avatar[data-pessoa="ale"] { background: #2F6FE4; color: #fff; } .tl-avatar[data-pessoa="pedro"] { background: #C9CFDD; color: #030C31; } .tl-avatar[data-pessoa="leo"] { background: #6E56CF; color: #fff; } .tl-avatar[data-pessoa="josselan"] { background: #E8590C; color: #fff; }
.tl-nova { display: flex; align-items: center; gap: 12px; padding-left: 2px; }
.tl-nova__mais { width: 16px; text-align: center; color: var(--tinta-2); }
.tl-nova input { flex: 1; border: 0; background: transparent; padding: 9px 0; box-shadow: none; border-radius: 0; font-size: calc(14px * var(--fs, 1)); min-width: 0; }
.tl-nova input:focus { outline: none; border-bottom: 1px solid var(--tinta-3); }
.tl-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: calc(11px * var(--fs, 1)); font-weight: 600; color: #fff; white-space: nowrap; }
.tag-badge[data-tag] { cursor: pointer; }
.tag-badge[data-tag]:hover { opacity: 0.8; }
.tl-menu { position: fixed; z-index: 400; min-width: 200px; max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; gap: 2px; }
.tl-menu button { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; font-size: calc(13px * var(--fs, 1)); text-align: left; cursor: pointer; }
.tl-menu button:hover, .tl-menu button:focus-visible { background: var(--linha-suave); outline: none; }
.tl-menu button[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--tinta-2); }
@media (max-width: 720px) {
  .tl { --colunas: minmax(0, 1fr) 84px; } .tl-corpo { padding-left: 0; }
  .tl-cab span:nth-child(2), .tl-cab span:nth-child(4), .tl-resp, .tl-pri { display: none; }
  .tl-titulo { white-space: normal; }
}

/* ---- Cabeçalho das telas de Trabalho ---- */
.tt-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tt-topo h1 { margin: 0; font: 600 calc(24px * var(--fs, 1))/1.2 var(--display); }
.tt-topo p { margin: 4px 0 0; color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.tt-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-barra input[type=search] { width: 200px; }
.tt-barra select { width: auto; }
.tt-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.tt-abas button { padding: 9px 12px; border: 0; background: none; color: var(--tinta-2); font: 600 calc(13px * var(--fs, 1)) var(--texto); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tt-abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }

/* Minhas tarefas */
.mt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .mt { grid-template-columns: 1fr; } }
.mt-painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-card); padding: 16px 18px; min-width: 0; }
.mt-painel > h2 { margin: 0 0 10px; font: 600 calc(15px * var(--fs, 1)) var(--texto); }
.mt-grupo summary { display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; font-weight: 600; font-size: calc(14px * var(--fs, 1)); list-style: none; }
.mt-grupo summary::-webkit-details-marker { display: none; }
.mt-grupo summary::before { content: ''; width: 6px; height: 6px; border: solid var(--tinta-2); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform var(--t-rapido) var(--ease); }
.mt-grupo[open] summary::before { transform: rotate(45deg); }
.mt-linha { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--linha-suave); cursor: pointer; min-width: 0; }
.mt-linha:hover { background: var(--linha-suave); }
.mt-linha .tl-titulo { flex: 0 1 auto; }
.mt-linha__onde { color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }
.mt-linha__data { margin-left: auto; font-size: calc(12px * var(--fs, 1)); white-space: nowrap; color: var(--tinta-2); }

/* Caixa de entrada */
.cx { max-width: 820px; display: flex; flex-direction: column; }
.cx-item { display: flex; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--linha-suave); cursor: pointer; border-radius: 8px; }
.cx-item:hover, .cx-item:focus-visible { background: var(--linha-suave); }
.cx-item--nova { background: var(--linha-suave); }
.tt-abas__n { margin-left: 6px; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pilula); background: var(--tinta); color: var(--fundo); font: 500 calc(11px * var(--fs, 1))/1.5 var(--dados); text-align: center; }
.cx-item__texto { flex: 1; min-width: 0; font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); }
.cx-item__texto b { color: var(--tinta); }
.cx-item__titulo { display: block; font-weight: 600; font-size: calc(14px * var(--fs, 1)); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-item time { font: calc(12px * var(--fs, 1)) var(--dados); color: var(--tinta-2); white-space: nowrap; }

/* Quadro */
.qd { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.qd-col { flex: 0 0 270px; background: var(--superficie-2); border-radius: var(--r-card); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.qd-col.qd-col--alvo { outline: 2px dashed var(--tinta-3); }
.qd-col header { display: flex; align-items: center; gap: 8px; }
.qd-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 10px; cursor: grab; display: flex; flex-direction: column; gap: 8px; }
.qd-cartao b { font-size: calc(13px * var(--fs, 1)); overflow-wrap: anywhere; }
.qd-cartao footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); }

/* ---- Janela da tarefa ---- */
.tj-fundo { display: grid; place-items: center; padding: 24px; }
.tj { width: min(1180px, 100%); height: min(860px, 100%); background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-card); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; overflow: hidden; }
.tj__topo { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--linha); }
.tj__caminho { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); min-width: 0; }
.tj__caminho a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.tj__caminho .sep, .tj__datas .sep { color: var(--tinta-2); }
.tj__meta { margin-left: auto; font-size: calc(11px * var(--fs, 1)); color: var(--tinta-2); white-space: nowrap; }
.tj__excluir { border: 0; background: none; color: var(--tinta-2); font: calc(13px * var(--fs, 1)) var(--texto); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.tj__excluir:hover { color: var(--erro); background: var(--erro-fundo); }
.tj__corpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; }
.tj__esq { overflow-y: auto; padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.tj__titulo { font: 600 calc(24px * var(--fs, 1))/1.25 var(--display); border: 0; background: transparent; color: var(--tinta); padding: 0; resize: none; overflow: hidden; min-height: 0; width: 100%; box-shadow: none; border-radius: 0; }
.tj__titulo:focus { outline: none; }
.tj__campos { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 12px; align-items: center; font-size: calc(13px * var(--fs, 1)); }
.tj__rot { color: var(--tinta-2); }
.tj__valor { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--tinta); font: inherit; padding: 4px 6px; margin-left: -6px; border-radius: 8px; cursor: pointer; min-height: 30px; }
.tj__valor:hover { background: var(--linha-suave); }
.tj__concluir { margin-left: 6px; width: 28px; height: 28px; border: 1px solid var(--linha); border-radius: 8px; background: none; color: var(--st-feito); cursor: pointer; }
.tj__concluir:hover { background: var(--ok-fundo); }
.tj__datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tj__datas input, .tj__sel { width: auto; padding: 5px 8px; font-size: calc(13px * var(--fs, 1)); }
.tj__atrasada input { color: var(--st-aguardando-info); }
.tj__descricao { font: calc(14px * var(--fs, 1))/1.5 var(--texto); width: 100%; border: 1px solid transparent; background: transparent; box-shadow: none; padding: 8px; margin: 0 -8px; }
.tj__descricao:hover, .tj__descricao:focus { border-color: var(--linha); }
.tj__origem { font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); display: inline-flex; align-items: center; gap: 6px; }
.tj__origem .ico { width: 14px; height: 14px; }
.tj__subs h3, .tj__dir h3 { margin: 0 0 8px; font: 600 calc(14px * var(--fs, 1)) var(--texto); }
.tj__sub { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--linha-suave); cursor: pointer; font-size: calc(13px * var(--fs, 1)); }
.tj__sub .tl-titulo { flex: 1; }
.tj__sub:hover { background: var(--linha-suave); }
.tj__dir { border-left: 1px solid var(--linha); background: var(--superficie); display: flex; flex-direction: column; min-height: 0; padding: 16px 0 0; }
.tj__dir h3 { padding: 0 18px; }
.tj__atividade { flex: 1; overflow-y: auto; margin: 0; padding: 4px 18px 12px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tj-ev { display: flex; gap: 10px; justify-content: space-between; font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); }
.tj-ev b { color: var(--tinta); font-weight: 600; }
.tj-ev time, .tj-coment time { font: calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-2); white-space: nowrap; }
.tj-coment { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; background: var(--fundo); }
.tj-coment header { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); }
.tj-coment header time { margin-left: auto; }
.tj-coment-editado { font: calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-2); margin-left: 8px; }
/* Editar/excluir aparecem ao passar o mouse OU ao receber foco pelo teclado (display:none tirava os botões do Tab) e sempre no toque. */
.tj-coment-acoes { display: flex; gap: 4px; margin-left: auto; opacity: 0; transition: opacity .15s; }
.tj-coment:hover .tj-coment-acoes, .tj-coment-acoes:focus-within { opacity: 1; }
@media (hover: none) { .tj-coment-acoes { opacity: 1; } }
.tj-coment-editar, .tj-coment-deletar { flex: none; padding: 4px 6px; border: 0; background: none; color: var(--tinta-2); font: calc(14px * var(--fs, 1)) var(--texto); cursor: pointer; border-radius: 4px; line-height: 1; transition: color 0.2s; }
.tj-coment-editar:hover, .tj-coment-deletar:hover { color: var(--tinta); }
.tj-coment p { margin: 8px 0 0; font-size: calc(13px * var(--fs, 1)); white-space: pre-wrap; overflow-wrap: anywhere; }
.tj__comentar { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--linha); }
.tj__comentar textarea { flex: 1; min-height: 0; font: calc(13px * var(--fs, 1))/1.4 var(--texto); resize: none; }
@media (max-width: 900px) {
  .tj-fundo { padding: 0; } .tj { height: 100%; border-radius: 0; }
  .tj__corpo { grid-template-columns: 1fr; overflow-y: auto; } .tj__esq { overflow: visible; padding: 18px; }
  .tj__dir { border-left: 0; border-top: 1px solid var(--linha); } .tj__atividade { overflow: visible; } .tj__meta { display: none; }
}

/* Janela com um campo de texto (pedirTexto): nome da visão salva, edição de comentário, link para copiar. */
.pt__campo { display: block; width: 100%; margin: 6px 0 4px; }
textarea.pt__campo { min-height: 120px; resize: vertical; }

/* ---- Captura rápida ---- */
.tc { display: flex; flex-direction: column; gap: 12px; }
.tc__campo { width: 100%; font-size: calc(17px * var(--fs, 1)); padding: 12px 14px; }
.tc__previa { display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.tc__titulo { font-weight: 600; overflow-wrap: anywhere; }
.tc__titulo--falta { color: var(--aviso); font-weight: 500; }
.tc__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc__ajuda { font-size: calc(12px * var(--fs, 1)); margin: 0; }

/* Espaços (clientes) no menu lateral */
.nav a.nav__espaco { padding-block: 6px; font-size: calc(13.5px * var(--fs, 1)); }
.nav__letra { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--superficie-2); color: var(--tinta-2); font: 600 calc(10px * var(--fs, 1)) var(--texto); }
.nav a[aria-current="page"] .nav__letra { background: var(--amarelo); color: var(--navy); }
.nav__num { margin-left: auto; font: calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-2); }
[data-lateral="recolhida"] .nav__num { display: none; }

/* Lista em painel estreito (Minhas tarefas): só nome e data. */
/* O widget "Atribuídas a mim" chama listaStatus() no próprio .mt-painel (que ganha a classe .tl): sem o seletor composto,
   as 4 colunas do .tl valiam, o nome ficava com 24 px e a data encavalava no título. */
.mt-painel.tl, .mt-painel .tl { --colunas: minmax(0, 1fr) 96px; }
.mt-painel .tl-cab span:nth-child(2), .mt-painel .tl-cab span:nth-child(4), .mt-painel .tl-resp, .mt-painel .tl-pri { display: none; }
.mt-painel .tl-corpo { padding-left: 0; }
.tl-titulo { min-width: 60px; flex: 0 1 auto; }
.tl-cliente { flex: 0 10 auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- Checklist ---- */
.tj__check-bloco { display: flex; flex-direction: column; gap: 10px; }
.tj__check-topo { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: calc(14px * var(--fs, 1)); }
.tj__check-meta { font: calc(12px * var(--fs, 1)) var(--dados); color: var(--tinta-2); }
.tj__check-itens { display: flex; flex-direction: column; gap: 6px; }
.tj__check-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; border: 1px solid var(--linha-suave); }
.tj__check-item:hover { background: var(--linha-suave); }
.tj__check-box { flex: none; width: 18px; height: 18px; cursor: pointer; }
.tj__check-texto { flex: 1; font-size: calc(13px * var(--fs, 1)); overflow-wrap: anywhere; }
.tj__check-item input:checked ~ .tj__check-texto { text-decoration: line-through; color: var(--tinta-2); }
.tj__check-rem { flex: none; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--tinta-2); font-size: calc(18px * var(--fs, 1)); cursor: pointer; border-radius: 4px; display: flex; opacity: 0; align-items: center; justify-content: center; line-height: 1; }
.tj__check-item:hover .tj__check-rem, .tj__check-rem:focus-visible { opacity: 1; }
@media (hover: none) { .tj__check-rem { opacity: 1; } }
.tj__check-rem:hover { background: var(--erro-fundo); color: var(--erro); }
.tj__check-add { display: flex; align-items: center; gap: 8px; padding-left: 2px; }
.tj__check-add input { flex: 1; border: 0; background: transparent; padding: 8px 0; box-shadow: none; border-radius: 0; font-size: calc(13px * var(--fs, 1)); min-width: 0; }
.tj__check-add input:focus { outline: none; border-bottom: 1px solid var(--tinta-3); }
.tj__check-add input::placeholder { color: var(--tinta-3); }

/* ---- Tempo gasto ---- */
.tj__tempo { display: flex; flex-direction: column; gap: 10px; }
.tj__tempo > strong { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs, 1)); }
.tj__tempo-badge { display: inline-block; padding: 2px 8px; background: var(--ok-fundo); color: var(--ok); border-radius: 12px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; }
.tj__tempo-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.tj__tempo-form select, .tj__tempo-form input { padding: 8px; border: 1px solid var(--linha); border-radius: 4px; font-size: calc(13px * var(--fs, 1)); background: var(--superficie); color: var(--tinta); }
.tj__tempo-form input::placeholder { color: var(--tinta-3); }
.tj__tempo-form button { padding: 8px 12px; white-space: nowrap; }
.tj__tempo-lista { display: flex; flex-direction: column; gap: 6px; }
.tj__tempo-item { display: grid; grid-template-columns: 1fr 80px 100px 1fr; gap: 8px; align-items: center; padding: 8px; border-radius: 4px; border: 1px solid var(--linha-suave); font-size: calc(13px * var(--fs, 1)); }
.tj__tempo-item:hover { background: var(--linha-suave); }
.tj__tempo-pessoa { font-weight: 500; }
.tj__tempo-horas { text-align: right; font-family: var(--dados); font-weight: 600; color: var(--ok); }
.tj__tempo-data { font-family: var(--dados); color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); }
.tj__tempo-desc { grid-column: 1 / -1; font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); font-style: italic; overflow-wrap: anywhere; }

/* ---- Lixeira ---- */
.lx-lista { display: flex; flex-direction: column; gap: 10px; }
.lx-linha { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-card); }
.lx-linha:hover { background: var(--superficie-2); }
.lx-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lx-titulo { font-weight: 600; font-size: calc(15px * var(--fs, 1)); line-height: 1.3; }
.lx-meta { font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); }
.lx-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .lx-linha { grid-template-columns: 1fr; }
  .lx-acoes { justify-content: flex-start; }
}

/* ---- Menções em comentários ---- */
.tj-mencao { display: inline-block; background: var(--aviso-fundo); color: var(--aviso); padding: 2px 6px; border-radius: 4px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tj-mencao:hover { background: var(--aviso); color: var(--aviso-fundo); }

/* ---- Popup de autocompletar menções ---- */
.tj__mencao-popup { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); max-height: 200px; overflow-y: auto; z-index: 10; margin-bottom: 4px; }
.tj__mencao-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--linha-suave); font-size: calc(13px * var(--fs, 1)); }
.tj__mencao-item:last-child { border-bottom: none; }
.tj__mencao-item:hover { background: var(--linha-suave); }
.tj__mencao-popup .tl-avatar { flex: none; width: 28px; height: 28px; font-size: calc(11px * var(--fs, 1)); font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* ---- Filtros avançados e visões salvas ---- */
.tt-container { display: flex; gap: 20px; align-items: flex-start; }
/* A animação "subir" de .vista > * usa fill-mode "both" e deixa um transform no fim: a barra em massa (position: fixed) passava a se posicionar em relação a este bloco e saía da tela. */
.vista > .tt-container, .vista > .pn { animation-fill-mode: backwards; }
.tt-sidebar { width: 200px; flex-shrink: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-card); padding: 12px; max-height: calc(100vh - 200px); overflow-y: auto; }
.tt-sidebar__titulo { font: 600 calc(12px * var(--fs, 1)) var(--texto); color: var(--tinta-2); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 0 6px; }
.tt-sidebar__lista { display: flex; flex-direction: column; gap: 6px; }
.tt-visao-item { display: flex; gap: 6px; align-items: center; }
.tt-visao-nome { flex: 1; border: 0; background: none; padding: 6px 8px; border-radius: 6px; color: var(--tinta); font: calc(13px * var(--fs, 1)) var(--texto); text-align: left; cursor: pointer; }
.tt-visao-nome:hover { background: var(--linha-suave); }
.tt-visao-estrela, .tt-visao-del { border: 0; background: none; padding: 4px; cursor: pointer; font-size: calc(14px * var(--fs, 1)); border-radius: 4px; flex-shrink: 0; }
.tt-visao-estrela:hover, .tt-visao-del:hover { background: var(--linha-suave); }
.tt-visao-estrela--ativa { opacity: 1; }
.tt-conteudo { flex: 1; min-width: 0; }
.tt-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.tt-filtros input[type=search], .tt-filtros select { padding: 6px 10px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--tinta); font: calc(13px * var(--fs, 1)) var(--texto); }
.tt-filtros input[type=search] { flex: 1; min-width: 150px; }
.tt-filtros select { width: auto; }
.tt-filtros label { margin: 0; display: flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs, 1)); }
.tt-filtros button { padding: 6px 10px; white-space: nowrap; }
@media (max-width: 1024px) { .tt-container { flex-direction: column; align-items: stretch; } .tt-conteudo { width: 100%; max-width: 100%; } .tt-sidebar { width: 100%; max-height: none; margin-bottom: 16px; } }

/* ---- Seleção múltipla e ações em massa ---- */
.tl-checkbox { width: 18px; height: 18px; cursor: pointer; flex: none; }
.tl-barra-selecao { display: flex; align-items: center; background: var(--aviso-fundo); border: 1px solid var(--aviso); border-radius: var(--r-card); padding: 12px 16px; margin-bottom: 16px; animation: slideDown 0.2s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.tl-barra-selecao__conteudo { display: flex; align-items: center; gap: 16px; flex: 1; }
.tl-barra-selecao__info { flex: none; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.tl-barra-selecao__acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; }
.tl-barra-selecao__select { padding: 6px 10px; border: 1px solid var(--aviso); border-radius: 6px; background: var(--fundo); color: var(--tinta); font: calc(13px * var(--fs, 1)) var(--texto); cursor: pointer; }
.tl-barra-selecao__select:focus { outline: 2px solid var(--aviso); outline-offset: 2px; }
.tl-barra-selecao__botao { padding: 6px 12px; border: 1px solid var(--aviso); border-radius: 6px; background: var(--fundo); color: var(--tinta); font: calc(13px * var(--fs, 1)) var(--texto); cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.tl-barra-selecao__botao:hover { background: var(--aviso); color: var(--fundo); }
.tl-barra-selecao__botao--perigo { border-color: var(--erro); color: var(--erro); }
.tl-barra-selecao__botao--perigo:hover { background: var(--erro); color: var(--fundo); }
.tl-barra-selecao__fechar { flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--tinta); font-size: calc(20px * var(--fs, 1)); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.tl-barra-selecao__fechar:hover { background: rgba(0, 0, 0, 0.1); }
@media (max-width: 720px) {
  .tl-barra-selecao { flex-direction: column; gap: 12px; }
  .tl-barra-selecao__conteudo { flex-direction: column; width: 100%; gap: 12px; }
  .tl-barra-selecao__acoes { width: 100%; }
  .tl-barra-selecao__select { flex: 1; }
}

/* ---- Automações ---- */
.tj-automacoes { display: flex; flex-direction: column; gap: 16px; }
.tj-auto-card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow 0.2s; }
.tj-auto-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.tj-auto-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tj-auto-cabeca h3 { margin: 0; font-size: calc(16px * var(--fs, 1)); font-weight: 600; }
.tj-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tj-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
.tj-auto-desc { margin: 0; font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); }
.tj-auto-config { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--linha-suave); padding: 10px 12px; border-radius: 6px; }
.tj-auto-trigger, .tj-auto-acao { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs, 1)); }
.tj-auto-trigger strong, .tj-auto-acao strong { font-weight: 600; }
.tj-auto-acoes { display: flex; gap: 8px; justify-content: flex-end; }
.tj-auto-formulario { display: flex; flex-direction: column; gap: 16px; }
.tj-grupo { display: flex; flex-direction: column; gap: 6px; }
.tj-grupo label { font-weight: 500; font-size: calc(13px * var(--fs, 1)); }
.obrigatorio { color: var(--erro); }
.tj-grupo input[type="text"],
.tj-grupo input[type="number"],
.tj-grupo textarea,
.tj-grupo select { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--tinta); font: calc(13px * var(--fs, 1)) var(--texto); }
.tj-grupo textarea { resize: vertical; min-height: 60px; }
.tj-condicao-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tj-condicao-row select,
.tj-condicao-row input { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--tinta); font: calc(13px * var(--fs, 1)) var(--texto); }
.tj-grupo--acoes { flex-direction: row; gap: 8px; }
.tj-grupo--acoes button { margin-top: 8px; }
@media (max-width: 640px) {
  .tj-auto-config { grid-template-columns: 1fr; }
  .tj-condicao-row { grid-template-columns: 1fr; }
  .tj-grupo--acoes { flex-direction: column; }
}

/* ---- Dashboard de Carteira ---- */
.carteira-dashboard { display: flex; flex-direction: column; gap: 24px; padding: 20px; }
.carteira-topo { display: flex; flex-direction: column; gap: 8px; }
.carteira-topo h1 { margin: 0; font-size: calc(28px * var(--fs, 1)); font-weight: 600; color: var(--tinta); }
.carteira-topo p { margin: 0; font-size: calc(14px * var(--fs, 1)); color: var(--tinta-2); }

.carteira-tabela { overflow-x: auto; }
.tabela-carteira { width: 100%; border-collapse: collapse; font: calc(13px * var(--fs, 1)) var(--texto); }
.tabela-carteira thead { background: var(--linha-suave); }
.tabela-carteira th { padding: 12px; text-align: left; font-weight: 600; color: var(--tinta); border-bottom: 2px solid var(--linha); }
.tabela-carteira th.centro { text-align: center; }
.tabela-carteira td { padding: 12px; border-bottom: 1px solid var(--linha-suave); color: var(--tinta); }
.tabela-carteira td.centro { text-align: center; }

.carteira-linha { transition: background 0.15s; }
.carteira-linha:hover { background: var(--linha-suave); }

.carteira-cliente { font-weight: 500; }
.carteira-link { color: var(--tinta); text-decoration: none; padding: 4px 8px; border-radius: 4px; }
.carteira-link:hover { background: var(--linha); }

.carteira-atrasadas { color: var(--st-aguardando-info); font-weight: 600; }
.carteira-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: calc(12px * var(--fs, 1)); white-space: nowrap; }
.carteira-status--ok { background: rgba(30, 122, 85, 0.15); color: #1E7A55; }
.carteira-status--atencao { background: rgba(217, 164, 0, 0.15); color: #D9A400; }
.carteira-status--critico { background: rgba(209, 69, 59, 0.15); color: #D1453B; }

/* Seleção múltipla: a caixa entra como coluna própria e só aparece ao passar o mouse (ou quando marcada), como no ClickUp. */
.tl-linha { grid-template-columns: 16px 16px var(--colunas); }
.tl-cab { padding-left: 56px; }
.tl-checkbox { width: 15px; height: 15px; margin: 0; opacity: 0; transition: opacity var(--t-rapido) var(--ease); }
.tl-linha:hover .tl-checkbox, .tl-linha:focus-within .tl-checkbox, .tl-checkbox:checked { opacity: 1; }
.tl-nome { flex-wrap: nowrap; }
.tl-tags { display: inline-flex; gap: 4px; flex: none; }
@media (hover: none) { .tl-checkbox { opacity: 1; } }

/* =====================================================================================
   Acabamento 01/10: seletor pesquisável, textarea que cresce, janela redimensionável,
   dependências, seleção em massa e subtarefas na lista.
   ===================================================================================== */

/* ---- Seletor pesquisável (substitui o <select> nativo) ---- */
.sel-nativo { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; padding: 0 !important; border: 0 !important; }
.sel { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; max-width: 100%; padding: 0 12px 0 14px;
  border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie); color: var(--tinta); font: 500 calc(13px * var(--fs, 1)) var(--texto); cursor: pointer; text-align: left;
  transition: border-color var(--t-rapido) var(--ease), box-shadow var(--t-medio) var(--ease), background var(--t-rapido) var(--ease); }
.sel:hover { border-color: var(--tinta-3); }
.sel[aria-expanded="true"], .sel:focus-visible { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px var(--linha-suave); }
.sel__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__texto--vazio { color: var(--tinta-2); }
.sel__seta { flex: none; width: 7px; height: 7px; margin-top: -3px; border: solid var(--tinta-2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--t-rapido) var(--ease); }
.sel[aria-expanded="true"] .sel__seta { transform: rotate(-135deg); margin-top: 3px; }
.sel--campo { border-radius: 10px; min-height: 32px; border-color: transparent; background: transparent; padding-left: 6px; margin-left: -6px; justify-self: start; }
.sel--campo:hover { background: var(--linha-suave); border-color: transparent; }

.tl-menu { padding: 6px; border-radius: 14px; gap: 0; max-height: min(60vh, 420px); overflow: hidden; animation: tl-menu-entra 120ms var(--ease); }
@keyframes tl-menu-entra { from { opacity: 0; transform: translateY(-4px); } }
.tl-menu__busca { padding: 2px 2px 6px; border-bottom: 1px solid var(--linha-suave); margin-bottom: 4px; }
.tl-menu__busca input { width: 100%; min-height: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo); font: 500 calc(13px * var(--fs, 1)) var(--texto); box-shadow: none; }
.tl-menu__busca input:focus { border-color: var(--tinta-3); box-shadow: none; }
.tl-menu__itens { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }
.tl-menu button { min-height: 32px; flex: none; }
.tl-menu button[data-ativo] { background: var(--linha-suave); box-shadow: inset 2px 0 0 var(--tinta); }
.tl-menu button[aria-checked="true"] { font-weight: 600; }
.tl-menu__vazio { margin: 0; padding: 10px; font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); }
.tl-menu__id { flex: none; font-size: calc(11px * var(--fs, 1)); color: var(--tinta-2); }
.tl-menu__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-menu__dica { margin-left: auto; padding-left: 10px; font-size: calc(11px * var(--fs, 1)); color: var(--tinta-2); white-space: nowrap; }
.st-bola--mini { width: 12px; height: 12px; border-width: 1.5px; pointer-events: none; }
.tt-filtros .sel { min-height: 32px; }
.tj__tempo-form .sel { border-radius: 10px; min-height: 36px; width: 100%; }

/* ---- Campos de texto que crescem com o conteúdo ---- */
textarea.cresce { resize: none; overflow-y: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }
textarea.cresce::-webkit-scrollbar { width: 8px; }
textarea.cresce::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
textarea.cresce::-webkit-resizer { display: none; }
.tj__descricao { font: calc(14px * var(--fs, 1))/1.55 var(--texto); margin: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--linha-suave); background: var(--superficie); min-height: 64px; }
.tj__descricao:hover { border-color: var(--linha); }
.tj__descricao:focus { border-color: var(--tinta-3); box-shadow: 0 0 0 4px var(--linha-suave); }
.tj__comentar textarea { padding: 9px 14px; border-radius: 16px; font: calc(13px * var(--fs, 1))/1.45 var(--texto); min-height: 38px; background: var(--fundo); }
.tj__comentar { position: relative; }

/* ---- Janela da tarefa: sem a luz radial do modal, redimensionável ---- */
.tj-fundo::before { display: none; }
.tj-fundo { place-items: center; padding: 16px; }
.tj { position: relative; overflow: visible; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); min-width: min(640px, 100%); }
.tj__topo { border-radius: var(--r-card) var(--r-card) 0 0; }
.tj__corpo { grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 460px); overflow: hidden; border-radius: 0 0 var(--r-card) var(--r-card); }
.tj-alca { position: absolute; z-index: 5; }
.tj-alca--n, .tj-alca--s { left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.tj-alca--n { top: -4px; } .tj-alca--s { bottom: -4px; }
.tj-alca--l, .tj-alca--o { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.tj-alca--l { right: -4px; } .tj-alca--o { left: -4px; }
.tj-alca--nl, .tj-alca--no, .tj-alca--sl, .tj-alca--so { width: 16px; height: 16px; }
.tj-alca--nl { top: -4px; right: -4px; cursor: nesw-resize; } .tj-alca--so { bottom: -4px; left: -4px; cursor: nesw-resize; }
.tj-alca--no { top: -4px; left: -4px; cursor: nwse-resize; } .tj-alca--sl { bottom: -4px; right: -4px; cursor: nwse-resize; }
.tj-alca--sl::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 8px; height: 8px; border: solid var(--tinta-3); border-width: 0 1.5px 1.5px 0; border-radius: 0 0 3px 0; opacity: .55; transition: opacity var(--t-rapido); }
.tj:hover .tj-alca--sl::after { opacity: 1; }
.tj-redimensionando, .tj-redimensionando * { user-select: none !important; }
@media (max-width: 900px) { .tj-alca { display: none; } .tj { min-width: 0; max-width: none; max-height: none; overflow: hidden; } .tj-fundo { padding: 0; } }

/* Títulos de seção da janela: todos com o mesmo peso. */
.tj__esq h3, .tj__check-topo strong, .tj__tempo > strong { margin: 0 0 8px; font: 600 calc(14px * var(--fs, 1)) var(--texto); letter-spacing: 0; display: flex; align-items: baseline; gap: 8px; }
.tj__esq h3 .mudo { font: 500 calc(12px * var(--fs, 1)) var(--texto); }

/* ---- Dependências ---- */
.tj-deps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tj-dep { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie); font-size: calc(12.5px * var(--fs, 1)); transition: border-color var(--t-rapido); }
.tj-dep:hover { border-color: var(--tinta-3); }
.tj-dep a { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 4px 4px 10px; color: var(--tinta); text-decoration: none; }
.tj-dep__ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--tinta-3)); }
.tj-dep .mono { font-size: calc(11px * var(--fs, 1)); color: var(--tinta-2); }
.tj-dep__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.tj-dep__st { font-size: calc(11px * var(--fs, 1)); color: var(--tinta-2); white-space: nowrap; }
.tj-dep--feita .tj-dep__titulo { text-decoration: line-through; color: var(--tinta-2); }
.tj-dep__tirar { flex: none; width: 22px; height: 22px; margin-right: 3px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinta-2); font-size: calc(15px * var(--fs, 1)); line-height: 1; cursor: pointer; }
.tj-dep__tirar:hover { background: var(--erro-fundo); color: var(--erro); }
.tj-deps__busca input { width: 100%; min-height: 0; padding: 7px 12px; border-radius: 10px; border: 1px dashed var(--linha); background: transparent; font: calc(13px * var(--fs, 1)) var(--texto); box-shadow: none; }
.tj-deps__busca input:hover { border-color: var(--tinta-3); }
.tj-deps__busca input:focus { border-style: solid; border-color: var(--tinta-3); box-shadow: none; }
.tj__bloq { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); }
.tl-cadeado { width: 12px; height: 12px; flex: none; }

/* ---- Seleção nas linhas: caixa própria, discreta e arredondada ---- */
.tl-checkbox { display: none; }
.tl-sel { width: 16px; height: 16px; padding: 0; border: 1.5px solid var(--tinta-3); border-radius: 5px; background: transparent; cursor: pointer; position: relative; opacity: 0;
  transition: opacity var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); }
.tl-linha:hover .tl-sel, .tl-linha:focus-within .tl-sel, .tl--selecionando .tl-sel, .tl-sel:focus-visible { opacity: 1; }
.tl-sel:hover { border-color: var(--tinta); }
.tl-sel[aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); }
.tl-sel[aria-checked="true"]::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--fundo); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.tl-linha--marcada { background: var(--linha-suave); }
@media (hover: none) { .tl-sel { opacity: 1; } }

/* ---- Barra única de ações em massa (flutuante, no rodapé) ---- */
.tl-massa { position: fixed; z-index: 150; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px;
  max-width: calc(100vw - 24px); border-radius: var(--r-pilula); background: var(--tinta); color: var(--fundo); box-shadow: var(--sombra-alta); animation: tl-massa-entra 180ms var(--ease-mola); }
.tl-massa--saindo { animation: tl-massa-sai 160ms var(--ease-sai) both; }
@keyframes tl-massa-entra { from { opacity: 0; transform: translate(-50%, 12px) scale(.97); } }
@keyframes tl-massa-sai { to { opacity: 0; transform: translate(-50%, 8px) scale(.98); } }
.tl-massa__conta { font: 500 calc(12px * var(--fs, 1)) var(--dados); white-space: nowrap; padding-right: 6px; }
.tl-massa__sep { width: 1px; height: 18px; background: color-mix(in srgb, var(--fundo) 25%, transparent); margin-right: 4px; }
.tl-massa button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pilula); background: transparent; color: inherit; font: 600 calc(13px * var(--fs, 1)) var(--texto); cursor: pointer; white-space: nowrap; transition: background var(--t-rapido); }
.tl-massa button:hover, .tl-massa button[aria-expanded="true"] { background: color-mix(in srgb, var(--fundo) 14%, transparent); }
.tl-massa .tl-massa__perigo:hover { background: var(--st-aguardando-info); color: #fff; }
.tl-massa .tl-massa__fechar { width: 32px; padding: 0; font-size: calc(18px * var(--fs, 1)); font-weight: 400; }
@media (max-width: 720px) { .tl-massa { bottom: 12px; padding-left: 12px; } .tl-massa button { padding: 0 8px; font-size: calc(12px * var(--fs, 1)); } }

/* ---- Subtarefas na lista: logo abaixo da mãe, recuadas e menores ---- */
.tl-filhas[hidden] { display: none; }
.tl-linha--sub { min-height: 32px; }
.tl-linha--sub .tl-nome { padding-left: 24px; position: relative; padding-block: 5px; }
.tl-linha--sub .tl-titulo { font-weight: 500; font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); }
.tl-linha--sub .st-bola { width: 13px; height: 13px; justify-self: center; }
.tl-linha--sub .tl-cel { min-height: 32px; font-size: calc(12px * var(--fs, 1)); }
.tl-ramo { position: absolute; left: 6px; top: 0; height: 50%; width: 12px; border: solid var(--tinta-3); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 6px; opacity: .6; }
.tl-subs { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 22px; padding: 0 8px 0 7px; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie-2, var(--superficie)); color: var(--tinta-2); font: 500 calc(11px * var(--fs, 1)) var(--dados); cursor: pointer; order: 2;
  transition: border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease); }
.tl-subs:hover { border-color: var(--tinta-3); color: var(--tinta); }
.tl-subs--aberto { color: var(--tinta); border-color: var(--tinta-3); }
.tl-subs__ico { width: 13px; height: 13px; flex: none; }
.tl-subs__conta { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tl-subs__seta { width: 5px; height: 5px; margin-left: 1px; border: solid currentColor; border-width: 0 1.4px 1.4px 0; transform: translateY(-1px) rotate(45deg); transition: transform var(--t-rapido) var(--ease); }
.tl-subs:not(.tl-subs--aberto) .tl-subs__seta { transform: rotate(-45deg); }
.tl-filhas > .tl-linha--sub:not(:last-child) .tl-nome::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 1.5px solid var(--tinta-3); opacity: .6; pointer-events: none; }
.tl-linha--sub { background: color-mix(in srgb, var(--linha-suave) 45%, transparent); }

/* Quadro: o cartão da mãe traz o contador e a lista curta das filhas */
.qd-subs { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.qd-subs .tl-subs { order: 0; }
.qd-subs__lista { list-style: none; margin: 0; padding: 0 0 0 10px; width: 100%; display: flex; flex-direction: column; gap: 2px; border-left: 1.5px solid color-mix(in srgb, var(--tinta-3) 45%, transparent); }
.qd-subs__lista[hidden] { display: none; }
.qd-sub { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 6px; font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); cursor: pointer; min-width: 0; }
.qd-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-sub:hover, .qd-sub:focus-visible { background: var(--linha-suave); color: var(--tinta); }
.qd-sub .st-bola { width: 11px; height: 11px; flex: none; }
.qd-sub--feita span { text-decoration: line-through; color: var(--tinta-2); }
.qd-sub--mais { cursor: default; color: var(--tinta-2); font-size: calc(11px * var(--fs, 1)); }
.qd-sub--mais:hover { background: none; color: var(--tinta-2); }
.qd-cartao--sub { border-style: dashed; }
.qd-cartao--sub > .tl-marca--sub { align-self: flex-start; }
.tl-nome > .tl-titulo { order: 1; } .tl-nome > :not(.tl-titulo):not(.tl-subs):not(.tl-ramo) { order: 3; }
.tl-marca--sub { padding: 0 6px; border-radius: var(--r-pilula); background: var(--linha-suave); font-size: calc(10.5px * var(--fs, 1)); }
.tl-marca--bloq { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); }
.tl-marca--bloq b { font-weight: 500; }
.mt-linha--sub { padding-left: 18px; font-size: calc(13px * var(--fs, 1)); }
.mt-linha--sub .tl-titulo { font-weight: 500; font-size: calc(13px * var(--fs, 1)); }

/* Na coluna da janela nenhum bloco encolhe (o título e a descrição sumiam com a rolagem). */
.tj__esq > * { flex-shrink: 0; }
.tj__datas input { border-radius: 10px; padding: 5px 10px; background: var(--superficie); border: 1px solid var(--linha-suave); color-scheme: light dark; }
.tj__check-topo { margin-bottom: 0; }
.tj__esq, .tj__atividade { scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }

/* ---- Minhas tarefas: painel de widgets (grade de 12 colunas, células de 44 px) ---- */
.pn { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 16px; }
.pn-w { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-card); box-shadow: var(--sombra);
  transition: box-shadow var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), opacity 160ms var(--ease); }
.pn-w:hover { border-color: color-mix(in srgb, var(--tinta-3) 55%, var(--linha)); }
.pn-w__topo { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--linha-suave); cursor: grab; user-select: none; touch-action: none; }
.pn-w__topo h2 { margin: 0; font: 600 calc(14px * var(--fs, 1)) var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pn-w__pega { display: grid; place-items: center; width: 16px; color: var(--tinta-2); opacity: .55; transition: opacity var(--t-rapido); }
.pn-w__pega svg { width: 14px; height: 14px; }
.pn-w:hover .pn-w__pega { opacity: 1; }
.pn-w__extra { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pn-w__acoes { margin-left: auto; display: flex; gap: 2px; opacity: .35; transition: opacity var(--t-rapido); }
.pn-w:hover .pn-w__acoes, .pn-w:focus-within .pn-w__acoes { opacity: 1; }
.pn-w__acoes button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tinta-2); cursor: pointer; }
.pn-w__acoes button:hover { background: var(--linha-suave); color: var(--tinta); }
.pn-w__acoes svg { width: 15px; height: 15px; }
.pn-w__acoes [data-pn="recolher"] svg { transition: transform var(--t-rapido) var(--ease); }
.pn-w--recolhido [data-pn="recolher"] svg { transform: rotate(-90deg); }
.pn-w--recolhido .pn-w__corpo, .pn-w--recolhido .pn-w__alca--b, .pn-w--recolhido .pn-w__alca--db { display: none; }
.pn-w--recolhido .pn-w__topo { border-bottom: 0; }
.pn-w__corpo { flex: 1; min-height: 0; overflow: auto; padding: 6px 14px 14px; scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }
.pn-w__corpo.mt-painel { background: none; border: 0; border-radius: 0; padding: 6px 14px 14px; }
.pn-abas { margin: 0 0 0 4px; border: 0; gap: 2px; }
.pn-abas button { padding: 4px 9px; border-radius: var(--r-pilula); border-bottom: 0; margin: 0; font-size: calc(12px * var(--fs, 1)); }
.pn-abas button[aria-selected="true"] { background: var(--linha-suave); }
.pn-num { font: 500 calc(11px * var(--fs, 1)) var(--dados); padding: 1px 7px; border-radius: var(--r-pilula); background: var(--linha-suave); color: var(--tinta-2); }
.pn-num--alerta { background: var(--erro-fundo); color: var(--erro); }
.pn-mudo { padding: 14px 2px; margin: 0; }
/* Alças: borda direita, borda de baixo e canto */
.pn-w__alca { position: absolute; z-index: 2; touch-action: none; }
.pn-w__alca--d { top: 44px; right: 0; bottom: 14px; width: 8px; cursor: ew-resize; }
.pn-w__alca--b { left: 14px; right: 14px; bottom: 0; height: 8px; cursor: ns-resize; }
.pn-w__alca--db { right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; }
.pn-w__alca--db::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border: solid var(--tinta-3); border-width: 0 1.6px 1.6px 0; border-bottom-right-radius: 3px; opacity: 0; transition: opacity var(--t-rapido); }
.pn-w:hover .pn-w__alca--db::after { opacity: .8; }
.pn-w__alca--d:hover { background: linear-gradient(var(--tinta-3), var(--tinta-3)) center / 2px 36px no-repeat; }
.pn-w__alca--b:hover { background: linear-gradient(var(--tinta-3), var(--tinta-3)) center / 36px 2px no-repeat; }
/* Durante o gesto */
.pn-gesto, .pn-gesto * { user-select: none !important; }
.pn-gesto .pn-w__topo { cursor: grabbing; }
.pn-w--movendo { z-index: 20; box-shadow: var(--sombra-alta); opacity: .94; transition: none; cursor: grabbing; }
.pn-w--redim { z-index: 20; box-shadow: var(--sombra-alta); }
.pn-sombra { z-index: 1; border: 1.5px dashed var(--tinta-3); border-radius: var(--r-card); background: color-mix(in srgb, var(--amarelo) 10%, transparent); pointer-events: none; }
.pn-w--saindo { opacity: 0; transform: scale(.98); }
.pn-w--novo { animation: pn-entra 420ms var(--ease-mola, ease); }
@keyframes pn-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.pn-vazio { grid-column: 1 / -1; grid-row: 1 / span 3; display: grid; place-items: center; align-content: center; gap: 10px; border: 1.5px dashed var(--linha); border-radius: var(--r-card); color: var(--tinta-2); }
@media (max-width: 900px) {
  .pn { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pn-w { grid-column: 1 / -1 !important; grid-row: auto !important; max-height: 520px; }
  .pn-w__alca { display: none; } .pn-w__topo { cursor: default; }
}
/* Linhas e subtarefas nos widgets */
.mt-filhas[hidden] { display: none; }
.mt-linha--sub { position: relative; padding-left: 30px; border-top-style: dashed; }
.mt-ramo { position: absolute; left: 12px; top: 0; height: 50%; width: 11px; border: solid var(--tinta-3); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 6px; opacity: .6; }
.mt-filhas > .mt-linha--sub:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; border-left: 1.5px solid var(--tinta-3); opacity: .6; }
.mt-linha--sub .st-bola { width: 13px; height: 13px; }
.mt-linha--sub .tl-titulo { color: var(--tinta-2); }
.mt-linha .tl-subs { order: 0; }
/* Listas simples (reuniões, Gmail, lembretes) */
.pn-lista { list-style: none; margin: 0; padding: 0; }
.pn-lista > li { border-top: 1px solid var(--linha-suave); }
.pn-lista > li:first-child { border-top: 0; }
.pn-reu { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; }
.pn-reu__hora { display: flex; flex-direction: column; font: 500 calc(12px * var(--fs, 1)) var(--dados); }
.pn-reu__hora span { color: var(--tinta-2); font-size: calc(11px * var(--fs, 1)); }
.pn-reu__titulo { font-size: calc(13px * var(--fs, 1)); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pn-reu__selo { margin-left: 6px; padding: 0 6px; border-radius: var(--r-pilula); background: var(--amarelo); color: var(--navy); font: normal 600 calc(10px * var(--fs, 1)) var(--dados); }
.pn-reu__entrar { min-height: 30px; padding: 0 12px; font-size: calc(12px * var(--fs, 1)); }
.pn-mail { display: grid; gap: 1px; padding: 9px 2px; color: inherit; text-decoration: none; min-width: 0; }
.pn-mail:hover { background: var(--linha-suave); }
.pn-mail b, .pn-mail span, .pn-mail small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-mail b { font-size: calc(12px * var(--fs, 1)); font-weight: 600; }
.pn-mail span { font-size: calc(13px * var(--fs, 1)); }
.pn-mail small { color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); }
.pn-aviso { display: grid; gap: 10px; justify-items: start; padding: 10px 0; color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.pn-aviso p { margin: 0; }
.pn-meet { display: grid; gap: 12px; justify-items: start; padding-top: 6px; }
.pn-meet p { margin: 0; }
.pn-meet__res { display: grid; gap: 8px; width: 100%; }
.pn-meet__res code { font: 500 calc(13px * var(--fs, 1)) var(--dados); padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); overflow-wrap: anywhere; }
.pn-meet__res span { display: flex; gap: 8px; flex-wrap: wrap; }
/* Por cliente */
.pn-barras { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 4px; }
.pn-barras a { display: grid; grid-template-columns: minmax(70px, 38%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; color: inherit; text-decoration: none; font-size: calc(13px * var(--fs, 1)); }
.pn-barras a:hover { background: var(--linha-suave); }
.pn-barras__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-barras__trilho { height: 6px; border-radius: 4px; background: var(--linha-suave); overflow: hidden; }
.pn-barras__trilho i { display: block; height: 100%; border-radius: 4px; background: var(--tinta-2); }
.pn-barras__n { font: 500 calc(12px * var(--fs, 1)) var(--dados); }
.pn-barras__n em { font-style: normal; color: var(--erro); }
/* Semana */
.pn-semana { display: grid; grid-template-columns: repeat(var(--pn-dias, 7), minmax(0, 1fr)); gap: 8px; height: 100%; padding-top: 4px; }
.pn-dia { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border-radius: 12px; background: var(--superficie-2); overflow: auto; scrollbar-width: none; }
.pn-dia header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); text-transform: capitalize; }
.pn-dia header span { font: 600 calc(16px * var(--fs, 1)) var(--display); color: var(--tinta); }
.pn-dia--hoje { background: var(--navy); color: #F1EFE8; }
.pn-dia--hoje header, .pn-dia--hoje header span { color: #F1EFE8; }
.pn-dia--hoje header span::after { content: "*"; color: var(--amarelo); margin-left: 1px; }
.pn-ev, .pn-tar { display: block; flex: none; min-width: 0; padding: 4px 6px; border: 0; border-radius: 7px; background: var(--superficie); color: var(--tinta); font: calc(11.5px * var(--fs, 1)) var(--texto); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-ev i { margin-right: 5px; font: normal 500 calc(10.5px * var(--fs, 1)) var(--dados); color: var(--tinta-2); }
.pn-ev { box-shadow: inset 2px 0 0 var(--tinta-3); }
.pn-tar .st-bola { display: inline-block; vertical-align: -1px; width: 10px; height: 10px; margin-right: 5px; }
.pn-dia--hoje .pn-ev, .pn-dia--hoje .pn-tar { background: color-mix(in srgb, #F1EFE8 12%, transparent); color: #F1EFE8; }
.pn-dia--hoje .pn-ev i { color: color-mix(in srgb, #F1EFE8 70%, transparent); }
.pn-dia__vazio { color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); }
.pn-dia--hoje .pn-dia__vazio { color: color-mix(in srgb, #F1EFE8 50%, transparent); }
/* Tempo */
.pn-tempo { display: grid; gap: 12px; padding-top: 4px; }
.pn-tempo__total { display: flex; align-items: baseline; gap: 8px; }
.pn-tempo__total b { font: 600 calc(26px * var(--fs, 1)) var(--display); }
.pn-tempo__total span { color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); }
.pn-tempo__barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 72px; }
.pn-tempo__barras div { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.pn-tempo__barras i { display: block; width: 100%; max-width: 22px; border-radius: 5px 5px 2px 2px; background: var(--tinta-2); }
.pn-tempo__barras i.zero { background: var(--linha); }
.pn-tempo__barras span { font: calc(10.5px * var(--fs, 1)) var(--dados); color: var(--tinta-2); text-transform: uppercase; }
.pn-tempo__cli { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: calc(13px * var(--fs, 1)); }
.pn-tempo__cli li { display: flex; justify-content: space-between; gap: 8px; }
.pn-tempo__cli b { font: 500 calc(12px * var(--fs, 1)) var(--dados); }
/* Lembretes */
.pn-lem__novo { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pn-lem__novo input { min-height: 34px; padding: 6px 10px; font-size: calc(13px * var(--fs, 1)); }
.pn-lem__novo input[type=text] { flex: 1 1 100%; min-width: 0; }
.pn-lem__novo input[type=date] { flex: 1 1 120px; min-width: 0; color-scheme: light dark; }
.pn-lem__novo .botao { min-height: 34px; padding: 0 14px; }
.pn-lem { display: flex; align-items: center; gap: 9px; padding: 8px 2px; font-size: calc(13px * var(--fs, 1)); }
.pn-lem > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pn-lem small { font: calc(11.5px * var(--fs, 1)) var(--dados); color: var(--tinta-2); white-space: nowrap; }
.pn-lem .pn-lem__marca { opacity: 1; flex: none; }
.pn-lem--feito > span { text-decoration: line-through; color: var(--tinta-2); }
.pn-lem__tirar { border: 0; background: none; color: var(--tinta-2); font-size: calc(16px * var(--fs, 1)); cursor: pointer; opacity: 0; }
.pn-lem:hover .pn-lem__tirar { opacity: 1; }
/* Catálogo */
.pn-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.pn-cat { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); color: var(--tinta); cursor: pointer; font: inherit;
  transition: border-color var(--t-rapido), transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido); }
.pn-cat:hover:not([disabled]) { border-color: var(--tinta-3); transform: translateY(-2px); box-shadow: var(--sombra); }
.pn-cat b { font: 600 calc(14px * var(--fs, 1)) var(--texto); }
.pn-cat span { color: var(--tinta-2); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.4; }
.pn-cat i { margin-top: 6px; font: normal 500 calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-2); }
.pn-cat--tem { opacity: .5; cursor: default; }

/* Botão "compartilhar link público" no topo da tarefa: mesmo peso visual de "Excluir" */
.tj__link-publico { border: 0; background: none; color: var(--tinta-2); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-grid; place-items: center; }
.tj__link-publico:hover { color: var(--tinta); background: var(--superficie-2, rgba(127,127,127,.12)); }
.tj__link-publico svg { width: 16px; height: 16px; }
/* ---- Revisão: contraste, toque/teclado e telas estreitas ---- */
/* Pílulas de status com texto branco: estes dois fundos ficavam abaixo de 4,5:1 (a cor da bolinha/legenda não muda). */
.st-pilula[data-status="aguardando-resultado"] { background: #A8650D; }
.st-pilula[data-status="cancelado"] { background: #6B6962; }
.st-pilula[data-status="arquivada"] { background: #7A776E; }
/* Data atrasada / de hoje como TEXTO: os tokens de erro e aviso já têm a versão certa para cada tema. */
.tl-data--atrasada { color: var(--erro); }
.tl-data--hoje { color: var(--aviso); }
.tl-avatar[data-pessoa="josselan"] { background: #C2410C; color: #fff; }
.tj-mencao:hover { background: var(--aviso); color: var(--fundo); }
.tj__mencao-item.ativo { background: var(--linha-suave); }
.tj__sync { margin: 0; font-size: calc(12px * var(--fs, 1)); line-height: 1.4; }

/* Botões que só apareciam no mouse: visíveis também por teclado (foco) e no toque. */
.pn-lem__tirar:focus-visible, .pn-lem:focus-within .pn-lem__tirar { opacity: 1; }
@media (hover: none) { .pn-lem__tirar, .pn-w__acoes { opacity: 1; } }

/* Telas estreitas: a barra de seleção quebra linha, o lançamento de tempo usa 2 colunas e a tabela do ROI rola dentro do cartão. */
@media (max-width: 720px) {
  .tl-massa { flex-wrap: wrap; justify-content: center; border-radius: 22px; padding: 8px 10px; row-gap: 2px; }
  .tl-massa__sep { display: none; }
}
@media (max-width: 640px) {
  .tj__tempo-form { grid-template-columns: 1fr 1fr; }
  .tj__tempo-form button { grid-column: 1 / -1; }
  .tj__tempo-item { grid-template-columns: 1fr 1fr; }
}
.relatorio-roi__tabela { overflow-x: auto; }

/* Selos coloridos da auditoria: o texto do tema claro (ex.: #1E7A55 sobre o fundo translúcido) dava 4,28:1; misturar com a tinta passa de 4,5:1 nos dois temas. */
.log-selo.selo--ok { color: color-mix(in srgb, var(--ok) 78%, var(--tinta)); }
.log-selo.selo--erro { color: color-mix(in srgb, var(--erro) 78%, var(--tinta)); }
.log-selo.selo--aviso { color: color-mix(in srgb, var(--aviso) 78%, var(--tinta)); }

/* ---- Busca em Minhas tarefas ---- */
.tt-busca { width: 240px; }

/* ---- Anexos da tarefa ---- */
.tj__anexos-sec { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px dashed transparent; border-radius: 10px; }
.tj__anexos-sec--arrastando { border-color: var(--tinta-3); background: var(--linha-suave); }
.tj__anexos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tj__anexo { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; border: 1px solid var(--linha-suave); }
.tj__anexo:hover { background: var(--linha-suave); }
.tj__anexo-ico { flex: none; }
.tj__anexo-nome { flex: 1; min-width: 0; font-size: calc(13px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.tj__anexo-nome:hover { text-decoration: underline; }
.tj__anexo-meta { flex: none; font-size: calc(12px * var(--fs, 1)); }
.tj__anexo-baixar { flex: none; color: var(--tinta-2); text-decoration: none; padding: 0 4px; }
.tj__anexo-baixar:hover { color: inherit; }
.tj__anexo .tj__check-rem { opacity: 1; }
.tj__anexar { align-self: flex-start; cursor: pointer; }
.tj__anexar-dica { margin: 0; font-size: calc(12px * var(--fs, 1)); }

/* ---- Clientes (gestão) ---- */
.tc-tabela { width: 100%; }
.tc-slug { font: 11.5px var(--dados); }
.tc-acoes { text-align: right; white-space: nowrap; }
.tc-form { display: flex; flex-direction: column; gap: 14px; }
.tc-quem { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tc-dica { margin: 0; font-size: calc(12.5px * var(--fs, 1)); }
.tc-pessoa { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.tc-erro { margin: 0; color: var(--erro); font-size: calc(13px * var(--fs, 1)); }

/* ---- Caixa de entrada: ações ao passar o mouse ---- */
.cx-item { position: relative; }
.cx-item--lida .cx-item__texto, .cx-item--lida .tl-avatar { opacity: .55; }
.cx-acoes { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding: 3px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie, var(--fundo)); box-shadow: var(--sombra, none); }
.cx-item:hover .cx-acoes, .cx-item:focus-within .cx-acoes { display: inline-flex; }
.cx-item:hover > time, .cx-item:focus-within > time { visibility: hidden; }
.cx-acao { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--tinta-2); cursor: pointer; }
.cx-acao:hover, .cx-acao:focus-visible { background: var(--linha-suave); color: var(--tinta); }
.cx-acao[data-cx="descartar"]:hover { background: var(--erro-fundo); color: var(--erro); }
.cx-acao .ico { width: 16px; height: 16px; }
@media (hover: none) { .cx-acoes { display: inline-flex; position: static; transform: none; margin-left: auto; } .cx-item > time { visibility: visible; } }

/* ---- Descrição em Markdown e imagens nos comentários ---- */
.tj__desc { position: relative; margin: 0 -8px; }
.tj__desc-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 8px 6px; padding: 4px 6px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie, var(--fundo)); }
.tj__desc-barra[hidden] { display: none; }
.tj__desc-barra button { min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--tinta-2); font: inherit; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.tj__desc-barra button:hover { background: var(--linha-suave); color: var(--tinta); }
.tj__desc-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--linha); }
.tj__desc .tj__descricao { margin: 0; }
.tj__desc-vista { padding: 8px; border: 1px solid transparent; border-radius: 8px; cursor: text; font: calc(14px * var(--fs, 1))/1.55 var(--texto); overflow-wrap: anywhere; }
.tj__desc-vista:hover, .tj__desc-vista:focus-visible { border-color: var(--linha); outline: none; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .7em; }
.md h2, .md h3, .md h4 { margin: 1em 0 .4em; font-family: var(--display); font-weight: 600; line-height: 1.25; }
.md h2 { font-size: 1.25em; } .md h3 { font-size: 1.12em; } .md h4 { font-size: 1.02em; }
.md ul, .md ol { margin: 0 0 .7em; padding-left: 1.5em; }
.md li { margin: .15em 0; }
.md .md-tarefa { list-style: none; margin-left: -1.2em; }
.md code { padding: .1em .35em; border-radius: 5px; background: var(--linha-suave); font: .9em var(--dados); }
.md pre { margin: 0 0 .7em; padding: 10px 12px; border-radius: 8px; background: var(--linha-suave); overflow: auto; }
.md pre code { padding: 0; background: none; }
.md blockquote { margin: 0 0 .7em; padding: 2px 12px; border-left: 3px solid var(--linha); color: var(--tinta-2); }
.md hr { border: 0; border-top: 1px solid var(--linha); margin: 1em 0; }
.md a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.md img { display: block; max-width: 100%; margin: 8px 0; border: 1px solid var(--linha); border-radius: 8px; }
.md--colapsada { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.tj__desc-expandir { display: block; margin: 2px auto 8px; padding: 3px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie, var(--fundo)); color: var(--tinta-2); font: calc(12px * var(--fs, 1)) var(--texto); cursor: pointer; }
.tj__desc-expandir[hidden] { display: none; }
.tj__desc-expandir:hover { color: var(--tinta); }

.tj__comentar-campo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tj__comentar-campo textarea { flex: none; width: 100%; }
.tj__previa { display: flex; flex-wrap: wrap; gap: 8px; }
.tj__previa[hidden] { display: none; }
.tj__previa-item { position: relative; }
.tj__previa-item img { display: block; height: 64px; max-width: 120px; object-fit: cover; border: 1px solid var(--linha); border-radius: 8px; }
.tj__previa-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border: 1px solid var(--linha); border-radius: 50%; background: var(--superficie, var(--fundo)); color: var(--tinta); font-size: 13px; line-height: 1; cursor: pointer; }
.tj__comentar-barra { display: flex; align-items: center; gap: 4px; }
.tj__clipe { width: 30px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--tinta-2); font-size: 15px; cursor: pointer; }
.tj__clipe:hover { background: var(--linha-suave); color: var(--tinta); }
.tj-coment-imgs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tj-coment-imgs a { display: block; width: fit-content; max-width: 100%; }
.tj-coment-imgs img { display: block; max-width: 100%; max-height: 360px; border: 1px solid var(--linha); border-radius: 8px; }

/* ---- Arrastar tarefa para baixo de outra (vira subtarefa) ---- */
body.tl-arrastando { user-select: none; cursor: grabbing; }
.tl-linha--arrastando { opacity: .4; }
.tl-linha--alvo-sub { position: relative; background: var(--linha-suave); box-shadow: inset 0 0 0 1px var(--tinta-3); border-radius: 8px; }
.tl-linha--alvo-sub::after { content: ''; position: absolute; left: 56px; right: 10px; bottom: -3px; height: 3px; border-radius: 3px; background: var(--amarelo, #FFD434); }
.tl-fantasma { position: fixed; top: 0; left: 0; z-index: 3000; pointer-events: none; max-width: 380px; padding: 7px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie, var(--fundo)); color: var(--tinta); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); font: 600 calc(13px * var(--fs, 1)) var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-fantasma--no { color: var(--erro); border-color: var(--erro); }
.tj__mencao-aviso { padding: 4px 10px 2px; font-size: calc(12px * var(--fs, 1)); color: var(--texto-2, inherit); opacity: .85; }

/* Janela "Concluídas" de Minhas tarefas */
.pn-conc__barra { margin: 4px 0 10px; }
.pn-conc__barra .tt-busca { flex: 1 1 220px; }
.pn-conc__canc { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font: 500 12px var(--dados); cursor: pointer; }
.pn-conc__lista { max-height: 55vh; overflow: auto; }
.modo-movel #pn-concluidas { min-height: 44px; }

/* ---- Tempo gasto: formulário claro (descrição primeiro) e lista legível ---- */
.selo-via { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--linha); border-radius: 10px; font: 500 calc(10px * var(--fs, 1))/1.5 var(--dados); letter-spacing: .02em; color: var(--tinta-2); background: transparent; white-space: nowrap; vertical-align: middle; }
.tj__tempo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 12px; border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 10px; }
.tj__tempo-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tj__tempo-campo--desc { grid-column: 1 / -1; }
.tj__tempo-rotulo { font: 600 calc(12px * var(--fs, 1)) var(--texto); color: var(--tinta); }
.tj__tempo-form textarea { min-height: 72px; resize: vertical; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); color: var(--tinta); font: calc(14px * var(--fs, 1))/1.45 var(--texto); }
.tj__tempo-form textarea:focus, .tj__tempo-form input[type="text"]:focus { outline: 2px solid var(--foco); outline-offset: 1px; }
.tj__tempo-aviso, .tj__tempo-previa { font: calc(11px * var(--fs, 1))/1.4 var(--texto); color: var(--tinta-2); min-height: 1em; }
.tj__tempo-previa { font-family: var(--dados); }
.tj__tempo-previa--erro { color: var(--erro); }
.tj__tempo-rapidos, .tj__tempo-quando { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tj__tempo-rapidos button, .tj__tempo-quando button { padding: 5px 10px; border: 1px solid var(--linha); border-radius: 14px; background: transparent; color: var(--tinta); font: 500 calc(12px * var(--fs, 1)) var(--dados); cursor: pointer; }
.tj__tempo-rapidos button:hover, .tj__tempo-quando button:hover { background: var(--linha-suave); }
.tj__tempo-quando .tj__tempo-data-btn { border-radius: 8px; padding: 7px 12px; font-weight: 600; min-width: 84px; text-align: left; }
.tj__tempo-form .tj__tempo-enviar { grid-column: 1 / -1; justify-self: end; }
.tj__tempo-item { display: grid; grid-template-columns: 76px 1fr; gap: 2px 12px; align-items: baseline; padding: 10px 12px; }
.tj__tempo-horas { text-align: left; font-size: calc(14px * var(--fs, 1)); }
.tj__tempo-quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tj__tempo-desc { grid-column: 2; margin: 0; font-style: normal; color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(13px * var(--fs, 1)); line-height: 1.45; }
.tj__tempo-desc--vazia { color: var(--tinta-3); font-style: italic; }
@media (max-width: 700px) { .tj__tempo-form { grid-template-columns: 1fr; } .tj__tempo-form .tj__tempo-enviar { justify-self: stretch; } }

/* Editor da descrição (trabalho/editor-rico.js): edita formatado; barrinha na seleção e menu no botão direito */
.tj__desc-vista:empty::before { content: attr(data-vazio); color: var(--tinta-3); pointer-events: none; }
.tj__desc-vista { min-height: 64px; }
.tj__desc-vista--editando { border-color: var(--tinta-3) !important; box-shadow: 0 0 0 4px var(--linha-suave); background: var(--superficie); outline: none; cursor: text; }
.tj__desc-vista--editando img { outline: 1px dashed var(--linha); }
.tj__desc-dica { margin-left: auto; font: 400 calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-3); white-space: nowrap; }
@media (max-width: 900px) { .tj__desc-dica { display: none; } }
.ed-bolha, .ed-menu { position: fixed; z-index: 9600; background: var(--fundo); backdrop-filter: blur(18px); color: var(--tinta); border: 1px solid var(--linha); box-shadow: var(--sombra-alta); }
.ed-bolha { display: flex; gap: 2px; padding: 4px; border-radius: 12px; animation: ed-entra 140ms var(--ease) both; }
.ed-bolha button { min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: 600 13px var(--texto); }
.ed-bolha button:hover, .ed-bolha button:focus-visible { background: var(--linha-suave); outline: none; }
.ed-menu { min-width: 220px; max-height: calc(100vh - 16px); overflow: auto; padding: 6px; border-radius: 14px; display: grid; animation: ed-entra 140ms var(--ease) both; }
.ed-menu button { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; text-align: left; font: 400 calc(13.5px * var(--fs, 1)) var(--texto); }
.ed-menu button:hover, .ed-menu button:focus-visible { background: var(--linha-suave); outline: none; }
.ed-menu .ed-ico { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 6px; background: var(--linha-suave); font: 600 11px var(--dados); }
.ed-menu kbd { font: 400 10.5px var(--dados); color: var(--tinta-3); }
.ed-menu hr { border: 0; border-top: 1px solid var(--linha-suave); margin: 4px 6px; }
.ed-bolha[hidden], .ed-menu[hidden] { display: none; }
@keyframes ed-entra { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ed-bolha, .ed-menu { animation: none; } }
/* Editor da descrição: o que está ativo, lista do "/", caixinhas e texto de ajuda */
.ed-bolha button[aria-pressed="true"], .tj__desc-barra button[aria-pressed="true"] { background: var(--linha); color: var(--tinta); }
.ed-menu .ed-ativo { background: var(--linha-suave); }
.ed-menu .ed-ativo .ed-ico { background: var(--tinta); color: var(--fundo); }
.ed-menu button:disabled { opacity: .4; cursor: default; }
.ed-menu button:disabled:hover { background: transparent; }
.ed-menu__dica, .ed-menu__titulo { margin: 4px 10px 2px; font: 400 calc(10.5px * var(--fs, 1)) var(--dados); color: var(--tinta-3); }
.ed-menu__titulo { margin: 4px 10px 6px; text-transform: uppercase; letter-spacing: .08em; }
.ed-comandos { max-height: min(340px, 60vh); overflow: auto; grid-auto-rows: min-content; }
.ed-comandos button { grid-template-columns: 28px 1fr; }
.tj__desc-vista--editando > p:only-child:has(> br:only-child) { position: relative; }
.tj__desc-vista--editando > p:only-child:has(> br:only-child)::before { content: 'Escreva aqui… ou digite / para ver os formatos'; position: absolute; left: 0; top: 0; color: var(--tinta-3); pointer-events: none; }
.tj__desc-vista:not(.tj__desc-vista--editando) .md-tarefa > input { cursor: pointer; }
.tj__desc-vista .md-tarefa:has(> input:checked) { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--tinta-3); }
.tj__desc-vista .md-tarefa > input { margin-right: 6px; accent-color: var(--tinta); }

/* Comentários com o mesmo editor da descrição (barra compacta, bolha, botão direito e "/"). */
.tj__coment-barra { margin: 0; padding: 2px 4px; gap: 0; border-radius: 8px; }
.tj__coment-barra button { min-width: 24px; height: 24px; padding: 0 4px; font-size: calc(12px * var(--fs, 1)); }
.tj__coment-barra .tj__desc-sep { margin: 0 2px; height: 14px; }
.tj__coment-vista { flex: none; min-height: 64px; max-height: 240px; overflow-y: auto; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); font: calc(13px * var(--fs, 1))/1.45 var(--texto); cursor: text; }
.tj__coment-vista:focus { border-color: var(--tinta-3); box-shadow: 0 0 0 4px var(--linha-suave); outline: none; }
.tj__coment-vista > :first-child { margin-top: 0; }
.tj__coment-vista > :last-child { margin-bottom: 0; }
.tj__coment-vista > p:only-child:has(> br:only-child) { position: relative; }
.tj__coment-vista > p:only-child:has(> br:only-child)::before, .tj__coment-vista:empty::before { content: attr(data-vazio); position: absolute; left: 0; top: 0; color: var(--tinta-3); pointer-events: none; }
.tj__coment-vista:empty { position: relative; }
.tj__coment-vista:empty::before { left: 12px; top: 8px; right: 12px; }
.tj__coment-vista img { max-height: 160px; width: auto; }
.tj__coment-edicao { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; position: relative; }
.tj__coment-edicao-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tj__coment-edicao-acoes .mudo { margin-right: auto; font: calc(11px * var(--fs, 1)) var(--dados); }
.tj-coment-corpo { margin-top: 6px; font-size: calc(13px * var(--fs, 1)); overflow-wrap: anywhere; }
.tj-coment-corpo > :first-child { margin-top: 0; }
.tj-coment-corpo > :last-child { margin-bottom: 0; }
.tj-coment-corpo p { margin: 6px 0 0; white-space: normal; }
.tj-coment-corpo .md-tarefa > input { pointer-events: none; }

/* ---- Sininho de seguidores no cabeçalho da tarefa (19/10/2026) ---- */
.tj__sino { border: 1px solid var(--linha); background: none; color: var(--tinta-2); cursor: pointer; padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font: 600 calc(12px * var(--fs, 1)) var(--texto); }
.tj__sino:hover, .tj__sino[aria-expanded="true"] { color: var(--tinta); background: var(--linha-suave); border-color: var(--tinta-2); }
.tj__sino--ativo { color: var(--tinta); background: var(--linha-suave); }
/* Rótulo "Seguir"/"Seguindo" visível (20/10/2026); o número de seguidores vai mais apagado ao lado. */
.tj__sino-n { opacity: .6; font-weight: 500; }
.tj__sino-n::before { content: "·"; margin-right: 5px; }
@media (max-width: 560px) { .tj__sino-rotulo { display: none; } .tj__sino-n::before { content: none; } }
.tj__sino--ativo svg { fill: currentColor; }
.tj__sino svg { width: 16px; height: 16px; flex: none; }
.tl-menu.tj-seg { width: 340px; max-width: calc(100vw - 16px); max-height: min(70vh, 520px); }
.tl-menu .tj-seg__op { align-items: flex-start; gap: 10px; padding: 8px; }
.tj-seg__marca { flex: none; width: 16px; text-align: center; color: var(--tinta); font-weight: 700; visibility: hidden; }
.tj-seg__op[aria-pressed="true"] .tj-seg__marca { visibility: visible; }
.tj-seg__op span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tj-seg__op b { font-weight: 600; }
.tj-seg__op small { color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); line-height: 1.35; white-space: normal; }
.tj-seg__sep { height: 1px; background: var(--linha-suave); margin: 4px 2px 6px; flex: none; }
.tj-seg .tl-menu__busca { border-bottom: 0; margin-bottom: 0; }
.tj-seg__titulo { padding: 6px 8px 4px; font: 600 calc(11px * var(--fs, 1)) var(--mono, monospace); color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }
.tj-seg__lista { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.tj-seg__pessoa { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: calc(13px * var(--fs, 1)); }
.tj-seg__pessoa .tl-avatar { margin-left: 0; }
.tj-seg__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-seg__desde { margin-left: auto; padding-left: 8px; font-size: calc(11px * var(--fs, 1)); color: var(--tinta-2); white-space: nowrap; }
.tj-seg__vazio { margin: 0; padding: 8px; font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); }
.tl-menu button.tj-seg__add { width: 100%; padding: 6px 8px; }
.tj-seg__add .tj-seg__desde { color: var(--tinta-2); }
.tj-seg__add:hover .tj-seg__desde { color: var(--tinta); }
.tl-menu .tj-seg__tirar { flex: none; min-height: 0; width: 24px; height: 24px; padding: 0; justify-content: center; margin-left: 4px; color: var(--tinta-2); font-size: 16px; line-height: 1; }
.tl-menu .tj-seg__tirar:hover { color: var(--erro); background: var(--erro-fundo); }
.tj-seg__lista > .tj-seg__titulo { margin-top: 6px; border-top: 1px solid var(--linha-suave); padding-top: 10px; }

/* ---- Fila de prioridade (views/fila.js, 20/10/2026) ---- */
.tl-marca--fila { display: inline-flex; align-items: center; padding: 0 6px; margin-right: 6px; border-radius: var(--r-pilula); border: 1px solid var(--linha); font-family: var(--dados); font-size: calc(10.5px * var(--fs, 1)); color: var(--tinta); text-decoration: none; background: var(--superficie); }
.tl-marca--fila:hover { border-color: var(--tinta-3); }
.fq-quem { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.fq-quem[hidden] { display: none; }
.fq-dica { margin: -8px 0 14px; font-size: calc(12.5px * var(--fs, 1)); }
.fq-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 1080px; }
.fq-linha { display: grid; grid-template-columns: 18px 64px minmax(0, 1fr) auto auto 110px; align-items: center; gap: 14px; padding: 10px 14px 10px 8px; background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: 12px; cursor: pointer; user-select: none; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms; }
.fq-linha:hover { border-color: var(--linha); }
.fq-linha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fq-alca { color: var(--tinta-3); cursor: grab; display: grid; place-items: center; touch-action: none; }
.fq-alca svg { width: 16px; height: 16px; }
.fq-linha:hover .fq-alca { color: var(--tinta-2); }
.fq-num { width: 64px; height: 48px; text-align: center; font: 600 calc(24px * var(--fs, 1))/1 var(--display); color: var(--tinta); background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 0; }
.fq-num:hover { border-color: var(--tinta-3); }
.fq-num:focus { outline: 2px solid var(--foco); outline-offset: 1px; }
.fq-linha:first-child .fq-num { box-shadow: inset 0 -3px 0 var(--amarelo); }
.fq-corpo { display: grid; gap: 3px; min-width: 0; }
.fq-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fq-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); }
.fq-sub { padding: 0 6px; border-radius: var(--r-pilula); background: var(--linha-suave); }
.fq-data, .fq-vazio { font-size: calc(12.5px * var(--fs, 1)); text-align: right; white-space: nowrap; }
.fq-vazio { color: var(--tinta-3); }
.fq-data--atrasada { color: var(--erro, #C0392B); font-weight: 600; }
.fq-linha--arrastando { position: relative; z-index: 2; transition: none; box-shadow: var(--sombra); border-color: var(--tinta-3); cursor: grabbing; }
.fq-linha--movida { border-color: var(--tinta-3); }
body.fq-arrastando, body.fq-arrastando * { cursor: grabbing !important; user-select: none; }
html.modo-movel .fq-linha { grid-template-columns: 18px 52px minmax(0, 1fr); gap: 10px; }
html.modo-movel .fq-num { width: 52px; height: 42px; font-size: calc(20px * var(--fs, 1)); }
html.modo-movel .fq-status, html.modo-movel .fq-pri, html.modo-movel .fq-data, html.modo-movel .fq-vazio { display: none; }
@media (prefers-reduced-motion: reduce) { .fq-linha { transition: none; } }

/* Botão que alterna a ordem dos grupos de status (listas de tarefas e widget "Atribuídas a mim"), 20/10/2026. */
.tl-ordem { min-height: 30px; padding: 4px 10px; font-size: calc(12.5px * var(--fs, 1)); white-space: nowrap; }
.pn-w__extra .tl-ordem { min-height: 26px; padding: 2px 8px; }
html.modo-movel .tl-ordem { display: none; }

/* Configurações das tarefas (#/tarefas-config) */
.tcfg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tcfg-item { display: flex; gap: 12px; align-items: flex-start; color: inherit; text-decoration: none; padding: 16px; }
.tcfg-item:hover { border-color: var(--linha); }
.tcfg-item .ico { flex: none; margin-top: 2px; }
.tcfg-item b { display: block; margin-bottom: 2px; }
/* Nova tarefa: formulário com campos fixos */
.tc--form { display: grid; gap: 12px; }
.tc__linha { display: grid; gap: 4px; }
.tc__linha input, .tc__linha select, .tc__linha textarea { width: 100%; }
.tc__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .tc__grade { grid-template-columns: 1fr; } }

/* Barras do "Tempo gasto" em períodos longos (mês, 30 dias): mais finas, rótulo só do dia. */
.pn-tempo__barras--densa { gap: 2px; }
.pn-tempo__barras--densa span { font-size: calc(9px * var(--fs, 1)); }
.pn-tempo__tar { cursor: pointer; }
.pn-tempo__tar:hover span { text-decoration: underline; }
/* Opções do widget (engrenagem no cabeçalho): popover pequeno preso ao body. */
.pn-opc { position: absolute; z-index: 60; width: 248px; max-height: 70vh; overflow: auto; display: grid; gap: 10px; padding: 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-card); box-shadow: var(--sombra); font-size: calc(13px * var(--fs, 1)); }
.pn-opc header { display: flex; align-items: center; justify-content: space-between; }
.pn-opc__limpar { border: 0; background: none; color: var(--tinta-2); font: inherit; font-size: calc(12px * var(--fs, 1)); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.pn-opc__limpar:hover:not(:disabled) { background: var(--linha-suave); color: var(--tinta); }
.pn-opc__limpar:disabled { opacity: .4; cursor: default; }
.pn-opc__sel { display: grid; gap: 4px; }
.pn-opc__sel span, .pn-opc__multi legend { color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); }
.pn-opc__sel select { width: 100%; }
.pn-opc__chk { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pn-opc__multi { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.pn-opc__multi legend { padding: 0; margin-bottom: 4px; }
/* Tempo clicável: total, barras e linhas abrem o detalhe */
button.pn-tempo__total { all: unset; display: flex; align-items: baseline; gap: 8px; cursor: pointer; border-radius: 8px; }
button.pn-tempo__total:hover b, button.pn-tempo__total:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }
.pn-tempo__barras [data-tempo-dia] { cursor: pointer; }
.pn-tempo__barras [data-tempo-dia]:hover i { background: var(--tinta); }
.pn-tempo__tar { cursor: pointer; border-radius: 6px; }
.pn-tempo__tar:hover { background: var(--linha); }
.pn-tdet { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; max-height: 60vh; overflow: auto; }
.pn-tdet__l { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.pn-tdet__l:hover, .pn-tdet__l:focus-visible { background: var(--linha); outline: none; }
.pn-tdet__l span { display: grid; min-width: 0; }
.pn-tdet__l b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-tdet__l small { color: var(--tinta-2); }
.pn-tdet__l i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--tinta-2) var(--p), var(--linha) var(--p)); }
.pn-tdet__l em { font: calc(13px * var(--fs, 1)) var(--dados); font-style: normal; }