/* ==========================================================================
   Módulo Tarefas — Quadro (Kanban) + Modal de tarefa.
   Carregado globalmente via <link> em template/main.html. As classes são
   namespaced (tk-*, pautagem-*, minicard-*) e usadas em /tarefas e /calendario
   (o modal é um partial compartilhado pelos dois).
   ========================================================================== */

/* --------------------------------------------------------------------------
   QUADRO (Kanban): filtros + 4 colunas fixas + cards arrastáveis.
   Métricas e cores copiadas 1:1 do protótipo (intranet.html).
   -------------------------------------------------------------------------- */
/* .tk-cols/.tk-col/.tk-card cederam a GEOMETRIA para o padrão do Construtor
   (18/09/2026): largura, fundo, borda e cabeçalho vêm de .cm-board/.cm-col/
   .cm-card, em public/css/comercial/funil.css. O que sobra aqui é o que é
   só desta tela: estados de arrasto, ícones, etiquetas e avatares. */

.tk-col.drag-over { box-shadow:0 0 0 2px var(--accent), var(--shadow); }
/* Coluna "Concluído" — visual cinza esmaecido, fiel ao protótipo */


.tk-col.done .tk-card { background:#f4f4ee; opacity:.85; }
.tk-col.done .tk-due-overdue, .tk-col.done .tk-due-today { background:var(--bg); color:var(--text-secondary); font-weight:normal; }
.tk-col-head { user-select:none; }


.tk-col-clear { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:18px; line-height:1; padding:2px 6px; border-radius:3px; }
.tk-col-clear:hover { background:var(--bg); color:#a04040; }
.tk-col-cards { min-height:60px; }
.tk-col-cards:empty::after { content:'Sem tarefas'; display:block; text-align:center; color:var(--text-secondary); font-family:var(--font-body); font-size:11px; font-style:italic; padding:16px 8px; opacity:.5; }
/* "+ Nova tarefa" no topo da primeira coluna, no desenho do padrão. */
.tk-add { margin:10px 10px 0; padding:8px 10px; width:calc(100% - 20px); cursor:pointer;
  border:1px dashed var(--card-border); border-radius:8px; background:transparent;
  font-family:var(--font-mono, monospace); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-secondary); text-align:center; }
.tk-add:hover { border-color:var(--accent); color:var(--text-primary); }

.tk-card { padding:11px 12px; cursor:pointer; font-size:13.5px; line-height:1.4; color:var(--text-primary); position:relative; user-select:none; }

.tk-card.dragging { opacity:.4; }
.tk-card.hidden-filter { display:none; }
.tk-card.card-starred { border-left:3px solid #d4a847; }
/* Drop posicional: linha accent acima/abaixo do card alvo (fiel ao protótipo) */
.tk-card.drop-above { box-shadow:0 -3px 0 0 var(--accent), var(--shadow); }
.tk-card.drop-below { box-shadow:0 3px 0 0 var(--accent), var(--shadow); }
/* Ícones no canto superior direito do card + tooltip custom via data-label */
.tk-card-icons { position:absolute; top:6px; right:6px; display:flex; align-items:center; gap:3px; z-index:2; }
.tk-card-icons svg { width:14px; height:14px; display:block; }
.tk-type-icon, .tk-cat-icon { width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; line-height:1; cursor:default; opacity:.85; position:relative; }
.tk-type-icon:hover::after, .tk-cat-icon:hover::after { content:attr(data-label); position:absolute; bottom:100%; right:0; margin-bottom:4px; padding:4px 8px; background:var(--text-primary); color:white; font-family:var(--font-body); font-size:11px; font-weight:500; border-radius:3px; white-space:nowrap; pointer-events:none; z-index:10; letter-spacing:.3px; }
.tk-type-evento { color:#3a6a8d; } .tk-type-reuniao_originada { color:#c8956d; }
.tk-cat-minha { color:#5d7a8c; } .tk-cat-recebida { color:#a04040; }
.tk-cat-delegada { color:#3a7d44; } .tk-cat-compartilhada { color:#8a5dab; }
.tk-card-title { font-weight:500; line-height:1.4; padding-right:50px; margin-bottom:4px; }
.tk-card-desc { font-size:12px; color:var(--text-secondary); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-family:var(--font-body); max-height:3.2em; line-height:1.5; word-break:break-word; margin-bottom:6px; }
/* Formatações WhatsApp dentro do preview do card (inline p/ caber no clamp) */
.tk-card-desc ul, .tk-card-desc ol { margin:0 0 0 16px; padding:0; display:inline; }
.tk-card-desc li { font-size:12px; display:inline; margin-right:6px; }
.tk-card-desc li::before { content:'• '; color:var(--text-secondary); margin-right:2px; }
.tk-card-desc br { display:inline; }
.tk-card-desc p { display:inline; margin:0; }
.tk-card-tags { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-bottom:6px; }
.tk-tag { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:10px; padding:2px 7px; border-radius:10px; background:var(--bg); color:var(--text-secondary); }
.tk-tag.checklist.complete { background:#e8f0e3; color:#5a8a4e; }
.tk-tag-comments { color:var(--text-secondary); }
/* Comentários não-lidos: badge rosa no card + pontinho vermelho (fiel ao protótipo) */
.tk-tag-comments.has-unread { position:relative; background:#fde6e0; color:#a04040; border:1px solid #e8b8aa; }
.tk-card-unread-dot { display:inline-block; width:6px; height:6px; background:#c0392b; border-radius:50%; margin-left:4px; vertical-align:middle; }
.tk-tag-revisar { background:#fef3c7; color:#8a6918; border:1px solid #d4a847; font-weight:600; }
/* Tag de vencimento com cor por status (paleta exata do protótipo) */
.tk-due { display:inline-flex; align-items:center; font-family:var(--font-body); font-size:10px; padding:2px 7px; border-radius:10px; background:var(--bg); color:var(--text-secondary); }
.tk-due-overdue { background:#f5d4cc; color:#8a2e18; font-weight:600; }
.tk-due-today { background:#f5e0c0; color:#7a5519; font-weight:600; }
.tk-due-soon { background:#f5ecd0; color:#6e5a1c; }
.tk-due-future { background:var(--bg); color:var(--text-secondary); }
/* Avatares alinhados à DIREITA com overlap -8px (fiel ao protótipo) */
.tk-avatars { display:flex; margin-top:6px; justify-content:flex-end; padding-right:54px; }
.tk-avatars .avatar:not(:first-child) { margin-left:-8px; }
.tk-card-created { font-size:10px; color:var(--text-secondary); font-family:var(--font-body); margin-top:6px; opacity:.7; padding-left:24px; padding-right:54px; }
/* Estrela absoluta no canto inferior ESQUERDO */
.tk-star { position:absolute; bottom:6px; left:6px; background:none; border:none; cursor:pointer; padding:2px 4px; font-size:16px; line-height:1; color:#c9c0a8; transition:color .15s ease, transform .15s ease; z-index:2; }
.tk-star:hover { color:#d4a847; transform:scale(1.15); }
.tk-star.starred { color:#d4a847; text-shadow:0 0 3px rgba(212,168,71,.4); }
/* Avançar/voltar absolutos no canto inferior DIREITO; aparecem no hover do card */
.tk-advance { position:absolute; bottom:6px; right:6px; background:none; border:none; cursor:pointer; padding:2px 6px; font-size:14px; line-height:1; font-weight:700; color:var(--text-secondary); opacity:.4; transition:all .15s ease; z-index:2; border-radius:3px; }
.tk-card:hover .tk-advance { opacity:.85; }
.tk-advance:hover { opacity:1 !important; color:var(--accent-dark); transform:translateX(2px); }
.tk-back { position:absolute; bottom:6px; right:32px; background:none; border:none; cursor:pointer; padding:2px 6px; font-size:14px; line-height:1; font-weight:700; color:var(--text-secondary); opacity:.4; transition:all .15s ease; z-index:2; border-radius:3px; }
.tk-card:hover .tk-back { opacity:.85; }
.tk-back:hover { opacity:1 !important; color:var(--accent-dark); transform:translateX(-2px); }

/* Barra de filtros — faixa fiel ao protótipo (.filter-bar) */
.tk-filter-bar { padding:12px 16px; background:#f0efe8; border-bottom:1px solid rgba(26,31,46,.08); display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.tk-filter-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tk-filter-label { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-secondary); font-family:var(--font-body); margin-right:6px; min-width:56px; }
.tk-fbtn { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; background:white; border:1px solid var(--card-border); border-radius:16px; cursor:pointer; font-family:var(--font-body); font-size:12px; color:var(--text-primary); transition:all .15s ease; }
.tk-fbtn:hover { border-color:var(--accent); }
.tk-fbtn.off { background:transparent; color:var(--text-secondary); opacity:.5; }
.tk-fbtn.off .avatar { filter:grayscale(.85) opacity(.5); }
.tk-fbtn .avatar { border-width:0; width:22px; height:22px; font-size:9px; }
.tk-fbtn-padded { padding:6px 12px 6px 8px; }
.bu-bullet { display:inline-block; width:10px; height:10px; border-radius:2px; background:#2c3344; flex-shrink:0; margin-left:4px; }
.tk-fbtn.bu-master .bu-bullet { background:var(--master-gold); }
.tk-fbtn.off .bu-bullet { background:var(--inactive-text, #9a9a90); }

/* Botão "Limpar tarefas" do topo (classe e valores exatos do protótipo) */
.clear-tasks-btn { background:white; color:#a04040; border:1px solid #a04040; padding:7px 14px; border-radius:4px; font-family:var(--font-body); font-size:12px; cursor:pointer; transition:all .15s ease; }
.clear-tasks-btn:hover { background:#fde6e0; }
.tk-fsvg { width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:2px; }
.tk-fsvg svg { width:14px; height:14px; display:block; }
.tk-fbtn.off .tk-fsvg { opacity:.5; }
.tk-filter-divider { width:1px; height:20px; background:rgba(0,0,0,.12); margin:0 4px; }
/* Busca com ícone, expansão no focus e botão limpar (fiel ao protótipo) */
.tk-search-wrap { position:relative; display:inline-flex; align-items:center; margin-left:12px; }
.tk-search-icon { position:absolute; left:10px; color:var(--text-secondary); font-size:14px; pointer-events:none; }
.tk-search-input { background:white; border:1px solid var(--card-border); border-radius:16px; padding:5px 28px 5px 28px; font-family:var(--font-body); font-size:12px; color:var(--text-primary); outline:none; width:200px; transition:border-color .15s ease, width .15s ease; }
.tk-search-input:focus { border-color:var(--accent); width:260px; }
.tk-search-input::placeholder { color:var(--text-secondary); }
.tk-search-clear { position:absolute; right:6px; background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:16px; line-height:1; padding:2px 6px; border-radius:50%; }
.tk-search-clear:hover { background:var(--bg); color:var(--text-primary); }
/* Filtro-estrela circular dedicado */
.tk-fstar { background:white; border:1px solid var(--card-border); border-radius:16px; padding:5px 12px; cursor:pointer; font-family:var(--font-body); font-size:12px; color:var(--text-primary); display:inline-flex; align-items:center; gap:6px; transition:all .15s ease; }
.tk-fstar.icon-only { width:32px; height:32px; padding:0; border-radius:50%; justify-content:center; }
.tk-fstar.icon-only .star-icon { margin:0; font-size:16px; }
.tk-fstar:hover { border-color:#d4a847; }
.tk-fstar .star-icon { font-size:14px; color:#c9c0a8; }
.tk-fstar.on { background:linear-gradient(90deg,#fef9e7 0%,#fcf3d4 100%); border-color:#d4a847; color:#5a4310; font-weight:600; }
.tk-fstar.on .star-icon { color:#d4a847; }
.tk-filter-actions { margin-left:auto; display:flex; gap:6px; }
.tk-filter-link { background:none; border:none; color:var(--text-secondary); font-family:var(--font-body); font-size:11px; cursor:pointer; padding:4px 8px; text-decoration:underline; }
.tk-filter-link:hover { color:var(--text-primary); }
.tk-empty-me { text-align:center; color:var(--text-secondary); font-family:var(--font-body); font-style:italic; padding:50px 20px; }

/* --------------------------------------------------------------------------
   MODAL DE TAREFA (partial compartilhado por /tarefas e /calendario).
   Classes modal/btn/input são globais (style.css).
   -------------------------------------------------------------------------- */
.tk-saved { font-family:var(--font-body); font-size:11px; color:#2f6b3a; opacity:0; transition:opacity .2s ease; margin-right:8px; }
.tk-saved.show { opacity:1; }
.tk-field { margin-bottom:14px; }
.tk-field-label { display:block; font-family:var(--font-body); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-secondary); margin-bottom:6px; }
.tk-people { display:flex; flex-wrap:wrap; gap:6px; }
.tk-people .tk-miniav { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#cfcabb; color:#fff; font-size:11px; font-weight:700; cursor:pointer; opacity:.45; transition:opacity .15s ease,box-shadow .15s ease; }
.tk-people .tk-miniav.on { opacity:1; box-shadow:0 0 0 2px var(--accent); }
.tk-bus { display:flex; flex-wrap:wrap; gap:6px; }
.tk-bus-empty { font-family:var(--font-body); font-size:12px; color:var(--text-secondary); font-style:italic; }
.tk-hint { font-family:var(--font-body); font-size:11px; color:var(--text-secondary); margin-top:8px; }
/* Linha Tipo + estrela + ícone de vencimento (fiel ao protótipo) */
.tk-typerow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; }
.tk-typerow select.modal-input { flex:1; min-width:200px; max-width:320px; }
.tk-star-inline { background:#fff; border:1px solid var(--card-border); border-radius:50%; width:36px; height:36px; cursor:pointer; font-size:18px; line-height:1; color:#c9c0a8; display:inline-flex; align-items:center; justify-content:center; transition:all .15s ease; flex-shrink:0; }
.tk-star-inline:hover { color:var(--master-gold); border-color:var(--master-gold); transform:scale(1.05); }
.tk-star-inline.on { color:var(--master-gold); background:linear-gradient(90deg,#fef9e7,#fcf3d4); border-color:var(--master-gold); }
.tk-dateicon { background:#fff; border:1px dashed var(--card-border); border-radius:6px; padding:8px 10px; cursor:pointer; display:flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; color:var(--text-secondary); transition:all .15s ease; min-height:36px; }
.tk-dateicon:hover { border-color:var(--accent); background:var(--bg); }
.tk-dateicon.has-date { border-style:solid; border-color:var(--accent-dark); background:linear-gradient(90deg,#fef9e7,#fcf3d4); color:#5a4310; font-weight:600; }
.tk-dateicon svg { width:14px; height:14px; display:block; }
.tk-dateicon-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:0; top:0; }
.tk-dateclear { background:none; border:1px solid var(--card-border); border-radius:50%; width:22px; height:22px; cursor:pointer; color:var(--text-secondary); font-size:14px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; }
.tk-dateclear:hover { color:#c0392b; border-color:#c0392b; }
/* Botão (i) + popup de formatações na Descrição */
.tk-desc-info { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:none; border:1px solid var(--card-border); color:var(--text-secondary); cursor:pointer; padding:0; margin-left:6px; vertical-align:middle; }
.tk-desc-info:hover { color:var(--accent-dark); border-color:var(--accent-dark); }
.tk-desc-info svg { width:11px; height:11px; display:block; }
.tk-desc-popup { background:#fff; border:1px solid var(--card-border); border-radius:6px; padding:12px 14px; margin:6px 0 10px; box-shadow:0 4px 12px rgba(0,0,0,.08); font-family:var(--font-body); }
.tk-desc-popup-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--accent-dark); margin-bottom:8px; }
.tk-desc-popup-grid { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; align-items:center; font-size:12px; }
.tk-desc-popup-grid code { background:var(--bg); padding:2px 6px; border-radius:3px; font-family:'Menlo','Monaco',monospace; font-size:11px; color:var(--text-primary); border:1px solid var(--card-border); }
.tk-desc-popup-grid span { color:var(--text-secondary); }
/* Checklist com adição preguiçosa */
.tk-checklist-addbtn { margin-top:4px; padding:6px 8px; color:var(--text-secondary); font-family:var(--font-body); font-size:13px; cursor:pointer; border-radius:3px; background:none; border:none; text-align:left; width:100%; }
.tk-checklist-addbtn:hover { background:var(--card-bg); color:var(--text-primary); }
.tk-checklist-item { display:flex; align-items:center; gap:8px; padding:4px 0; }
.tk-checklist-item.done .tk-cl-text { text-decoration:line-through; color:var(--text-secondary); }
.tk-cl-text { flex:1; font-size:13px; border:1px solid transparent; border-radius:3px; padding:2px 4px; }
.tk-cl-text:focus { border-color:var(--accent); outline:none; background:#fff; }
.tk-cl-del { background:none; border:none; color:var(--text-secondary); cursor:pointer; }
.tk-cl-del:hover { color:#a04040; }
.tk-comment { padding:8px 0; border-bottom:1px solid var(--card-border); }
.tk-comment-meta { font-family:var(--font-body); font-size:10px; color:var(--text-secondary); margin-bottom:3px; }
.tk-comment-body { font-size:13px; color:var(--text-primary); white-space:pre-wrap; }
.tk-attach-group { border:1px solid var(--card-border); border-radius:4px; padding:8px 10px; margin-bottom:8px; }
.tk-attach-versions { margin-top:6px; padding-left:10px; border-left:2px solid var(--card-border); }
.tk-attach-version { font-size:12px; margin:3px 0; display:flex; gap:6px; align-items:center; }
.tk-attach-note { color:var(--text-secondary); font-style:italic; }
/* Atas de reunião (Fase 2.5) */
.tk-ata-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--card-border); }
.tk-ata-chip { padding:4px 12px; border:1px solid var(--card-border); border-radius:14px; background:#fff; font-family:var(--font-body); font-size:12px; color:var(--text-primary); cursor:pointer; }
.tk-ata-chip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.tk-ata-new { padding:4px 10px; border:1px dashed var(--card-border); border-radius:14px; background:none; font-family:var(--font-body); font-size:12px; color:var(--text-secondary); cursor:pointer; }
.tk-ata-new:hover { border-color:var(--accent); color:var(--accent); }
.tk-ata-daterow { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tk-ata-toolbar { display:flex; gap:4px; margin-bottom:6px; }
.tk-ata-tbbtn { min-width:30px; height:26px; padding:0 8px; border:1px solid var(--card-border); background:#fff; border-radius:4px; cursor:pointer; font-size:12px; color:var(--text-primary); }
.tk-ata-tbbtn:hover { border-color:var(--accent); }
.tk-ata-editor { min-height:120px; border:1px solid var(--card-border); border-radius:4px; padding:8px 10px; font-size:13px; line-height:1.5; overflow:auto; }
.tk-ata-editor:focus { outline:none; border-color:var(--accent); }
.tk-ata-editor:empty:before { content:attr(data-ph); color:var(--text-secondary); font-style:italic; }
.tk-ata-item { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid #f0efe8; }
.tk-ata-item.done .tk-ata-itext { text-decoration:line-through; color:var(--text-secondary); }
.tk-ata-itext { flex:1; font-size:13px; border:1px solid transparent; border-radius:3px; padding:2px 4px; }
.tk-ata-itext:focus { border-color:var(--accent); outline:none; background:#fff; }
.tk-ata-due { font-size:11px; color:#8b5e3c; white-space:nowrap; }
.tk-ata-meta { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.tk-ata-av { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:700; }
.tk-ata-empty { text-align:center; color:var(--text-secondary); padding:18px 0; }
/* Vínculo de reunião de origem */
.tk-origin { display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:14px; border-radius:6px; background:#f3ece3; border:1px solid #e0d3c2; font-family:var(--font-body); font-size:13px; color:var(--text-primary); }
.tk-origin.orfao { background:#f6ecec; border-color:#e3c9c9; color:#7d4a4a; font-style:italic; }
/* Pautagem (Fase 2.5c) */
.pautagem-backdrop { position:fixed; inset:0; z-index:4000; background:var(--bg-primary,#f3efe7); overflow:auto; }
.pautagem-shell { max-width:1200px; margin:0 auto; padding:28px 32px; }
.pautagem-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid var(--card-border); padding-bottom:16px; margin-bottom:20px; }
.pautagem-title { font-family:var(--font-title); font-size:24px; margin:0 0 4px; color:var(--text-primary); }
.pautagem-subtitle { font-family:var(--font-body); font-size:12px; color:var(--text-secondary); margin:0; max-width:640px; }
.pautagem-actions { display:flex; gap:10px; flex-shrink:0; }
.pautagem-content { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.pautagem-panel { width:300px; background:#fff; border:1px solid var(--card-border); border-radius:8px; padding:14px; }
.pautagem-panel-header { display:flex; align-items:center; gap:10px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--card-border); }
.pautagem-panel-av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.pautagem-panel-name { font-weight:700; font-size:14px; color:var(--text-primary); }
.pautagem-panel-count { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-secondary); }
.pautagem-minicards { display:flex; flex-direction:column; gap:10px; min-height:40px; }
.minicard { border:1px solid var(--card-border); border-radius:6px; padding:10px; background:#faf7f1; cursor:grab; transition:box-shadow .15s ease,border-color .15s ease; }
.minicard:hover { border-color:var(--accent); }
.minicard.minicard-grouped { background:#f0ece2; border-style:solid; }
.minicard.dragging { opacity:.4; }
.minicard.drag-over { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.minicard-count { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:5px; }
.minicard-item { font-size:13px; color:var(--text-primary); padding:2px 0; }
.minicard-data { margin-top:6px; font-size:11px; color:#8b5e3c; }
.mc-edit-item { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.mc-edit-rm { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:16px; }
.mc-edit-rm:hover { color:#a04040; }

/* ==========================================================================
   MODAL DE TAREFA — fidelidade 1:1 ao protótipo (intranet.html).
   Classes copiadas do protótipo: shell de abas (tarefa-tabs), member-picker,
   checklist, descrição com preview WhatsApp, linha Tipo+Estrela+Data,
   aba Evento (time-picker custom, convidados externos) e comentários.
   ========================================================================== */

/* Indicador "Salvo" do header (pisca 1,2s após cada autosave) */
.autosave-indicator { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-secondary); font-family:var(--font-body); opacity:0; transition:opacity .3s ease; }
.autosave-indicator.show { opacity:1; }

/* Shell: abas verticais só-ícone à esquerda + conteúdo rolável */
.modal.modal-tarefa { height:78vh; max-height:78vh; }
.tarefa-modal-shell { display:flex; gap:0; flex:1; min-height:0; overflow:hidden; }
.tarefa-tabs { display:flex; flex-direction:column; gap:2px; padding:16px 0; border-right:1px solid var(--card-border); min-width:56px; background:var(--bg); }
.tarefa-tab { background:none; border:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); color:var(--text-secondary); border-left:3px solid transparent; transition:all .15s ease; position:relative; white-space:nowrap; width:56px; }
.tarefa-tab:hover { background:white; color:var(--text-primary); }
.tarefa-tab.active { background:white; color:var(--accent-dark); border-left-color:var(--accent-dark); }
.tarefa-tab-icon { font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; }
.tarefa-tab-icon svg { width:18px; height:18px; display:block; }
.tarefa-tab-label { display:none; } /* aba é só ícone + tooltip */
.tarefa-tab-badge { position:absolute; top:4px; right:4px; background:#c0392b; color:white; border-radius:9px; font-size:9px; font-weight:700; min-width:16px; height:16px; line-height:16px; text-align:center; padding:0 4px; box-shadow:0 0 0 2px white; }
.tarefa-tab-badge.tarefa-tab-badge-neutral { background:var(--text-secondary); }
.tarefa-tab.tarefa-tab-special { background:linear-gradient(135deg,rgba(212,168,71,.10),rgba(212,168,71,.04)); animation:tabSpecialEnter .35s ease; }
.tarefa-tab.tarefa-tab-special::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); border-radius:0 2px 2px 0; }
.tarefa-tab.tarefa-tab-special.active { background:linear-gradient(135deg,rgba(212,168,71,.18),rgba(212,168,71,.08)); }
.tarefa-tab.tarefa-tab-special .tarefa-tab-icon { color:var(--accent-dark); }
@keyframes tabSpecialEnter { 0% { opacity:0; transform:translateX(-6px); } 100% { opacity:1; transform:translateX(0); } }
.tarefa-tab-content { flex:1; padding:16px 24px; overflow-y:auto; min-width:0; }
.tarefa-tab-content.tab-content-comments { display:flex; flex-direction:column; }

/* Avatar circular com iniciais (mesma métrica do protótipo) */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; color:white; font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:.5px; flex-shrink:0; border:2px solid var(--card-bg); box-sizing:border-box; }
.avatar.sm { width:22px; height:22px; font-size:9px; border-width:2px; }
.avatar.inactive { filter:grayscale(.7) opacity(.6); }

/* Member-picker: caixa com avatares clicáveis (selecionado aceso, resto esmaecido) */
.member-picker { display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--card-border); border-radius:3px; background:var(--card-bg); }
.member-pick { cursor:pointer; border-radius:50%; padding:2px; border:2px solid transparent; transition:all .15s ease; background:white; line-height:0; }
.member-pick:hover { border-color:var(--accent); }
.member-pick.selected { border-color:var(--accent-dark); background:var(--accent-dark); }
.member-pick:not(.selected) .avatar { opacity:.5; filter:grayscale(.4); }
.member-pick .avatar { border-width:0; width:22px; height:22px; font-size:9px; }
.picker-hint { font-size:11px; color:var(--text-secondary); font-family:var(--font-body); margin-top:6px; }

/* Linha Tipo + Estrela + Data (meta-row) */
.modal-meta-row { display:flex; gap:16px; flex-wrap:wrap; }
.meta-field { flex:1; min-width:200px; display:flex; flex-direction:column; gap:4px; }
.meta-field-tipo { flex:1; width:100%; }
.tipo-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; }
.tipo-row select.modal-input { flex:1; min-width:200px; max-width:320px; }
.modal-star-inline { background:white; border:1px solid var(--card-border); border-radius:50%; width:36px; height:36px; cursor:pointer; font-size:18px; line-height:1; color:#c9c0a8; display:inline-flex; align-items:center; justify-content:center; transition:all .15s ease; flex-shrink:0; }
.modal-star-inline:hover { color:#d4a847; border-color:#d4a847; transform:scale(1.05); }
.modal-star-inline.starred { color:#d4a847; background:linear-gradient(90deg,#fef9e7 0%,#fcf3d4 100%); border-color:#d4a847; }
.date-icon-btn { background:white; border:1px dashed var(--card-border); border-radius:6px; padding:8px 10px; cursor:pointer; display:flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; color:var(--text-secondary); transition:all .15s ease; min-height:36px; }
.date-icon-btn:hover { border-color:var(--accent); background:var(--bg); }
.date-icon-btn.has-date { border-style:solid; border-color:var(--accent-dark); background:linear-gradient(90deg,#fef9e7 0%,#fcf3d4 100%); color:#5a4310; font-weight:600; }
.date-icon-svg { width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
.date-icon-svg svg { width:14px; height:14px; display:block; }
.date-icon-label { font-size:11px; }
.date-icon-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:0; top:0; }
.date-icon-clear { background:none; border:1px solid var(--card-border); border-radius:50%; width:22px; height:22px; cursor:pointer; color:var(--text-secondary); font-size:14px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; }
.date-icon-clear:hover { color:#c0392b; border-color:#c0392b; }

/* Botão (i) e popup de formatações da descrição */
.modal-label .desc-info-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:none; border:1px solid var(--card-border); color:var(--text-secondary); cursor:pointer; padding:0; margin-left:6px; vertical-align:middle; transition:all .15s ease; }
.modal-label .desc-info-btn svg { width:11px; height:11px; display:block; }
.modal-label .desc-info-btn:hover { color:var(--accent-dark); border-color:var(--accent-dark); background:var(--bg); }
.desc-info-popup { background:white; border:1px solid var(--card-border); border-radius:6px; padding:12px 14px; margin:6px 0 10px; box-shadow:0 4px 12px rgba(0,0,0,0.08); font-family:var(--font-body); animation:descInfoFadeIn .15s ease; }
@keyframes descInfoFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.desc-info-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--accent-dark); margin-bottom:8px; }
.desc-info-grid { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; align-items:center; font-size:12px; }
.desc-info-grid code { background:var(--bg); padding:2px 6px; border-radius:3px; font-family:'Menlo','Monaco',monospace; font-size:11px; color:var(--text-primary); border:1px solid var(--card-border); }
.desc-info-grid span { color:var(--text-secondary); }
.desc-info-hint { margin-top:10px; padding-top:8px; border-top:1px solid var(--card-border); font-size:11px; color:var(--text-secondary); font-style:italic; }

/* Descrição: alternância textarea (edição) ↔ preview formatado (WhatsApp) */
.desc-edit-wrap { position:relative; }
.m_desc_preview { min-height:140px; padding:11px 14px; border:1px solid var(--card-border); border-radius:4px; background:var(--card-bg); font-family:var(--font-body); font-size:12px; color:var(--text-primary); line-height:1.6; cursor:text; word-wrap:break-word; transition:border-color .15s ease, background .15s ease; }
.m_desc_preview:hover { border-color:var(--accent); background:white; }
.m_desc_preview:empty::before { content:'Clique para adicionar uma descrição...'; color:var(--text-secondary); font-style:italic; opacity:.7; }
.m_desc_preview p { margin:0; }
.m_desc_preview .wpp-ul, .m_desc_preview .wpp-ol { margin:0; padding-left:18px; }
.m_desc_preview .wpp-ul li, .m_desc_preview .wpp-ol li { margin:0; padding:0; line-height:1.6; }
.m_desc_preview .wpp-quote { border-left:3px solid var(--accent); padding:2px 10px; margin:2px 0; color:var(--text-secondary); background:rgba(212,168,71,0.05); }
.m_desc_preview .wpp-code, .m_desc_preview .wpp-pre { font-family:'Monaco','Courier New',monospace; background:rgba(0,0,0,0.05); padding:1px 5px; border-radius:3px; font-size:11px; }
.m_desc_preview .wpp-pre { display:block; padding:6px 10px; margin:4px 0; white-space:pre-wrap; }
.m_desc_preview a { color:var(--accent-dark); text-decoration:underline; }

/* Checklist (fluxo Trello: Enter emenda o próximo item; × aparece no hover) */
.checklist { display:flex; flex-direction:column; gap:2px; }
.checklist-item { display:flex; align-items:flex-start; gap:8px; padding:6px 8px; border-radius:3px; transition:background .1s ease; }
.checklist-item:hover { background:var(--card-bg); }
.checklist-item input[type="checkbox"] { accent-color:var(--accent-dark); cursor:pointer; width:15px; height:15px; flex-shrink:0; margin-top:4px; }
.checklist-item-text { flex:1; min-width:0; font-family:var(--font-body); font-size:13px; color:var(--text-primary); border:none; outline:none; background:transparent; padding:2px 4px; word-break:break-word; overflow-wrap:anywhere; white-space:normal; line-height:1.4; resize:none; overflow:hidden; box-sizing:border-box; display:block; width:100%; }
.checklist-item-text:focus { background:white; border-radius:2px; box-shadow:0 0 0 1px var(--accent); }
.checklist-item.done .checklist-item-text { text-decoration:line-through; color:var(--inactive-text); }
.checklist-item-remove { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:16px; line-height:1; padding:2px 6px; border-radius:3px; opacity:0; transition:opacity .15s ease; }
.checklist-item:hover .checklist-item-remove { opacity:1; }
.checklist-item-remove:hover { background:var(--bg); color:#a04040; }
.checklist-add { margin-top:4px; padding:6px 8px; color:var(--text-secondary); font-family:var(--font-body); font-size:13px; cursor:pointer; border-radius:3px; background:none; border:none; text-align:left; width:100%; }
.checklist-add:hover { background:var(--card-bg); color:var(--text-primary); }
.checklist-input { margin-top:4px; width:100%; border:1px solid var(--accent); background:white; border-radius:3px; padding:8px 10px; font-family:var(--font-body); font-size:13px; outline:none; resize:none; overflow:hidden; line-height:1.4; box-sizing:border-box; }

/* Aba Evento */
.event-pane { display:flex; flex-direction:column; gap:0; }
.event-pane-intro { font-family:var(--font-body); font-size:12px; color:var(--text-secondary); margin-bottom:16px; line-height:1.5; }
.modal-checkbox-label { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:13px; color:var(--text-primary); cursor:pointer; }
.ev-when-row { display:grid !important; grid-template-columns:1.3fr 1fr 1fr auto; gap:14px; align-items:end; }
.ev-when-row .meta-field { min-width:0; }
.ev-allday-inline { padding-bottom:10px; align-self:end; white-space:nowrap; }
.ev-duration-row { grid-column:1 / -1; margin-top:-6px; }
.ev-duration-inline { font-style:italic; }

/* Time-picker custom (hora atual primeiro; minutos 00/15/30/45) */
.time-picker-wrap { position:relative; display:block; }
.time-picker-input { cursor:pointer; padding-right:30px !important; background:var(--card-bg); }
.time-picker-input::placeholder { color:#999; }
.time-picker-icon { position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:#888; display:flex; }
.time-picker-dropdown { position:absolute; top:calc(100% + 6px); left:0; z-index:100; background:white; border:1px solid var(--card-border); border-radius:8px; box-shadow:0 8px 24px rgba(26,31,46,0.10), 0 2px 6px rgba(26,31,46,0.05); display:flex; padding:6px; gap:2px; }
.time-picker-col { display:flex; flex-direction:column; gap:1px; overflow-y:auto; scrollbar-width:thin; min-width:46px; max-height:180px; padding:2px; }
.time-picker-col + .time-picker-col { border-left:1px solid var(--card-border); padding-left:6px; margin-left:4px; }
.time-picker-col::-webkit-scrollbar { width:5px; }
.time-picker-col::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12); border-radius:3px; }
.time-picker-col::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.22); }
.time-picker-item { font-family:var(--font-body); font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.4px; text-align:center; padding:5px 12px; border-radius:5px; cursor:pointer; color:var(--text-primary); user-select:none; line-height:1.2; transition:background .08s ease, color .08s ease; }
.time-picker-item:hover { background:rgba(200,149,109,0.10); }
.time-picker-item.selected { background:var(--accent); color:white; font-weight:600; }
.time-picker-item.selected:hover { background:var(--accent-dark); }

/* Convidados externos (chips de e-mail) */
.ext-email-list { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px; border:1px solid var(--card-border); border-radius:4px; background:white; min-height:38px; }
.ext-email-list:focus-within { border-color:var(--accent-dark); }
.ext-email-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 8px; background:#f3eee0; border:1px solid #d4a847; border-radius:12px; font-family:var(--font-body); font-size:11px; color:#5a4310; }
.ext-email-chip .ext-email-remove { background:none; border:none; color:#5a4310; opacity:.6; cursor:pointer; padding:0 4px; font-size:14px; line-height:1; border-radius:50%; }
.ext-email-chip .ext-email-remove:hover { opacity:1; background:rgba(0,0,0,0.1); }
.ext-email-input { flex:1; min-width:180px; border:none; background:none; padding:4px 6px; font-family:var(--font-body); font-size:12px; color:var(--text-primary); }
.ext-email-input:focus { outline:none; }
.badge-external { display:inline-block; background:#f3eee0; color:#5a4310; font-family:var(--font-body); font-size:9px; text-transform:uppercase; letter-spacing:1px; padding:1px 6px; border-radius:8px; margin-left:6px; border:1px solid #d4a847; font-weight:600; vertical-align:middle; }

/* Aba Anexos — versionamento (fiel ao protótipo) */
.attach-tab-pane { display:flex; flex-direction:column; gap:14px; }
.attach-tab-header { margin-bottom:4px; }
.attach-tab-hint { font-family:var(--font-body); font-size:12px; color:var(--text-secondary); margin:0; line-height:1.5; }
.attach-tab-list { display:flex; flex-direction:column; gap:12px; }
.attach-tab-empty { text-align:center; padding:40px 20px; color:var(--text-secondary); font-family:var(--font-body); font-size:13px; background:white; border:1px dashed var(--card-border); border-radius:6px; }
.attach-tab-empty p { margin:4px 0; }
.attach-tab-add-row { display:flex; justify-content:flex-start; margin-top:4px; }
.attach-group { background:white; border:1px solid var(--card-border); border-radius:6px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s ease; }
.attach-group:hover { border-color:rgba(212,168,71,.4); }
.attach-group-row { display:flex; align-items:center; gap:12px; }
.attach-group-icon { flex-shrink:0; width:36px; height:36px; border-radius:4px; background:rgba(212,168,71,.08); display:flex; align-items:center; justify-content:center; color:var(--accent-dark); }
.attach-group-icon svg { width:20px; height:20px; }
.attach-group-info { flex:1; min-width:0; }
.attach-group-name { font-family:var(--font-body); font-size:13px; color:var(--text-primary); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach-group-meta { display:flex; align-items:center; gap:6px; margin-top:4px; font-family:var(--font-body); font-size:11px; color:var(--text-secondary); flex-wrap:wrap; }
.attach-meta-sep { opacity:.5; }
.attach-uploader-avatar { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; color:white; font-size:9px; font-weight:600; font-family:var(--font-body); flex-shrink:0; }
.attach-uploader-avatar-sm { width:16px; height:16px; font-size:8px; }
.attach-version-tag { background:rgba(212,168,71,.15); color:var(--accent-dark); padding:1px 7px; border-radius:8px; font-weight:600; font-size:10px; }
.attach-group-actions { display:flex; gap:4px; flex-shrink:0; }
.attach-group-actions label.tpl-card-action-btn { cursor:pointer; }
.attach-group-desc-input { width:100%; padding:7px 10px; border:1px solid var(--card-border); border-radius:4px; font-family:var(--font-body); font-size:12px; background:var(--card-bg); color:var(--text-primary); transition:all .15s ease; }
.attach-group-desc-input:focus { outline:none; border-color:var(--accent); background:white; }
.attach-group-desc-input::placeholder { color:var(--text-secondary); font-style:italic; opacity:.7; }
.attach-group-history-wrap { margin-top:2px; }
.attach-history-toggle { background:none; border:none; cursor:pointer; padding:4px 0; font-family:var(--font-body); font-size:11px; color:var(--text-secondary); display:inline-flex; align-items:center; gap:4px; transition:color .15s ease; }
.attach-history-toggle:hover { color:var(--accent-dark); }
.attach-history-chev { font-size:10px; line-height:1; }
.attach-group-history { margin-top:6px; padding:8px 12px; background:rgba(0,0,0,.018); border-radius:4px; display:flex; flex-direction:column; gap:6px; }
.attach-version-row { display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:8px; padding:4px 0; font-family:var(--font-body); font-size:11px; }
.attach-version-row:not(:last-child) { border-bottom:1px solid rgba(0,0,0,.04); padding-bottom:6px; }
.attach-version-num { font-weight:600; color:var(--accent-dark); font-size:10px; min-width:50px; }
.attach-version-current .attach-version-num { color:#3a7d44; }
.attach-version-name { color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach-version-meta { color:var(--text-secondary); font-size:10px; white-space:nowrap; }
.attach-version-note { grid-column:1 / -1; margin-top:4px; margin-left:50px; padding:4px 8px; background:white; border-left:2px solid var(--accent); color:var(--text-primary); font-size:11px; font-style:italic; border-radius:2px; }
.attach-version-download-btn { width:22px !important; height:22px !important; }
/* Botões de ação quadrados (mesmos do protótipo, tpl-card-action-btn) */
.tpl-card-action-btn { background:white; border:1px solid var(--card-border); width:28px; height:28px; border-radius:4px; cursor:pointer; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; padding:0; transition:all .15s ease; }
.tpl-card-action-btn:hover { color:var(--accent-dark); border-color:var(--accent-dark); background:var(--bg); }
.tpl-card-action-btn svg { width:14px; height:14px; }
.tpl-card-action-btn.tpl-card-action-danger { font-size:16px; line-height:1; }
.tpl-card-action-btn.tpl-card-action-danger:hover { color:#c0392b; border-color:#c0392b; background:#fde6e0; }

/* Comentários (painel colado no rodapé; caixa com filete accent) */
.comments-pane { display:flex; flex-direction:column; height:100%; min-height:0; }
.comments-pane .comments-list { flex:1; margin-bottom:12px; overflow-y:auto; }
.comments-list { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.comment { background:var(--card-bg); border-left:2px solid var(--accent); border-radius:0 3px 3px 0; padding:8px 12px; font-family:var(--font-body); cursor:pointer; transition:border-color .15s ease; }
.comment:hover { border-color:var(--accent-dark); }
/* Não-lido: filete vermelho + fundo rosado + marcador "novo" (clique marca como lido) */
.comment.comment-was-unread { border-left:3px solid #c0392b; background:#fff7f5; }
.comment-unread-marker { display:inline-block; margin-top:4px; background:#c0392b; color:white; border-radius:8px; padding:1px 8px; font-size:9px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.comment-date { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-secondary); margin-bottom:4px; }
.comment-text { font-size:13px; color:var(--text-primary); line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.comments-empty { text-align:center; color:var(--text-secondary); font-style:italic; padding:28px; font-family:var(--font-body); font-size:12px; }
.comment-add { display:flex; flex-direction:column; gap:6px; }
.comment-add textarea { width:100%; border:1px solid var(--card-border); border-radius:3px; padding:8px 10px; font-family:var(--font-body); font-size:13px; line-height:1.5; resize:vertical; min-height:50px; background:var(--card-bg); outline:none; }
.comment-add textarea:focus { background:white; border-color:var(--accent); }
.comment-add-actions { display:flex; justify-content:flex-end; gap:6px; }

/* ==========================================================================
   MEU ESCRITÓRIO (18/09/2026) — a barra de modos e o quadro de tarefas no
   padrão do Construtor.

   O quadro passou a usar as classes `cm-*` (a família de todos os kanbans da
   intranet: largura de 262px, cabeçalho com ponto/nome/contagem, cards). As
   classes `tk-*` continuam no HTML porque são os GANCHOS do JavaScript — o que
   saiu daqui foi a GEOMETRIA delas, que agora vem do padrão.
   ========================================================================== */

/* ---------- a barra de modos (Tarefas · Chat · Calendário · E-mail) ---------- */
.esc-modos { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px;
  border: 1px solid var(--card-border, #d9d9d2); border-radius: 10px;
  background: var(--bg, #f6f5f0); }
.esc-modo { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: 7px; text-decoration: none; cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-secondary, #7a7a70); transition: background .14s, color .14s; }
.esc-modo svg { width: 15px; height: 15px; }
.esc-modo:hover { color: var(--ink, #1d2b2e); }
.esc-modo.is-on { background: var(--card-bg, #fff); color: var(--navy, #1d2b3a); font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .07); }

/* ---------- quadro de tarefas: a geometria vem do padrão ---------- */
/* As regras antigas de .tk-cols/.tk-col/.tk-card ficaram em tarefas.css e
   continuam valendo para o MIOLO do card (ícones, etiquetas, avatares). Aqui só
   se neutraliza o que conflita com o padrão. */
.tk-cols.cm-board { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  align-items: flex-start; padding-bottom: 8px; }
.tk-col.cm-col { flex: 0 0 262px; width: 262px; min-width: 0; }
.tk-col.cm-col .cm-col-body { max-height: calc(100vh - 300px); }
.tk-card.cm-card { width: auto; }
.tk-filtros { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tk-filtros .cm-busca { min-width: 320px; }
.cm-filtro-conta { font-family: var(--font-mono, monospace); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary, #7a7a70); }
/* "+ Nova tarefa" no topo da primeira coluna */
.cm-add.tk-add { margin: 8px 10px 0; width: calc(100% - 20px); }

/* ---------- o número de acompanhamento ----------
   Discreto de propósito: serve para copiar e colar, não para ser lido. */
.tk-code { font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .04em;
  color: var(--text-secondary, #a5a59b); user-select: all; cursor: text; }
.tk-code:hover { color: var(--ink, #1d2b2e); }

/* ─── [18/09/2026] DENSIDADE DA MINIATURA, no molde do GTW ───────────────────
   Pedido do Felipe: o card do quadro tem de caber mais informação em menos
   altura, como no Global Trade Workflow. Lá o código é mono e pequeno, o
   título tem 12px, a linha de apoio é cinza e as etiquetas são miúdas — o card
   inteiro cabe em cinco linhas.

   Regra que vale para qualquer quadro daqui para a frente (ver PADROES.md §1.8):
   na MINIATURA o texto é pequeno; quem precisa ler com calma abre o card. */
.tk-card.cm-card { padding: 9px 10px; font-size: 12px; line-height: 1.35; }
.tk-card .tk-card-title { font-size: 12.5px; font-weight: 600; line-height: 1.3;
  padding-right: 40px; margin-bottom: 2px; }
.tk-card .tk-card-desc { font-size: 11px; line-height: 1.35; max-height: 2.7em;
  margin-bottom: 5px; color: var(--text-secondary); }
.tk-card .tk-card-desc li { font-size: 11px; }
.tk-card .tk-card-tags { gap: 4px; }
.tk-card .tk-tag, .tk-card .tk-due { font-size: 9.5px; padding: 1px 6px; }
.tk-card .tk-card-created { font-family: var(--font-mono, monospace); font-size: 9px;
  letter-spacing: .02em; opacity: .75; margin-top: 4px; }
.tk-card .tk-avatars { gap: 2px; margin-top: 5px; }
.tk-card .avatar.sm { width: 18px; height: 18px; font-size: 8.5px; }
.tk-card .tk-card-icons { top: 5px; right: 5px; gap: 2px; }
.tk-card .tk-card-icons svg { width: 12px; height: 12px; }
.tk-card .tk-star { font-size: 12px; }
.tk-card .tk-back, .tk-card .tk-advance { font-size: 11px; }
/* o código da tarefa, quando aparece na miniatura, segue o mono do GTW */
.tk-card .tk-code { font-size: 9px; }

/* ─── A ABA CHAT DO CARD (18/09/2026) ───────────────────────────────────────
   A conversa desta tarefa. O desenho é o do chat: bolha à direita quando é
   minha, à esquerda quando é de outra pessoa, com o nome de quem escreveu. */
.tk-chat { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.tk-chat-msgs {
    flex: 1;
    min-height: 220px;
    max-height: 46vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;
}
.tk-chat-vazio {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    padding: 18px 6px;
    text-align: center;
}
.tk-chat-bolha {
    max-width: 78%;
    align-self: flex-start;
    background: var(--surface-2, #f4f2ea);
    border: 1px solid var(--card-border, #e0ddd0);
    border-radius: 10px 10px 10px 2px;
    padding: 7px 10px;
}
.tk-chat-bolha.is-minha {
    align-self: flex-end;
    background: var(--accent-soft, #efe9ff);
    border-color: transparent;
    border-radius: 10px 10px 2px 10px;
}
.tk-chat-autor { font-size: 10px; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px; }
.tk-chat-corpo { font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.tk-chat-hora { font-size: 10px; color: var(--text-secondary); text-align: right; margin-top: 2px; }
.tk-chat-escrever { display: flex; gap: 8px; align-items: flex-end; }
.tk-chat-inp { flex: 1; resize: vertical; }
.tk-chat-nota { font-size: 11px; color: var(--text-secondary); }

/* ─── FOTO NO LUGAR DAS INICIAIS (18/09/2026) ───────────────────────────────
   Onde a pessoa tem foto no cadastro, é a foto que aparece — no card, no modal
   e nos seletores. As iniciais continuam existindo para quem ainda não tem uma.
   O pedido do Felipe foi "em todo lugar"; este arquivo cobre o Meu Escritório. */
.avatar.avatar--foto,
.tk-av {
    background-size: cover;
    background-position: center;
    color: transparent;      /* nenhuma letra por baixo da foto */
    text-indent: -9999px;
    overflow: hidden;
}
.tk-av {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    vertical-align: middle;
    background-color: var(--surface-2, #f4f2ea);
}
.tk-av--letras {
    color: var(--text-secondary);
    text-indent: 0;
    font-size: 9px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}
.tk-avatares-sel { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* ─── ACOMPANHADOR DE E-MAILS DO CARD (18/09/2026) ──────────────────────────
   A coluna da esquerda do card de tarefa, no espírito da que os cards de Comex
   e do Comercial já têm. Só existe quando a tarefa tem e-mail: é o JS que liga
   a classe `tem-mail` no modal, e é ela que alarga o card. */
.modal.modal-tarefa.tem-mail { max-width: 1060px; }
.tk-mail {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--card-border);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tk-mail-top { padding: 14px 16px 10px; border-bottom: 1px solid var(--card-border); }
.tk-mail-tit { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.tk-mail-n {
    display: inline-block;
    margin-left: 6px;
    background: var(--surface-2, #f4f2ea);
    color: var(--text-secondary);
    border-radius: 9px;
    font-size: 10px;
    padding: 1px 6px;
}
.tk-mail-sub { font-size: 10px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.tk-mail-lista { flex: 1; overflow-y: auto; padding: 6px 0; }
.tk-mail-item { border-bottom: 1px solid var(--card-border); }
.tk-mail-head {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
.tk-mail-head:hover { background: white; }
.tk-mail-item.is-novo .tk-mail-assunto { font-weight: 600; color: var(--text-primary); }
.tk-mail-av {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--text-secondary); color: white;
    font-size: 9px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tk-mail-av.is-out { background: var(--accent-dark, #6c4cd6); }
.tk-mail-resumo { flex: 1; min-width: 0; }
.tk-mail-l1 { display: flex; justify-content: space-between; gap: 6px; }
.tk-mail-de { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.tk-mail-data { font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
.tk-mail-assunto {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-mail-clipe { font-size: 11px; color: var(--text-secondary); }
.tk-mail-corpo { padding: 0 14px 12px 46px; }
.tk-mail-dest { font-size: 10px; color: var(--text-secondary); margin-bottom: 6px; }
.tk-mail-rot { display: inline-block; width: 38px; text-transform: uppercase; letter-spacing: .06em; }
.tk-mail-texto { font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* Tela estreita: o acompanhador sai da frente — o card volta ao tamanho de
   sempre e o e-mail se lê na visualização E-mail. */
@media (max-width: 1180px) {
    .modal.modal-tarefa.tem-mail { max-width: 640px; }
    .tk-mail { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   O CARD DE TAREFA NO PADRÃO DO CONSTRUTOR (18/09/2026)

   PADROES.md §2.1 (régua de etapas no topo) e §2.2 (dados gerais em grade de
   duas colunas). Mesmos campos de antes — o que muda é a geometria: o card
   deixa de ser uma coluna estreita de campos empilhados e passa a ter a cara
   dos cards de Comex e do Comercial.

   Cores: só tokens do tema (§1.2). Nenhum hexadecimal novo.
   ══════════════════════════════════════════════════════════════════════════ */

/* O card respira: a grade de duas colunas não cabe em 640px. */
.modal.modal-tarefa { max-width: 880px; }

/* ─── cabeçalho ─────────────────────────────────────────────────────────── */
.modal-header.tk-head { padding: 18px 24px 14px; align-items: center; }
.tk-head-txt { flex: 1; min-width: 0; }
.tk-head-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: 10px;
    color: var(--text-secondary);
}
.tk-head .tk-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .04em; }
.tk-head-col { text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; }
.tk-head-sep { opacity: .5; }
.modal-header.tk-head .modal-title-input { font-size: 20px; padding: 0; }

/* ─── a régua de etapas (§2.1) ──────────────────────────────────────────── */
.tk-ruler {
    display: flex;
    gap: 4px;
    padding: 0 24px 14px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}
.tk-ruler-seg {
    flex: 1;
    min-width: 0;
    position: relative;
    padding: 6px 8px 5px;
    border-radius: 3px;
    background: var(--surface-2, #f4f2ea);
    border: 1px solid var(--card-border);
    border-top: 2px solid var(--card-border);
    font-size: 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}
.tk-ruler-name { overflow: hidden; text-overflow: ellipsis; }
/* Etapa cumprida: mais apagada. Etapa atual: a única com contraste — é onde o
   card está, e é a única que oferece as setas. */
.tk-ruler-seg--done { opacity: .55; }
.tk-ruler-seg--current {
    background: var(--card-bg, #fff);
    border-top-color: var(--accent-dark, #6c4cd6);
    color: var(--text-primary);
    font-weight: 600;
}
.tk-ruler-seg--pending { opacity: .75; }
.tk-ruler-mvs { display: flex; gap: 2px; flex-shrink: 0; }
.tk-ruler-mv {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 3px;
    cursor: pointer;
}
.tk-ruler-mv:hover { background: var(--surface-2, #f4f2ea); color: var(--text-primary); }

/* ─── os dados gerais em grade de duas colunas (§2.2) ───────────────────── */
.tk-gfields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    align-items: start;
}
.tk-gfields .tk-campo { min-width: 0; }
/* O Tipo traz junto a estrela e a data: é uma linha só de controles. */
.tk-gfields .tipo-row { display: flex; align-items: center; gap: 6px; }
.tk-gfields .tipo-row select { flex: 1; min-width: 0; }

/* Descrição e checklist ocupam a largura inteira — texto longo em meia coluna
   vira uma coluna de jornal. */
.tarefa-tab-content .modal-section:not(.tk-gfields) { max-width: 100%; }
.m_desc_textarea { min-height: 120px; }

@media (max-width: 860px) {
    .tk-gfields { grid-template-columns: 1fr; }
    .tk-ruler-name { font-size: 9.5px; }
}

/* ─── correção: o acompanhador escondido estava aparecendo ───────────────
   `.tk-mail` define display:flex, e classe vence a regra que o navegador dá ao
   atributo [hidden] — a coluna vazia aparecia em toda tarefa sem e-mail. */
.tk-mail[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   O CARD DE TAREFA COM AS PEÇAS DA FICHA DO GTW (18/09/2026)

   O Felipe apontou o card do `Global Qomex › Global Trade Workflow` como o
   layout a seguir. Este card passou a usar AS MESMAS CLASSES da ficha de lá
   (`.gqv-modal-head`, `.gqf-meta`/`.gqf-ruler`, `.gqf-fixos`/`.gqv-campo`,
   `.gqv-modal-foot`), que já valem em toda página por causa do
   `globalqomex/viabilidade.css`. Aqui ficam só os ajustes de encaixe: o card de
   tarefa tem, além daquilo, o rail de abas e o acompanhador de e-mails.
   ══════════════════════════════════════════════════════════════════════════ */

/* cabeçalho: o × no canto e o "Salvo" antes dele */
.modal.modal-tarefa .gqv-modal-head.tk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 12px;
    border-bottom: none;
}
.modal.modal-tarefa .gqv-modal-head .autosave-indicator { margin-left: auto; }
.modal.modal-tarefa .gqv-modal-head .gqv-modal-x { position: static; }

/* a régua ocupa a largura do card, como na ficha */
.modal.modal-tarefa .gqf-meta { flex-shrink: 0; }
/* The ruler sits at the top of the middle column (2026-10-19): compact, no side padding */
.tk-corpo .gqf-meta { padding: 0 0 12px; }
.tk-corpo .gqf-ruler-seg { min-height: 0; padding-top: 5px; padding-bottom: 5px; }
.tk-corpo .gqf-ruler-mvs { margin-top: 3px; }

/* os campos: a grade da ficha, com o título ocupando a linha inteira */
.modal.modal-tarefa .gqf-fixos { margin-bottom: 16px; }
.gqf-campo--largo { grid-column: 1 / -1; }

/* A gaveta de BU/membros tem de parecer um campo, não um botão solto: mesma
   caixa, mesma borda e mesma altura dos inputs da ficha. */
.gqv-campo .pp-ms { width: 100%; }
.gqv-campo .pp-ms-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--surface-2, #f4f2ea);
    border: 1px solid var(--card-border, #e0ddd0);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}
.gqv-campo .pp-ms-btn:hover { background: #fff; }
.gqv-campo .pp-ms-seta { color: var(--text-secondary); font-size: 10px; }

/* Tipo + estrela + data numa linha só, na altura dos outros campos */
.gqf-fixos .tipo-row { display: flex; align-items: center; gap: 6px; }
.gqf-fixos .tipo-row select.modal-input {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 7px 10px;
    font-size: 12.5px;
    background: var(--surface-2, #f4f2ea);
    border: 1px solid var(--card-border, #e0ddd0);
    border-radius: 6px;
}

/* descrição e checklist seguem a mesma caixa dos campos da ficha */
.tarefa-tab-content .m_desc_textarea,
.tarefa-tab-content .m_desc_preview {
    background: var(--surface-2, #f4f2ea);
    border: 1px solid var(--card-border, #e0ddd0);
    border-radius: 6px;
    min-height: 92px;
}
.tarefa-tab-content .modal-section > .modal-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
}

/* rodapé da ficha: Excluir discreto à esquerda, "Criada em" no meio */
.modal.modal-tarefa .gqv-modal-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--card-border);
    flex-shrink: 0;
}
.modal.modal-tarefa .gqv-modal-foot .gqv-hint {
    flex: 1;
    font-size: 11px;
    color: var(--text-secondary);
}

/* a régua antiga (versão de 5 horas atrás) sai de cena */
.tk-ruler { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   O CARD DE TAREFA EM DUAS PARTES (21/09/2026)

   Pedido do Felipe: o rail de ícones some; a antiga aba "Geral" vira o
   CABEÇALHO (campos enxutos, sempre à vista) e as outras viram abas do PANO DA
   DIREITA — as mesmas peças do card de `Compras › Importações e exportações`
   (.cx-rep / .cx-rep-tabs / .cx-rep-body), com o E-mail como aba padrão.
   ══════════════════════════════════════════════════════════════════════════ */

/* Duas colunas: o cabeçalho respira e o pano tem largura de leitura. */
.modal.modal-tarefa { max-width: 1040px; }
.modal.modal-tarefa.tem-mail { max-width: 1040px; }  /* a largura não depende mais de ter e-mail */
.tarefa-modal-shell { gap: 0; }
.tk-corpo { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 18px 18px; }
.tk-rep { width: 384px; flex-shrink: 0; border-left: 1px solid var(--card-border); }

/* A ponte de tokens do comex não alcança um modal que vive fora do #cxRoot:
   sem ela, `var(--surface)` não resolve e o pano abre transparente. Mesma nota
   que está no topo de comex/controle.css. */
.tk-rep {
    --navy: var(--accent-dark);
    --cyan: var(--accent);
    --ink: var(--text-primary);
    --text: var(--text-primary);
    --text-2: var(--text-secondary);
    --muted: var(--text-secondary);
    --surface: var(--card-bg);
    --surface-2: var(--column-bg);
    --border: var(--card-border);
    --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* As abas do pano: ícone + nome, e a ativa marcada como no comex. O JS do card
   usa a classe `active`; o CSS do comex usa `is-on` — o JS liga as duas. */
.tk-rep .cx-rep-tabs { flex-wrap: wrap; }
/* Seis abas precisam caber em duas linhas curtas: aperto o passo, não o nome —
   aba com nome é aba que se acha sem passar o mouse. */
.tk-rep .cx-rep-tabs { gap: 1px; padding: 7px 7px 0; }
.tk-rep .cx-rep-tab { position: relative; font-size: 10.5px; padding: 6px 8px; gap: 4px; }
.tk-rep .cx-rep-tab .tk-rep-ico { display: inline-flex; width: 13px; height: 13px; }
.tk-rep .cx-rep-tab .tk-rep-ico svg { width: 13px; height: 13px; }
.tk-rep .cx-rep-tab .tarefa-tab-badge { position: static; margin-left: 4px; box-shadow: none; }

/* O conteúdo de cada aba vive dentro do corpo rolável do pano. */
.tk-rep .cx-rep-body { padding: 0; }
.tk-rep .tarefa-tab-content { padding: 12px 14px; overflow: visible; }
.tk-rep .tk-mail { width: auto; border-right: 0; background: none; }
.tk-rep .tk-mail-top { padding: 0 0 8px; }
.tk-rep .tk-mail-lista { max-height: none; }
.tk-rep .tk-mail-vazio { padding: 20px 6px; text-align: center; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* ─── CAMPOS ENXUTOS no cabeçalho (o padrão dos kanbans) ────────────────── */
.tk-corpo .gqf-fixos { gap: 8px 12px; margin-bottom: 10px; }
.tk-corpo .gqv-campo > span { font-size: 9.5px; }
.tk-corpo .gqv-campo input,
.tk-corpo .gqv-campo select,
.tk-corpo .gqf-fixos .tipo-row select.modal-input,
.tk-corpo .gqv-campo .pp-ms-btn {
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.35;
}
.tk-corpo .modal-section { margin-bottom: 10px; }
.tk-corpo .m_desc_textarea,
.tk-corpo .m_desc_preview {
    min-height: 68px;
    font-size: 12px;
    padding: 7px 9px;
}
.tk-corpo .checklist-item-text { font-size: 12px; }
.tk-corpo .checklist-add { font-size: 11.5px; }
.tk-corpo .tk-avatares-sel { margin-top: 4px; }

/* Numa tela estreita o pano desce para baixo do cabeçalho, em vez de espremer
   os dois. */
@media (max-width: 1080px) {
    .modal.modal-tarefa { max-width: 92vw; }
    .tarefa-modal-shell { flex-direction: column; overflow-y: auto; }
    .tk-rep { width: auto; border-left: 0; border-top: 1px solid var(--card-border); }
}

/* ══════════════════════════════════════════════════════════════════════════
   O CARD DE TAREFA EM TRÊS COLUNAS (21/09/2026)

   Conversa à esquerda (E-mail · Chat · Comentários), cabeçalho no meio,
   conteúdo à direita (Evento · Atas · Anexos) — o desenho do card de
   `Compras › Importações e exportações`.
   ══════════════════════════════════════════════════════════════════════════ */
.modal.modal-tarefa,
.modal.modal-tarefa.tem-mail { max-width: 1280px; }

/* As duas colunas laterais têm a mesma largura: nenhuma das duas é "a
   principal" — o meio é que é. */
.tk-esq, .tk-rep { width: 340px; flex-shrink: 0; }
.tk-esq { border-right: 1px solid var(--card-border); border-left: 0; }
.tk-rep { border-left: 1px solid var(--card-border); }

/* A ponte de tokens do comex (as classes cx-* vivem fora do #cxRoot aqui). */
.tk-esq, .tk-rep {
    --navy: var(--accent-dark);
    --cyan: var(--accent);
    --ink: var(--text-primary);
    --text: var(--text-primary);
    --text-2: var(--text-secondary);
    --muted: var(--text-secondary);
    --surface: var(--card-bg);
    --surface-2: var(--column-bg);
    --border: var(--card-border);
    --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

.tk-esq .cx-rep-tabs, .tk-rep .cx-rep-tabs { gap: 1px; padding: 7px 7px 0; flex-wrap: wrap; }
.tk-esq .cx-rep-tab, .tk-rep .cx-rep-tab { position: relative; font-size: 10.5px; padding: 6px 8px; gap: 4px; }
.tk-esq .tk-rep-ico, .tk-rep .tk-rep-ico { display: inline-flex; width: 13px; height: 13px; }
.tk-esq .tk-rep-ico svg, .tk-rep .tk-rep-ico svg { width: 13px; height: 13px; }
.tk-esq .tarefa-tab-badge, .tk-rep .tarefa-tab-badge { position: static; margin-left: 4px; box-shadow: none; }
.tk-esq .cx-rep-body, .tk-rep .cx-rep-body { padding: 0; }
.tk-esq .tarefa-tab-content, .tk-rep .tarefa-tab-content { padding: 12px 14px; overflow: visible; }

/* ABA TRAVADA: cinza, cadeado e o motivo no hover (o `title` vem do JS). O
   comex já deixa `:disabled` em cinza; aqui só entra o cadeado. */
.cx-rep-tab .tk-rep-lock { font-size: 9px; opacity: .7; }
.cx-rep-tab.is-travada { opacity: .55; }
.cx-rep-tab.is-travada:hover { background: none; }

/* a conversa ocupa a coluna inteira */
.tk-esq .tk-mail { width: auto; border-right: 0; background: none; }
.tk-esq .tk-mail-top { padding: 0 0 8px; }
.tk-esq .tk-mail-lista { max-height: none; }
.tk-esq .tk-mail-vazio { padding: 20px 6px; text-align: center; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.tk-esq .tk-chat-msgs { max-height: 46vh; }
.tk-esq .comments-pane { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1320px) {
    .modal.modal-tarefa, .modal.modal-tarefa.tem-mail { max-width: 94vw; }
    .tk-esq, .tk-rep { width: 300px; }
}
@media (max-width: 1080px) {
    .tarefa-modal-shell { flex-direction: column; overflow-y: auto; }
    .tk-esq, .tk-rep { width: auto; border: 0; border-top: 1px solid var(--card-border); }
}