/* Carga da equipe (t56). Só o que é desta tela: os tokens, .panel, .metricas,
   .gaveta, a tabela e o shell de altura `body.tela-dados` vêm de style.css,
   overview.css e tarefas.css. */

.carga-topo-direita{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.carga-metricas .metrica{position:relative}
.carga-nota-pausados{display:block;margin-block-start:2px;font-size:11px;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}

/* Aviso de cobertura. Faixa, não painel: ela avisa que a soma abaixo é
   parcial, e some do caminho quando não há etapa sem detalhamento. */
.carga-cobertura{border-left:4px solid var(--accent);background:var(--accent-soft);margin-block-end:var(--s4);
 padding:var(--s3) var(--s4)}
.carga-cobertura-texto{min-inline-size:0}
.carga-cobertura p{margin:0;font-size:13px;line-height:1.35;max-inline-size:96ch}
.carga-cobertura p+p{margin-block-start:2px;font-size:12px}
.carga-cobertura-topo{display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.carga-cobertura-acoes{display:flex;gap:var(--s2);align-items:center;flex:0 0 auto}

.carga-area-topo{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
 padding:var(--s3) var(--s4);border-block-end:1px solid var(--line)}
.carga-area-topo h2{font-size:15px;margin:0;white-space:nowrap}
.carga-area-topo>.muted{white-space:nowrap}
.carga-acoes{margin-inline-start:var(--s2);display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.carga-atualizado{white-space:nowrap;font-size:11px}
/* ⚠️ A folha base cobra do TIPO: `label{margin:15px 0 8px}`. Numa faixa de uma
   linha só, esses 23px viram altura que some da lista, e a medição mostrou o
   cabeçalho com 90px para caber um texto de 17px. */
.carga-ordenar{margin-inline-start:auto;margin-block:0;display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted)}
.carga-area .paginacao .por-pagina{margin-block:0}
.carga-area-topo .carga-ordenar select,.carga-area .paginacao .por-pagina select{margin:0}
.carga-ordenar select{inline-size:auto}

.carga-lista{display:flex;flex-direction:column}
.carga-linha{border-block-end:1px solid var(--line)}
.carga-linha-topo{inline-size:100%;display:grid;
 grid-template-columns:40px minmax(180px,1.6fr) repeat(4,minmax(90px,0.7fr)) 24px;
 gap:var(--s3);align-items:center;text-align:left;
 padding:var(--s3) var(--s4);background:none;border:0;cursor:pointer;color:inherit;font:inherit}
.carga-linha-topo:hover{background:var(--paper)}
.carga-linha-topo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.carga-avatar{inline-size:36px;block-size:36px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
 display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
/* `align-items:flex-start` impede o selo de esticar pela coluna inteira: sem
   isso ele virava uma faixa laranja de 350px e a linha crescia 24px. */
.carga-identidade{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-inline-size:0}
.carga-identidade .badge{flex:0 0 auto}
.carga-nome{font-weight:600}
.carga-identidade small{white-space:normal}
.carga-coluna{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.carga-coluna strong{font-size:16px;font-variant-numeric:tabular-nums}
.carga-coluna small{font-size:11px;line-height:1.25}
.carga-seta{justify-self:end;color:var(--muted)}

/* A fila sem responsável não é uma pessoa: é trabalho que ninguém pegou. Ela
   fica marcada e no topo porque é o único grupo que depende de uma decisão. */
.carga-linha-fila{background:var(--accent-soft);border-left:4px solid var(--accent)}
.carga-avatar-fila{background:var(--surface);border-color:var(--accent);color:var(--accent-ink)}
.carga-linha-legado{background:#fbfaf7}
.badge.carga-legado{background:#fdf2e2;color:var(--accent-ink);border:1px solid #f0d3a8}
.badge.carga-sem-conta{background:var(--paper);color:var(--muted);border:1px solid var(--line)}

.carga-detalhe{padding:0 var(--s4) var(--s3) calc(var(--s4) + 40px + var(--s3))}
.carga-previa{list-style:none;margin:0 0 var(--s2);padding:0;display:flex;flex-direction:column}
.carga-previa-item{display:grid;grid-template-columns:minmax(160px,1.4fr) minmax(140px,1fr) minmax(90px,auto) auto;
 gap:var(--s3);align-items:center;padding:var(--s2) 0;border-block-start:1px solid var(--line)}
.carga-previa-titulo{background:none;border:0;padding:0;text-align:left;font:inherit;color:var(--ink);
 text-decoration:underline;text-decoration-color:var(--line);cursor:pointer}
.carga-previa-titulo:hover{text-decoration-color:var(--accent)}
.carga-previa-horas{font-variant-numeric:tabular-nums;text-align:right}
.carga-previa-acao{justify-self:end}

.carga-marcar{inline-size:36px;text-align:center}
.carga-marcar-cartao{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted)}
tr.carga-marcada{background:var(--accent-soft)}
.carga-cartao.carga-marcada{background:var(--accent-soft)}

.carga-lote{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
 padding:var(--s2) var(--s4);background:var(--accent-soft);border-block-end:1px solid var(--line)}
.carga-lote select{inline-size:auto}

.gaveta-carga .carga-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:0}
.carga-dado dt{font-size:11px;color:var(--muted);margin:0 0 2px}
.carga-dado dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.carga-aviso{background:var(--accent-soft);border:1px solid #f0d3a8;border-radius:var(--radius);
 padding:var(--s3);font-size:12px;margin:var(--s3) 0}
.carga-form{display:flex;flex-direction:column;gap:var(--s3)}
.carga-form textarea{resize:vertical}
.carga-nota{font-size:11px;margin:0}
.gaveta-carga .drawer-acoes{display:flex;flex-direction:column;gap:var(--s2);margin-block-start:var(--s4)}
.gaveta-carga .drawer-acoes button{inline-size:100%}

/* A região de resultados precisa de base ZERO. Com `flex:1 1 auto` a base é o
   CONTEÚDO, a lista inteira vira a base e a área encolhe em vez de crescer:
   foi assim que a t54 acabou com 71px livres embaixo de uma caixa presa. */
/* ⚠️ SÓ no desktop. Abaixo de 901px a t53 devolve o fluxo natural
   (`body.tela-dados #content{display:block}`), e recortar aqui esconde a lista
   inteira atrás de uma caixa de 0px. Medido a 390x844 em 19/09/2026. */
@media (min-width:901px){
body.tela-dados #content>.carga-area{flex:1 1 0;min-block-size:150px;overflow:clip;contain:layout paint}
body.tela-dados .carga-area .tabela-rolagem{flex:1 1 0;overflow:auto}
}
/* Altura útil em 1366x768 é aritmética, não descuido: cada bloco fixo do topo
   sai das linhas que a pessoa consegue ver. Aqui o topo encolhe, mas a LEGENDA
   dos indicadores fica: é ela que diz "total incompleto", e esconder isso
   deixaria "0 h" sozinho na tela, parecendo que não há trabalho. */
/* O shell de altura empilha com `gap`; margem própria de bloco vira altura
   invisível somada por cima dela, e foi ela que comeu 126px da lista. */
body.tela-dados #content>.carga-metricas,body.tela-dados #content>.carga-cobertura,
body.tela-dados #content>.filtros-carga,body.tela-dados #content>.metricas-alternar{margin-block:0}
body.tela-dados .carga-cobertura{padding:var(--s2) var(--s3)}
body.tela-dados .carga-cobertura p{font-size:12px}
body.tela-dados .carga-cobertura p+p{font-size:11px}
body.tela-dados .carga-metricas .metrica{padding:var(--s2) var(--s3)}
body.tela-dados .carga-metricas .metrica-valor{font-size:20px;margin:0}
/* Três linhas, não duas: com duas, "Total incompleto" era exatamente a frase
   cortada, e ela é a razão de o número não ser um total. */
body.tela-dados .carga-metricas .metrica>small{font-size:11px;line-height:1.3;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.tela-dados .filtros-carga{padding:var(--s2) var(--s3)}
body.tela-dados .filtros-carga label{font-size:10px;margin-block:0}
body.tela-dados .filtros-carga select,body.tela-dados .filtros-carga input{margin-block-start:2px}
body.tela-dados .carga-area-topo{padding:var(--s2) var(--s3)}
body.tela-dados .carga-linha-topo{padding:var(--s2) var(--s3)}
body.tela-dados .carga-area-topo h2{font-size:13px}
body.tela-dados .carga-area .paginacao{padding:var(--s2) var(--s3);flex-wrap:nowrap;gap:var(--s2)}
body.tela-dados .carga-area .paginacao button{padding:6px 9px;font-size:11px}
body.tela-dados .carga-area .paginacao .por-pagina{white-space:nowrap;font-size:11px}
/* 1366x768 e 1440x900 não têm altura para título, indicadores, aviso, filtros e
   lista ao mesmo tempo. O que sai é o TÍTULO, que a barra lateral já diz; o que
   fica é o dado. As ações moraram no título até esta medição. */
@media (max-height:900px){body.tela-dados .pagina-topo{display:none}}
body.tela-dados .carga-area .carga-area-topo{flex:0 0 auto}

@media (max-width:1280px){
 .carga-linha-topo{grid-template-columns:36px minmax(150px,1.4fr) repeat(4,minmax(78px,0.7fr)) 20px;gap:var(--s2)}
 .carga-coluna strong{font-size:15px}
}

/* 900px é onde a tabela vira cartão no resto do sistema, e a linha de
   responsável vira bloco: seis colunas em 390px viram rolagem lateral sem fim
   e o botão de ação sai da tela. */
@media (max-width:900px){
 /* No celular a lista é o assunto: os indicadores viram faixa de duas
    colunas, os filtros pareiam, e o título sai porque o caminho do cabeçalho
    do sistema já diz onde se está. */
 .carga-metricas{display:flex;flex-wrap:wrap;gap:var(--s2)}
 .carga-metricas .metrica{flex:1 1 44%;padding:var(--s2) var(--s3)}
 .carga-metricas .metrica-valor{font-size:18px;margin:0}
 body.tela-dados .pagina-topo{display:none}
 .filtros-carga label{flex:1 1 44%}
 .filtros-carga .busca-campo{flex:1 1 100%}
 .filtros-carga .topo-acoes{flex:1 1 100%}
 .filtros-carga .topo-acoes button{flex:1}
 .carga-cobertura-topo{flex-direction:column}
 .carga-cobertura-acoes{inline-size:100%;flex-wrap:wrap}
 .carga-cobertura-acoes button:not(.icone-botao){flex:1 1 44%}
 .carga-area-topo{padding:var(--s3)}
 .carga-ordenar{margin-inline-start:0;inline-size:100%}
 .carga-ordenar select{inline-size:100%}
 .carga-detalhe{padding:0 var(--s3) var(--s3)}
 .carga-previa-item{grid-template-columns:1fr;gap:4px}
 .carga-previa-horas{text-align:left}
 .carga-previa-acao{justify-self:stretch}
 .gaveta-carga{inline-size:100%;inset-inline-start:0}
 .gaveta-carga .carga-dados{grid-template-columns:1fr}
 .carga-lote{padding:var(--s2) var(--s3)}
 .carga-lote select,.carga-lote button{inline-size:100%}
}

/* A linha de números precisa caber empilhada, não espremida: valor de hora com
   quatro dígitos e "subtarefas abertas" na mesma faixa estouravam em 360px.
   Aqui a linha deixa de ser grade e vira fluxo: nome em cima, números embaixo. */
@media (max-width:900px){
 .carga-linha-topo{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:var(--s2);padding:var(--s3)}
 .carga-avatar{flex:0 0 auto}
 .carga-identidade{flex:1 1 60%}
 .carga-seta{flex:0 0 auto;margin-inline-start:auto}
 .carga-coluna{flex:1 1 44%;flex-direction:row;align-items:baseline;gap:var(--s2)}
 .carga-coluna strong{font-size:14px}
}

@media (max-width:560px){
 .carga-coluna{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
 .carga-linha-topo,.carga-previa-titulo{transition:none}
}