/* telas/tarefas/estilo.css — Tarefas (#512). Cor SÓ por token (web/styles.css e
   web/ds/tokens.css): o tema do cliente e o skin AGI repintam tudo. Prefixo
   tf- em toda classe; nada aqui vaza para o shell.
   Hierarquia da linha: o que grita = título e prazo vencido; o que fala =
   status, dono, cliente; o que sussurra = id, tipo, metadado em cinza. */

.tf { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 20px 24px; color: var(--ink); }
.tf.wrap { padding-top: 18px; }
.tf .mono { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.tf .muted { color: var(--muted); }
.tf .espaco { flex: 1 1 auto; }
.tf .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tf-ico { flex: none; vertical-align: -2px; }
.tf .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.tf .btn.ok { color: var(--ink-ok); border-color: color-mix(in srgb, var(--ds-ok) 45%, var(--line)); }
.tf .so-movel { display: none; }
.tf .btn kbd { font: 600 10px/1 var(--ds-font-mono); padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--on-accent) 18%, transparent); color: inherit; }

/* ── cabeçalho: pergunta, visões, busca e Nova ─────────────────────────── */
.tf-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 16px; align-items: center; }
.tf-cab-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.tf-cab h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.tf-resumo { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-resumo b { font-weight: 700; }
.tf-resumo .err { color: var(--ink-err); }
.tf-resumo .acc { color: var(--ink-accent); }
.tf-cab-r { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.tf-abas { display: flex; justify-content: center; min-width: 0; }

/* segmented control (visões e agrupar) */
.tf-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--ds-r, 10px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tf-seg::-webkit-scrollbar { display: none; }
.tf-seg button { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 7px; padding: 6px 12px; min-height: 32px; cursor: pointer; white-space: nowrap; transition: color var(--ds-dur-fast), background var(--ds-dur-fast); }
.tf-seg button:hover { color: var(--ink); }
.tf-seg button.ativa { color: var(--ink); background: var(--panel); box-shadow: var(--ds-shadow-1); }
.tf-seg button:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
.tf-seg.pequeno button { font-size: 12px; padding: 4px 10px; min-height: 28px; }

.tf-busca { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; min-height: 32px; }
.tf-busca:focus-within { border-color: var(--ink-accent); color: var(--ink); }
.tf-busca input { font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; outline: 0; width: 150px; min-width: 0; }
.tf-busca input::placeholder { color: var(--muted); }

/* ── filtros: chips com contagem, toggle, agrupar ───────────────────────── */
.tf-filtros { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.tf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.tf-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.tf-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 9px 0 10px; min-height: 28px; cursor: pointer; white-space: nowrap; transition: border-color var(--ds-dur-fast), color var(--ds-dur-fast); }
.tf-chip:hover { color: var(--ink); border-color: var(--muted-2); }
.tf-chip.ativo { color: var(--ink); border-color: var(--ink-accent); background: color-mix(in srgb, var(--ds-accent) 10%, var(--panel)); }
.tf-chip .n { font-weight: 700; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--panel-2); border-radius: 999px; padding: 1px 6px; }
.tf-chip.ativo .n { color: var(--ink); }
.tf-chip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-none); }
.tf-chip.t-info .d { background: var(--ds-info); }
.tf-chip.t-err .d { background: var(--ds-err); }
.tf-chip.t-warn .d { background: var(--ds-warn); }
.tf-chip.t-ok .d { background: var(--ds-ok); }
.tf-chip.t-err.ativo { border-color: var(--ds-err); }
.tf-chip.t-acc.ativo { border-color: var(--ink-accent); }
.tf-chip.limpar { color: var(--ink-accent); border-style: dashed; }
.tf-chip .inicial, .tf-chip .avatar { width: 14px; height: 14px; font-size: 8px; }
.tf-ferr { display: flex; align-items: center; gap: 12px; flex: none; }
.tf-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; min-height: 28px; }
.tf-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-toggle i { width: 30px; height: 18px; border-radius: 999px; background: var(--line); position: relative; transition: background var(--ds-dur-fast); flex: none; }
.tf-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); transition: transform var(--ds-dur-fast); box-shadow: var(--ds-shadow-1); }
.tf-toggle input:checked + i { background: var(--ds-accent); }
.tf-toggle input:checked + i::after { transform: translateX(12px); }
.tf-toggle input:checked ~ span { color: var(--ink); }
.tf-toggle input:focus-visible + i { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* ── split: lista à esquerda, detalhe à direita ─────────────────────────── */
.tf-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
.tf.com-detalhe .tf-split { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
.tf-principal { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* nova tarefa (N) */
.tf-nova { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--ink-accent); border-radius: var(--ds-r, 10px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 12%, transparent); }
.tf-nova .titulo { font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: none; border: 0; outline: 0; padding: 4px 2px; width: 100%; }
.tf-nova .titulo::placeholder { color: var(--muted); font-weight: 500; }
.tf-nova .campos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-nova select, .tf-nova input[type="date"] { font: inherit; font-size: 12px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; min-height: 30px; max-width: 220px; }
.tf-nova .nota { margin: 0; font-size: 12px; color: var(--ink-warn); }

/* ── a tabela (a linha perfeita) ───────────────────────────────────────── */
.tf-tabela-rol { contain: inline-size; border: 1px solid var(--line); border-radius: var(--ds-r, 10px); background: var(--panel); overflow: auto; max-height: calc(100vh - 230px); overscroll-behavior: contain; }
.tf-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tf-tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 10px; height: 36px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tf-th { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.tf-th:hover { color: var(--ink); }
.tf-tabela th[aria-sort="ascending"] .tf-th, .tf-tabela th[aria-sort="descending"] .tf-th { color: var(--ink); }
.tf-th .seta { color: var(--ink-accent); }
.tf-tabela td { padding: 0 10px; height: 46px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.tf-tabela tbody tr:last-child td { border-bottom: 0; }
.tf-linha { cursor: pointer; transition: background var(--ds-dur-fast); }
.tf-linha:hover td { background: var(--tag-bg); }
.tf-linha.sel td { box-shadow: inset 2px 0 0 var(--muted-2); }
.tf-linha.aberta td { background: color-mix(in srgb, var(--ds-accent) 9%, var(--panel)); box-shadow: inset 2px 0 0 var(--ds-accent); }
.tf-linha.feita .tit { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-2); }
.tf-linha:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
.tf-tabela .c-chk { width: 36px; padding-right: 0; }
.tf-tabela .c-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--ds-accent); cursor: pointer; display: block; }
.tf-tabela .c-id { width: 56px; font-size: 12px; color: var(--muted); }
.tf-tabela .c-tit { white-space: normal; min-width: 220px; max-width: 48ch; }
.tf-tabela .c-tit .tit { display: block; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-tabela .c-tit .sub { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tf-tabela .c-tit .sub:empty { display: none; }
.tf-recuo { display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 2px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0 0 0 4px; vertical-align: -3px; float: left; }
.tf-linha.filha .c-tit .tit { font-weight: 500; }
.tf-tabela .c-st { width: 118px; }
.tf-tabela .c-dono { width: 170px; max-width: 170px; }
.tf-tabela .c-cli { width: 150px; }
.tf-tabela .c-prio { width: 110px; }
.tf-tabela .c-prazo { width: 96px; }
.tf-tabela .c-tipo { width: 110px; color: var(--muted); font-size: 12px; }
.tf-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tf-tabela .num.err { color: var(--ink-err); font-weight: 700; }
.tf-tabela.compacta td { height: 38px; }
.tf-grupo td { background: var(--panel-2); height: 34px; font-size: 12px; font-weight: 700; color: var(--ink); position: sticky; top: 36px; z-index: 1; }
.tf-grupo .n { margin-left: 8px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* peças da linha */
.tf-tag { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 16px; white-space: nowrap; text-decoration: none; }
.tf-tag.err { color: var(--ink-err); border-color: color-mix(in srgb, var(--ds-err) 45%, var(--line)); }
.tf-pessoa { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.tf-pessoa .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tf-pessoa .inicial, .tf-pessoa .avatar { width: 20px; height: 20px; font-size: 9px; }
.tf-semdono { color: var(--muted-2); font-size: 12px; font-style: italic; }
.tf-chip-cli { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0 8px 0 3px; min-height: 22px; max-width: 100%; cursor: default; }
.tf-chip-cli .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-chip-cli .inicial, .tf-chip-cli .avatar { width: 16px; height: 16px; font-size: 8px; }
.tf-chip-cli.agencia { color: var(--muted); padding-left: 8px; background: none; border-style: dashed; }
button.tf-chip-cli { cursor: pointer; }
button.tf-chip-cli:hover { border-color: var(--ink-accent); }
.tf-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tf-prio.p1 { color: var(--ink-err); font-weight: 700; }
.tf-prio.p2 { color: var(--ink-warn); font-weight: 600; }
.tf-prazo { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.tf-prazo.pz-vencida { color: var(--ink-err); font-weight: 700; }
.tf-prazo.pz-hoje { color: var(--ink-accent); font-weight: 700; }
.tf-prazo.pz-futura { color: var(--ink); }
.tf-prazo.pz-sem, .tf-prazo.pz-fechada { color: var(--muted-2); font-weight: 500; }

/* ── estados: esqueleto, vazio, erro ───────────────────────────────────── */
.tf-skel { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--ds-r, 10px); background: var(--panel); }
.tf-skel.compacto { border: 0; padding: 0; background: none; }
.tf-skel-linha { display: flex; gap: 14px; align-items: center; height: 40px; }
.tf-skel-linha i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2) 0%, var(--line) 50%, var(--panel-2) 100%); background-size: 480px 100%; animation: tf-shimmer 1.4s linear infinite; }
@keyframes tf-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } }
.tf-vazio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--ds-r, 10px); background: var(--panel); }
.tf-vazio svg { color: var(--muted-2); margin-bottom: 6px; }
.tf-vazio h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.tf-vazio p { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.5; }
.tf-vazio .btn { margin-top: 8px; }
.tf-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ds-err) 50%, var(--line)); border-left: 3px solid var(--ds-err); border-radius: var(--ds-r, 10px); background: var(--panel); color: var(--ink); font-size: 13px; }
.tf-erro .det { color: var(--muted); font-family: var(--ds-font-mono); font-size: 12px; word-break: break-word; }

/* ── painel de detalhe ─────────────────────────────────────────────────── */
.tf-detalhe { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 24px); overflow: auto; overscroll-behavior: contain; padding: 12px 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--ds-r-lg, 14px); box-shadow: var(--ds-shadow-2); min-width: 0; }
.tf-det-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-det-topo .id { font-size: 12px; color: var(--muted); }
.tf-det-topo .btn .rot { display: inline; }
.tf-det-titulo { display: flex; flex-direction: column; gap: 4px; }
.tf-det-titulo h2, .tf-det-titulo .h2 { margin: 0; font: inherit; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.tf-det-titulo .h2 { width: 100%; resize: none; overflow: hidden; background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; margin-left: -4px; field-sizing: content; min-height: 30px; }
.tf-det-titulo .h2:hover { border-color: var(--line-soft); }
.tf-det-titulo .h2:focus { outline: 0; border-color: var(--ink-accent); background: var(--panel-2); }
.tf-mae { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.tf-mae:hover { color: var(--ink-accent); }

.tf-props { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.tf-prop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tf-prop.largo { grid-column: 1 / -1; }
.tf-prop .rot { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tf-prop .val { font-size: 13px; font-weight: 600; color: var(--ink); min-height: 28px; display: flex; align-items: center; min-width: 0; }
.tf-sel, .tf-in, .tf-ta { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 4px 8px; min-height: 28px; max-width: 100%; min-width: 0; }
.tf-sel:hover, .tf-in:hover { border-color: var(--line); }
.tf-sel:focus, .tf-in:focus, .tf-ta:focus { outline: 0; border-color: var(--ink-accent); }
.tf-sel:disabled, .tf-in:disabled { opacity: .7; cursor: not-allowed; }
.tf-sel.st-info { color: var(--ink-info); }
.tf-sel.st-err { color: var(--ink-err); }
.tf-sel.st-warn { color: var(--ink-warn); }
.tf-sel.st-ok { color: var(--ink-ok); }
.tf-in { flex: 1 1 auto; font-weight: 500; }
.tf-in.curto { flex: 0 0 76px; width: 76px; }
.tf-ta { width: 100%; font-weight: 400; line-height: 1.5; resize: vertical; }
.tf-sel-ico { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.tf-prazo-edit { display: inline-flex; align-items: center; gap: 8px; }
.tf-prazo-edit input { font: inherit; font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 3px 6px; min-height: 28px; }
.tf-horas { display: inline-flex; align-items: center; gap: 6px; }
.tf-horas input { width: 64px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 4px 8px; min-height: 28px; font-variant-numeric: tabular-nums; text-align: right; }
.tf-horas .sep { color: var(--muted-2); }
.tf-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-info); text-decoration: none; font-weight: 600; font-size: 12px; white-space: nowrap; }
.tf-link:hover { text-decoration: underline; }

.tf-desc { display: flex; flex-direction: column; gap: 6px; }
.tf-sec-cab { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-height: 24px; }
.tf-md { font-size: 13.5px; line-height: 1.55; color: var(--ink); word-break: break-word; }
.tf-md p, .tf-md ul, .tf-md ol { margin: 0 0 8px; }
.tf-md ul, .tf-md ol { padding-left: 20px; }
.tf-md h4, .tf-md h5, .tf-md h6 { margin: 8px 0 4px; font-size: 13.5px; font-weight: 800; }
.tf-md code { font-family: var(--ds-font-mono); font-size: 12px; background: var(--panel-2); border-radius: 4px; padding: 1px 5px; }
.tf-md a { color: var(--ink-info); }
.tf-md > :last-child { margin-bottom: 0; }

.tf-secao { border-top: 1px solid var(--line-soft); padding-top: 8px; }
.tf-secao > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); min-height: 32px; user-select: none; }
.tf-secao > summary::-webkit-details-marker { display: none; }
.tf-secao > summary .tf-ico { transition: transform var(--ds-dur-fast); }
.tf-secao[open] > summary .tf-ico { transform: rotate(90deg); }
.tf-secao > summary:hover { color: var(--ink); }
.tf-secao > summary .n { font-variant-numeric: tabular-nums; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.tf-secao .corpo { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; font-size: 13px; }
.tf-dep-grupo { display: flex; flex-direction: column; gap: 4px; }
.tf-dep-grupo .rot { font-size: 11px; font-weight: 700; color: var(--muted); }
.tf-dep, .tf-filha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tf-dep .btn, .tf-filha .btn, .tf-filha .tf-tag { flex: none; white-space: nowrap; }
.tf-ref { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 4px 10px 4px 8px; min-height: 32px; cursor: pointer; text-align: left; min-width: 0; flex: 1 1 auto; }
.tf-ref:hover { border-color: var(--ink-accent); }
.tf-ref .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 500; }
.tf-mini { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tf-check { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; }
.tf-check input { accent-color: var(--ds-accent); width: 16px; height: 16px; margin: 0; }
.tf-check .ok { color: var(--muted); text-decoration: line-through; }
.tf-form-bug { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.tf-form-bug .acoes { display: flex; justify-content: flex-end; gap: 6px; }
.tf-anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tf-anexo { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); font-size: 12px; min-width: 0; }
.tf-anexo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.tf-anexo-ico { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 8px; border: 1px dashed var(--line); color: var(--muted); }
.tf-anexo .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tf-anexo .sub { color: var(--muted); font-size: 11px; }
.tf-thread { display: flex; flex-direction: column; gap: 12px; }
.tf-coment { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.tf-coment .inicial, .tf-coment .avatar { width: 26px; height: 26px; font-size: 11px; }
.tf-coment .cab { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 2px; }
.tf-coment .cab b { color: var(--ink); }
.tf-coment .cab time { color: var(--muted); }
.tf-comentar { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tf-det-rodape { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted-2); border-top: 1px solid var(--line-soft); padding-top: 10px; }

/* ── kanban ────────────────────────────────────────────────────────────── */
.tf-split.board { grid-template-columns: minmax(0, 1fr); }
.tf.com-detalhe .tf-split.board { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); }
.tf-kanban { contain: inline-size; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; align-items: stretch; min-height: 320px; }
.tf-col { flex: 0 0 264px; display: flex; flex-direction: column; min-width: 0; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--ds-r, 10px); transition: border-color var(--ds-dur-fast), background var(--ds-dur-fast); }
.tf-col.sobre { border-color: var(--ink-accent); background: color-mix(in srgb, var(--ds-accent) 8%, var(--panel-2)); }
.tf-col.estourou .tf-col-cab .n { color: var(--ink-warn); }
.tf-col-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.tf-col-cab .rot { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--muted); }
.tf-col-cab .n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.tf-col-cab .n small { font-weight: 500; color: var(--muted-2); }
.tf-col-cab .n.alerta { color: var(--ink-warn); }
.tf-col-corpo { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; min-height: 80px; max-height: calc(100vh - 290px); overflow-y: auto; overscroll-behavior: contain; }
.tf-col-vazia { display: flex; align-items: center; justify-content: center; min-height: 72px; font-size: 12px; color: var(--muted-2); border: 1px dashed var(--line); border-radius: 8px; }
.tf-card { -webkit-touch-callout: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line-soft); border-left: 3px solid var(--line); border-radius: 8px; cursor: grab; transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast); }
.tf-card:hover { border-color: var(--line); box-shadow: var(--ds-shadow-1); }
.tf-card:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.tf-card.aberta { border-left-color: var(--ds-accent); }
.tf-card.atrasada { border-left-color: var(--ds-err); }
.tf-card.arrastando { opacity: .45; }
.tf-card .cab { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.tf-card .tit { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tf-card .pe { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tf-card .pe .tf-pessoa .nm { display: none; }
.tf-card .pe .tf-chip-cli { max-width: 120px; }

/* ── placar ────────────────────────────────────────────────────────────── */
.tf-placar { border: 1px solid var(--line); border-radius: var(--ds-r, 10px); background: var(--panel); padding: 0 12px 8px; }
.tf-placar > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); min-height: 40px; display: flex; align-items: center; }
.tf-placar .tf-tabela thead th { position: static; }

/* ── toast ─────────────────────────────────────────────────────────────── */
.tf-toast.erro { background: var(--panel); color: var(--ink-err); border: 1px solid var(--red); max-width: min(92vw, 560px); text-align: center; }

/* ── com o detalhe aberto, a lista cede o que sussurra (tipo, nome do dono) ── */
.tf.com-detalhe .c-tipo { display: none; }
@media (max-width: 1500px) {
  .tf.com-detalhe .c-prio { display: none; }
  .tf.com-detalhe .c-dono { width: 44px; max-width: 44px; }
  .tf.com-detalhe .c-dono .nm { display: none; }
  .tf.com-detalhe .c-tit { max-width: 34ch; }
}

/* ── tablet (≤ 1100): colunas que sussurram somem, split mais apertado ─── */
@media (max-width: 1100px) {
  .tf.com-detalhe .tf-split { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
  .tf-tabela .c-tipo, .tf-tabela .c-prio { display: none; }
  .tf-tabela .c-tit { max-width: 34ch; }
  .tf-tabela .c-dono { width: 44px; max-width: 44px; }
  .tf-tabela .c-dono .nm { display: none; }
  .tf-cab { grid-template-columns: 1fr auto; }
  .tf-abas { grid-column: 1 / -1; justify-content: flex-start; order: 3; }
  .tf-tabela-rol { max-height: none; }
  .tf-detalhe { max-height: calc(100vh - 24px); }
}

/* ── celular (≤ 640): tabela vira cartão; detalhe em tela cheia ────────── */
@media (max-width: 640px) {
  .tf { padding: 10px 12px 24px; }
  .tf .so-movel { display: inline-flex; }
  .tf .nao-movel { display: none; }
  .tf-cab { grid-template-columns: 1fr; gap: 10px; }
  .tf-cab-r { justify-content: stretch; flex-wrap: wrap; }
  .tf-busca { flex: 1 1 140px; }
  .tf-busca input { width: 100%; }
  .tf-novo { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .tf-novo kbd { display: none; }
  .tf-chip, .tf-seg button { min-height: 36px; }
  .tf-filtros { flex-direction: column; align-items: stretch; }
  .tf-chips { contain: inline-size; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .tf-chips::-webkit-scrollbar { display: none; }
  .tf-ferr { justify-content: space-between; }
  .tf.com-detalhe .tf-principal, .tf.com-detalhe .tf-cab, .tf.com-detalhe .tf-filtros { display: none; }
  .tf.com-detalhe .tf-split, .tf.com-detalhe .tf-split.board { grid-template-columns: minmax(0, 1fr); }
  .tf-detalhe { position: static; max-height: none; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 24px; background: transparent; }
  .tf-det-topo .btn .rot { display: none; }
  .tf-props { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tf-tabela-rol { border: 0; background: none; overflow: visible; max-height: none; }
  .tf-tabela, .tf-tabela tbody { display: block; }
  .tf-tabela thead { display: none; }
  /* a linha vira cartão: [check] título … prazo / (quebra) status · dono · cliente · prio */
  .tf-tabela tbody tr.tf-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--ds-r, 10px); }
  .tf-tabela tbody tr.tf-linha.aberta { border-color: var(--ds-accent); }
  .tf-tabela tbody tr.tf-linha td { display: block; height: auto; padding: 0; border: 0; white-space: normal; background: none !important; box-shadow: none !important; width: auto; max-width: none; }
  .tf-tabela .c-chk { order: 0; flex: 0 0 28px; align-self: flex-start; padding-top: 3px; }
  .tf-tabela .c-chk input { width: 22px; height: 22px; }
  .tf-tabela .c-tit { order: 1; flex: 1 1 0; min-width: 0; }
  .tf-tabela .c-tit .tit { white-space: normal; }
  .tf-tabela .c-prazo { order: 2; flex: 0 0 auto; align-self: flex-start; text-align: right; }
  .tf-tabela .c-id { order: 3; flex: 0 0 100%; height: 0; overflow: hidden; margin: -6px 0 0; visibility: hidden; }
  .tf-tabela .c-st, .tf-tabela .c-dono, .tf-tabela .c-cli, .tf-tabela .c-prio { order: 4; flex: 0 1 auto; display: inline-flex !important; align-items: center; font-size: 12px; min-width: 0; }
  .tf-tabela .c-st { margin-left: 36px; }
  .tf-tabela .c-tipo { display: none !important; }
  .tf-tabela .c-prio .tf-prio > span { display: none; }
  .tf-tabela .c-dono .nm { display: inline; max-width: 14ch; }
  .tf-grupo td { display: block; position: static; border-radius: 6px; padding: 6px 10px; margin: 4px 0 8px; height: auto; }
  .tf-recuo { display: none; }
  .tf-linha.filha { margin-left: 16px; }
  .tf-kanban { gap: 8px; }
  .tf-col { flex-basis: 84vw; }
  .tf-col-corpo { max-height: none; }
  .tf-card { cursor: pointer; }
  .tf-card .pe .tf-pessoa .nm { display: inline; }
}

/* #411 — descrição/processo/imagens no form, upload no detalhe, filhas recolhíveis */
.tf-nova-mais { display: grid; gap: 6px; margin-top: 6px; }
.tf-imagens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-img-previa { position: relative; display: inline-block; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.tf-img-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-img-previa .link-btn { position: absolute; top: 0; right: 0; background: var(--bg, #111); line-height: 1; padding: 1px 5px; border-radius: 0 0 0 6px; }
.tf-upload { cursor: pointer; }
.tf-filhas { cursor: pointer; background: none; font: inherit; font-size: 10.5px; font-weight: 600; }
.tf-filhas:hover { color: var(--ink-accent); border-color: var(--ink-accent); }
.tf-filhas.recolhida { color: var(--ink-accent); }

@media (prefers-reduced-motion: reduce) {
  .tf-skel-linha i, .tf-toast { animation: none !important; }
  .tf *, .tf *::after { transition: none !important; }
}

/* #116 · visão Automáticas (desenho aprovado em 24/10) */
.auto116{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.auto116 .pergunta{font-size:16px;margin:0}
.auto116 .pergunta b{color:var(--ink-warn)}
.auto116 .faixa{border:1px dashed var(--ink-warn);color:var(--ink-warn);border-radius:8px;padding:8px 12px;font-size:12px}
.auto116 .grade{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.auto116 .bloco{background:var(--panel);border:1px solid var(--line);border-radius:var(--ds-r,10px);margin-bottom:16px}
.auto116 .bloco>header{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line)}
.auto116 h2{font-size:14px;margin:0}
.auto116 .sus{color:var(--muted);font-size:12px}
.auto116 .rot{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.auto116 table{width:100%;border-collapse:collapse}
.auto116 th{text-align:left;font-weight:500;padding:8px 16px}
.auto116 td{padding:10px 16px;border-top:1px solid var(--line-soft);height:52px;vertical-align:middle}
.auto116 .ds-badge{min-width:64px;justify-content:center}
.auto116 .tog{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.auto116 .tog i{width:28px;height:16px;border-radius:9px;background:var(--line);position:relative;display:inline-block}
.auto116 .tog i:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted)}
.auto116 .tog.on{color:var(--ink)} .auto116 .tog.on i{background:var(--ink-ok)} .auto116 .tog.on i:after{left:14px;background:var(--panel)}
.auto116 .item{border-top:1px solid var(--line-soft);padding:12px 16px}
.auto116 .item:first-of-type{border-top:0}
.auto116 .acoes{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.auto116 .m{display:none}
@media (max-width:820px){
  .auto116 .grade{grid-template-columns:1fr}
  .auto116 table{display:none}
  .auto116 .m{display:block}
  .auto116 .mcard{border-top:1px solid var(--line-soft);padding:12px 16px}
  .auto116 .dois{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
  .auto116 .dois>div{border:1px solid var(--line-soft);border-radius:6px;padding:8px}
  .auto116 .mcard .btn{width:100%;min-height:44px;justify-content:center}
  .auto116 .acoes .btn{min-height:44px}
}
.auto116 .bloco>header .filtros{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.auto116 tr.inativa td, .auto116 .mcard.inativa{opacity:.6}
.auto116 td.acao{text-align:right;white-space:nowrap}
.auto116 .tog input{position:absolute;opacity:0;width:1px;height:1px}
.auto116 .tog{position:relative;cursor:pointer}
.auto116 .tog input:checked + i{background:var(--ink-ok)}
.auto116 .tog input:checked + i:after{left:14px;background:var(--panel)}
.auto116 .tog input:focus-visible + i{outline:2px solid var(--ink-info);outline-offset:2px}
.auto116 .texto{margin:6px 0}
.auto116 .bloco-skel{height:120px;border-radius:var(--ds-r,10px);margin-bottom:16px}