/* Central de Tarefas (t54). Reusa tokens, .panel, .metricas, .gaveta e o shell
   de altura `body.tela-dados` que a t53 criou em overview.css. O que vive aqui
   é só o que é DESTA tela. */

/* Escopo e filtros: uma linha, e o resto guardado. Seis filtros abertos num
   cartão só ocupavam metade da janela, e a lista, que é o assunto, ficava
   espremida embaixo. */
.filtros-tarefas{padding:var(--s3) var(--s4);margin-block-end:var(--s3)}
.escopo-tarefas{display:flex;gap:2px;flex:0 0 auto}
.escopo-tarefas .selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.filtros-tarefas .filtros-linha{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:end}
.filtros-tarefas label{margin:0;flex:1 1 150px;min-inline-size:0;font-size:11px}
.filtros-tarefas input,.filtros-tarefas select{margin-top:3px;padding:8px 10px}
.filtros-tarefas .secondary{padding:9px 12px}
.filtros-tarefas .busca-campo{flex:2 1 220px}
.filtros-tarefas .topo-acoes{display:flex;gap:var(--s2);flex:0 0 auto}
.filtros-rodape{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;margin-block-start:var(--s2)}
.filtros-rodape .chips{margin:0}
.filtros-rodape .resultado-texto{font-size:12px;margin-inline-start:auto}
.filtro-projeto{flex:1 1 220px;min-inline-size:0;display:flex;flex-direction:column;gap:var(--s1)}
.filtro-rotulo{font-size:12px;color:#596459}
.filtro-projeto button{inline-size:100%;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtros-avancados{margin-block-start:var(--s3);padding-block-start:var(--s3);border-block-start:1px solid var(--line)}
.linha-opcao{display:flex!important;align-items:center;gap:var(--s2);flex:0 0 auto}
.linha-opcao input{inline-size:16px;block-size:16px;margin:0;accent-color:var(--accent)}

.tarefas-metricas{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.tarefas-metricas .metrica{cursor:pointer;padding:var(--s3) var(--s4)}
.tarefas-metricas .metrica-rotulo{font-size:11px}
.tarefas-metricas .metrica-valor{font-size:26px;margin:2px 0 0}
/* A t53 esconde os `small` dos indicadores abaixo de 900px de altura para
   ganhar espaco. Aqui a legenda e o que EXPLICA o zero de "Atrasadas",
   entao ela volta enquanto houver altura; abaixo de 820 fica no title. */
@media(min-height:821px){body.tela-dados .tarefas-metricas .metrica small{display:block}}
.tarefas-metricas .metrica-ativa{border-color:var(--accent);background:var(--accent-soft)}

.visoes{display:flex;gap:2px;align-items:end;flex:0 0 auto;margin-inline-start:auto}
.visoes .selected,.escopo-tarefas .selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

/* LISTA: uma linha por tarefa. Sem caixa de seleção: não existe ação em lote,
   e caixa que não faz nada convida a achar que marcou alguma coisa. */
.tabela-tarefas{inline-size:100%}
.tabela-tarefas td{padding:8px 10px;vertical-align:top}
.tabela-tarefas small{margin-top:1px}
.tabela-tarefas th{white-space:nowrap}
/* A soma das larguras precisa fechar 100% CONTANDO a coluna de ações: com 98%
   distribuídos, sobravam 21px para o botão, que transbordava a célula e ficava
   por baixo do conteúdo da coluna vizinha. Medido em 1366: 2% de 1072px. */
.celula-tarefa{inline-size:30%;min-inline-size:200px}
.celula-tarefa .link-forte{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.celula-projeto{inline-size:14%}
.celula-projeto small{margin-top:2px}
.celula-executor{inline-size:13%}
.celula-prioridade{inline-size:10%}
.celula-prazo{inline-size:12%}
.celula-situacao{inline-size:14%}
.acoes-celula{inline-size:7%}
.celula-prazo small{margin-top:2px}
.prazo-dia{font-weight:600}
.linha-atrasada .prazo-dia{color:#b64e38}
.marca-atraso{background:#fbe9e4;color:#b64e38;margin-inline-start:var(--s1)}
.marca-impedimento{background:#f4f1e6;color:#8a6d1f;border:0;border-radius:5px;padding:4px 8px;font-size:10px;margin-inline-start:var(--s1)}
.acoes-celula{white-space:nowrap;text-align:end}
.link-discreto{color:var(--ink);text-decoration:none}
.link-discreto:hover{text-decoration:underline}

/* QUADRO: colunas de 280 a 320 px, corpo rolável limitado, e paginação por
   coluna dentro do total daquela situação. */
/* Base ZERO outra vez: com `flex:1 1 auto` a base é o conteúdo, e o conteúdo
   de uma coluna com dez cartões tem 2.000px. Medido em 19/09: o Quadro
   esticava o documento para 2.850px numa janela de 768. */
.panel.tarefas-area{contain:paint}
.quadro-rolagem{flex:1 1 0;min-block-size:0;overflow-x:auto;overflow-y:hidden;display:flex}
.quadro-tarefas{display:flex;gap:var(--s3);align-items:stretch;min-block-size:0;block-size:100%;padding-block-end:var(--s2)}
.quadro-tarefas .board-column{flex:0 0 300px;inline-size:300px;display:flex;flex-direction:column;
 background:#fafbf8;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);
 /* `max-block-size:100%` sozinho não basta: a coluna precisa RECORTAR, senão os
    cartões que passam do corpo rolável continuam contando para a altura do
    documento, e a página inteira ganha 2.100px de rolagem vazia. */
 /* `clip`, e não `hidden`: caixa `hidden` continua sendo caixa de rolagem, e a
    sobra dos cartões atravessava a corrente inteira até a raiz. Medido em
    19/09 a 1920x1080: o conteúdo da página andava 600px de verdade, e passar
    esta linha para `clip` zerou. */
 block-size:100%;max-block-size:100%;overflow:clip}
/* ⚠️ Estes três nomes existem TAMBÉM no quadro de Projetos e entregas, que é
   outra tela. Sem o dono na frente, a regra daqui atravessava para lá: o corpo
   da coluna de Projetos ganhava `max-block-size:60vh` no celular e o cabeçalho
   virava flex, e nada disso era pedido por aquela tela. */
.quadro-tarefas .coluna-topo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-block-end:var(--s2)}
.quadro-tarefas .coluna-topo h3{margin:0;font-size:13px}
.quadro-tarefas .coluna-total{font-size:18px;font-weight:600;letter-spacing:-.5px}
.quadro-tarefas .coluna-corpo{flex:1 1 0;min-block-size:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s2)}
.coluna-paginacao{display:flex;flex-wrap:nowrap;gap:var(--s2);align-items:center;justify-content:center;margin-block-start:var(--s2);padding-block-start:var(--s2);border-block-start:1px solid var(--line);font-size:11px}
.coluna-paginacao button{padding:4px 10px;font-size:13px;line-height:1}
.tarefa-cartao-quadro{display:grid;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:var(--s2) var(--s3);font-size:12px;overflow-wrap:anywhere}
.tarefa-cartao-quadro strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarefa-cartao-quadro small{margin-top:0}
.resultado-texto .small{display:block;margin-top:2px}
.tarefa-cartao-quadro .task-open{border:0;background:none;padding:0;text-align:start;inline-size:100%}
.tarefa-cartao-quadro .task-open strong{overflow-wrap:anywhere}
.cartao-marcas{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;margin-block-start:var(--s2)}
.tarefa-cartao-quadro.arrastando{opacity:.45}
.board-column.destino-ativo{border-color:var(--accent);background:var(--accent-soft)}
.mover-para{margin:var(--s2) 0 0}
.mover-para select{margin-top:0;font-size:11px;padding:7px 8px}
.task-card-block{background:#f4f1e6;color:#8a6d1f;border-radius:5px;padding:8px 10px;font-size:11px;margin:var(--s2) 0 0}

/* GANTT: coluna fixa de tarefas, cabeçalho acompanhando, e a rolagem
   horizontal DENTRO da linha do tempo, nunca no documento. */
.gantt-aviso{margin-block-end:var(--s3)}
.gantt-controles{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-block-end:var(--s3)}
.gantt-controles .selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.gantt-grade{min-inline-size:0;overflow:hidden}
.gantt-colunas{display:flex;min-inline-size:0}
.gantt-nome{flex:0 0 240px;inline-size:240px;padding:8px 10px;border-block-end:1px solid var(--line);background:var(--surface);position:sticky;inset-inline-start:0;z-index:2}
.gantt-nome-topo{font-size:10px;color:#949b92;font-weight:500}
.gantt-rolagem{flex:1 1 auto;min-inline-size:0;overflow-x:auto}
.gantt-cabecalho{display:flex;position:sticky;inset-block-start:0;background:var(--surface);z-index:1}
.gantt-periodo{flex:0 0 auto;font-size:10px;color:#949b92;padding:8px 4px;border-inline-start:1px solid var(--line);white-space:nowrap}
.gantt-linha{display:flex;align-items:stretch}
.gantt-faixa{flex:0 0 auto;position:relative;border-block-end:1px solid var(--line);padding:10px 0;min-block-size:44px}
.gantt-barra{block-size:18px;border-radius:9px;background:var(--accent);opacity:.85}
.gantt-barra.cortada-antes{border-start-start-radius:0;border-end-start-radius:0;box-shadow:inset 3px 0 0 var(--accent-ink)}
.gantt-barra.cortada-depois{border-start-end-radius:0;border-end-end-radius:0;box-shadow:inset -3px 0 0 var(--accent-ink)}
.gantt-sem-barra{font-size:11px;padding-inline-start:10px}

/* PRÉVIA: gaveta sobreposta, fechada no início. Ela não comprime a tabela para
   caber ao lado: comprimir seria trocar a tela inteira por causa de um detalhe. */
.gaveta-tarefa{inline-size:min(94vw,520px)}
.gaveta-tarefa .corpo-tarefa{flex:1 1 auto;min-block-size:0;overflow-y:auto}
.abas-tarefa{display:flex;gap:var(--s1);flex-wrap:wrap;margin-block-end:var(--s3)}
.abas-tarefa button{padding:8px 11px;font-size:11px}
.abas-tarefa .selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.historico-tarefa li{padding:10px 0;border-block-end:1px solid var(--line)}
.historico-tarefa li:last-child{border:0}

/* A área de resultados precisa de base ZERO para crescer. Com `flex:1 1 auto`
   a base é o conteúdo, que aqui é a tabela inteira: o cálculo do flex vira uma
   conta de encolhimento e a área para no `min-block-size`. Medido em
   1366x768: 200px de área para 71px de espaço livre logo abaixo dela. */
/* A sobra dos cartões do Quadro chegava até a RAIZ e a página inteira rolava
   2.100px vazios, mesmo com toda a corrente recortando. `clip` no shell corta
   a propagação de uma vez. Medido em 19/09 a 1920x1080: rolava 600px, e com
   os cartões escondidos parava. */
/* ⚠️ SÓ no desktop. Abaixo de 901px a t53 devolve o fluxo natural
   (`body.tela-dados #content{display:block}`), e recortar aqui escondia a lista
   inteira atrás de uma caixa de 19px. Medido a 390x844 em 19/09/2026. */
@media(min-width:901px){
/* ⚠️ t87: o piso de 180px deixava a lista com 213px de janela e 5 linhas
   completas de 25, onde a meta são 6. A linha daqui tem 69px. Mesmo piso das
   outras regiões de resultado (`overview.css`), porque é o mesmo problema:
   a região onde o trabalho acontece não pode ser a que cede espaço. */
body.tela-dados #content>.tarefas-area{flex:1 1 0;min-block-size:min(640px,calc(100dvh - 210px));overflow:clip;
 /* ⚠️ A sobra dos cartões do Quadro chegava até a RAIZ e a página inteira
    rolava 600px DE VERDADE, com o conteúdo andando, mesmo com `overflow:hidden`
    e `overflow:clip` em toda a corrente acima. O que conteve foi `contain`, que
    isola layout e pintura desta caixa. Medido em 19/09/2026 a 1920x1080, uma
    hipótese por carregamento: sem `contain` 600px, com `contain` zero. */
 contain:layout paint}
body.tela-dados .tarefas-area .tabela-rolagem{flex:1 1 0}
}

/* Tela baixa (1366x768 e afins): o topo cede altura para a lista, que é o
   assunto da tela. Medido em 19/09/2026 a 1366x768: dos 768px da janela,
   210 são do sistema (cabeçalho 76, aviso de MFA 68, rodapé 58) e 90 são o
   respiro do #content mais a área reservada ao chat flutuante. Sobram 476, e
   o topo desta tela comia 366 deles, deixando 110 para as linhas. */
@media(max-height:820px){
 /* Na tela baixa o título sai: o caminho no cabeçalho do sistema já diz
    "Operação / Tarefas", e as ações mudaram de casa para a faixa de filtros. */
 body.tela-dados .pagina-topo{display:none}
 /* Os quatro indicadores viram uma FAIXA de uma linha: continuam clicáveis e
    continuam dizendo o mesmo número, ocupando 40px em vez de 62. */
 body.tela-dados .tarefas-metricas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}
 body.tela-dados .tarefas-metricas .metrica{flex:1 1 120px;display:flex;align-items:baseline;gap:var(--s2);padding:6px var(--s3)}
 body.tela-dados .tarefas-metricas .metrica-rotulo{font-size:11px}
 body.tela-dados .tarefas-metricas .metrica-valor{font-size:18px;margin:0}
 body.tela-dados .tarefas-metricas .metrica small{display:none}
 body.tela-dados .filtros-tarefas{padding:var(--s2) var(--s3);margin-block-end:var(--s2)}
 body.tela-dados .filtros-tarefas label{font-size:10px}
 body.tela-dados .filtros-rodape{margin-block-start:4px}
 /* Título de uma linha na tela baixa: duas linhas por tarefa dobram a altura
    da linha, e altura de linha é quantas tarefas cabem na tela. */
 body.tela-dados .celula-tarefa .link-forte{-webkit-line-clamp:1}
 body.tela-dados .tabela-tarefas td{padding:6px 10px}
 body.tela-dados .metricas-alternar{margin-block-start:calc(-1 * var(--s1));margin-block-end:var(--s1)}
 /* A barra de paginação quebrava em duas linhas e custava 84px DENTRO da área
    de resultados, que é justamente o espaço das linhas. */
 body.tela-dados .tarefas-area .paginacao{padding:var(--s2) var(--s3);flex-wrap:nowrap;gap:var(--s2)}
 body.tela-dados .tarefas-area .paginacao button{padding:6px 9px;font-size:11px}
 body.tela-dados .tarefas-area .paginacao .por-pagina{white-space:nowrap;font-size:11px}
 body.tela-dados .tarefas-area .paginacao .por-pagina select{margin-top:0;padding:4px 6px;inline-size:auto}
 body.tela-dados .tarefas-area .paginacao>.muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Indicadores recolhidos: a tela devolve a faixa inteira para as linhas. O
   atributo de esconder é resolvido pela regra global de style.css, nunca por
   remendo de seletor aqui: a guarda de shell-ui existe por causa disso. */
.metricas-alternar{display:flex;justify-content:flex-end;margin-block-end:var(--s2);margin-block-start:calc(-1 * var(--s2))}
.metricas-alternar .text-button{font-size:11px;padding:0}
@media(max-width:900px){
 /* No celular o topo chegava a 1.100px e o primeiro botão da primeira tarefa
    ficava FORA da tela, com 844px de janela. Medido em 19/09 a 390x844. Os
    indicadores viram faixa de duas colunas, e os filtros pareiam. */
 .tarefas-metricas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}
 .tarefas-metricas .metrica{flex:1 1 44%;display:flex;align-items:baseline;gap:var(--s2);padding:6px var(--s3)}
 .tarefas-metricas .metrica-valor{font-size:18px;margin:0}
 .tarefas-metricas .metrica small{display:none}
 /* O título sai no celular também: o caminho do cabeçalho já diz onde se está,
    e 55px são meia tarefa na tela. */
 body.tela-dados .pagina-topo{display:none}
 .filtros-tarefas{padding:var(--s3)}
 .filtros-tarefas label,.filtro-projeto{flex:1 1 44%}
 .filtros-tarefas .busca-campo{flex:1 1 100%}
 .filtros-tarefas .topo-acoes{flex:1 1 100%}
 .filtros-tarefas .topo-acoes button{flex:1}
 /* Escopo e visões dividem UMA linha, em vez de uma cada. */
 .escopo-tarefas,.visoes{flex:1 1 46%;margin-inline-start:0}
 .escopo-tarefas button,.visoes button{flex:1;padding:8px 6px}
 .visoes .resultado-texto{margin-inline-start:0;inline-size:100%}
 /* No celular o quadro é uma FILA que rola por dentro. Sem estas três linhas
    a fila empurrava a página inteira para 747px de largura numa tela de 390. */
 .tarefas-area,.panel.tarefas-area{min-inline-size:0;max-inline-size:100%}
 .quadro-rolagem{inline-size:100%;max-inline-size:100%;min-inline-size:0;overflow-x:auto;overflow-y:visible;display:block}
 .quadro-tarefas{inline-size:max-content}
 .quadro-tarefas .board-column{flex:0 0 86vw;inline-size:86vw;block-size:auto;max-block-size:none;overflow:visible}
 .quadro-tarefas .coluna-corpo{overflow:visible;max-block-size:60vh;overflow-y:auto}
 .gantt-nome{flex-basis:150px;inline-size:150px}
 .gaveta-tarefa{inline-size:100%;inset-inline-start:0}
 .tarefa-cartao{padding:var(--s3)}
 .filtros-tarefas .filtros-linha{gap:var(--s2)}
 .filtros-tarefas label,.filtro-projeto,.filtros-tarefas .busca-campo{flex:1 1 100%}
}
@media(max-width:560px){.tarefas-metricas{grid-template-columns:1fr}}