/* Planejamento semanal (t58). Só o desta tela: tokens, .panel, .metricas,
   .paginacao, o vocabulário do arraste (.cartao-fantasma, .destino-ativo) e o
   shell de altura `body.tela-dados` vêm de style.css, overview.css e
   tarefas.css. */

.pl-topo{align-items:flex-start;gap:var(--s4)}

.pl-barra-semana{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-block-end:0}
.pl-navegacao{display:flex;align-items:center;gap:var(--s2)}
.pl-seta{min-inline-size:34px;padding:6px 10px;font-size:15px;line-height:1}
.pl-semana-rotulo{font-weight:600;white-space:nowrap;min-inline-size:14ch;text-align:center}
.pl-filtro{margin-block:0;font-size:11px;color:var(--muted)}
.pl-filtro select{margin-block-start:2px}
.pl-barra-semana .primary{margin-inline-start:auto}

.pl-metricas .metrica{position:relative;padding-block-end:var(--s4)}
.pl-barra{display:block;block-size:4px;border-radius:2px;background:var(--line);margin-block-start:var(--s2)}
.pl-barra i{display:block;block-size:100%;border-radius:2px;background:var(--accent)}
.pl-barra-vazia{background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.pl-barra-reservado i{background:var(--accent)}
.pl-barra-livre i{background:#4c8c62}
.pl-barra-conflito i{background:#b3382f}

/* Três colunas, como a referência aprovada: pendentes, grade e painel. Cada
   uma rola por dentro, e a página externa não cresce com o volume. */
.pl-workspace{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:var(--s4);align-items:stretch}
.pl-workspace>.panel{display:flex;flex-direction:column;min-inline-size:0;min-block-size:0;overflow:hidden}
.pl-coluna-topo{display:flex;align-items:center;gap:var(--s2);justify-content:space-between;flex:0 0 auto}
.pl-coluna-topo h2{font-size:15px;margin:0}
.pl-coluna-esquerda .busca-campo{inline-size:100%;margin-block:var(--s2) 0}
/* ⚠️ t87: esta lista media 101px de janela em 1366x768, e cabia menos de um
   cartão inteiro: título, busca e paginação comiam o painel, e o `flex:1 1 0`
   recebia a sobra de uma coluna que não tem altura própria. A meta da
   especificação é 3 cartões completos nessa tela. O piso vale só onde há
   espaço: abaixo de 900px de largura a lista volta ao fluxo do documento. */
.pl-pendentes-rolagem{flex:1 1 0;min-block-size:min(300px,calc(100dvh - 300px));overflow-y:auto;margin-block-start:var(--s2);
 /* A sobra dos cartões chegava à raiz e a página inteira andava. */
 contain:layout paint}
.pl-pendentes-lista{display:flex;flex-direction:column;gap:var(--s2)}

.pl-pendente{position:relative;display:flex;flex-direction:column;gap:2px;
 padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
 cursor:grab;text-align:left}
.pl-pendente:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pl-pendente[data-arrastavel="nao"]{cursor:default;background:var(--paper)}
.pl-pendente-titulo{font-weight:600;font-size:13px}
.pl-pendente-linha{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.pl-planejar{align-self:flex-start;font-size:11px}
.badge.pl-urgente{position:absolute;inset-block-start:var(--s2);inset-inline-end:var(--s2);
 background:#fdeceb;color:#96271f;border:1px solid #f2c3bf}
.badge.pl-alta{position:absolute;inset-block-start:var(--s2);inset-inline-end:var(--s2);
 background:var(--accent-soft);color:var(--accent-ink);border:1px solid #f0d3a8}
.pl-aviso{background:var(--accent-soft);border:1px solid #f0d3a8;border-radius:8px;
 padding:6px var(--s2);font-size:11px;margin:var(--s2) 0}
.pl-aviso-suave{background:var(--paper);border-color:var(--line);color:var(--muted)}

.pl-grade-area{flex:1 1 0;min-block-size:0;overflow:auto;margin-block-start:var(--s2);contain:layout paint}
.pl-grade{display:grid;grid-template-columns:200px repeat(var(--pl-dias),minmax(132px,1fr));min-inline-size:100%}
.pl-cabecalho,.pl-linha{display:contents}
.pl-canto,.pl-dia-topo{position:sticky;inset-block-start:0;z-index:2;background:var(--surface);
 padding:var(--s2) var(--s3);border-block-end:1px solid var(--line);font-size:12px}
.pl-dia-topo{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.pl-dia-topo.pl-hoje{box-shadow:inset 0 -2px 0 var(--accent)}
.pl-feriado{color:var(--accent-ink);font-size:10px}
.pl-pessoa{padding:var(--s3);border-block-end:1px solid var(--line);display:flex;gap:var(--s2);align-items:flex-start;
 position:sticky;inset-inline-start:0;background:var(--surface);z-index:1}
.pl-pessoa-dados{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.pl-pessoa-nome{font-weight:600;font-size:13px;text-align:left}
.pl-avatar{inline-size:30px;block-size:30px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
 display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:0 0 auto}
.pl-ocupacao{display:block;block-size:4px;border-radius:2px;background:var(--line);margin-block:2px}
.pl-ocupacao i{display:block;block-size:100%;border-radius:2px}
.pl-ocupacao-ok{background:#4c8c62}
.pl-ocupacao-alta{background:#b3382f}

.pl-celula{border-block-end:1px solid var(--line);border-inline-start:1px solid var(--line);
 padding:6px;display:flex;flex-direction:column;gap:6px;min-block-size:84px}
.pl-celula-fechada{background:var(--paper)}
.pl-fechado{font-size:10px}
.pl-reserva{border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:8px;
 padding:6px var(--s2);background:var(--surface);display:flex;flex-direction:column;gap:2px;
 cursor:grab;text-align:left;font-size:12px}
.pl-reserva:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pl-reserva-titulo{font-weight:600;line-height:1.25;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Cor com semântica, não cor para diferenciar linha: normal, atenção,
   bloqueado e condicionado. Nada de paleta aleatória por pessoa. */
.pl-reserva-normal{border-inline-start-color:#4a7fb5}
.pl-reserva-condicional{border-inline-start-color:var(--accent)}
.pl-reserva-conferir{border-inline-start-color:#b3382f;background:#fdf6f5}
.pl-reserva-pausado{border-inline-start-color:var(--muted);background:var(--paper);color:var(--muted)}
.pl-reserva-marca{font-size:10px;color:var(--accent-ink)}
/* As três regras de destino do arraste, com o seletor desta tela: o CSS do
   quadro está escopado em `.quadro-area` e não alcança a grade. */
.pl-grade-area .pl-celula.destino-ativo{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-3px}
.pl-grade-area .pl-celula.destino-esperando{background:var(--paper);outline:2px dashed var(--line);outline-offset:-3px}
.pl-grade-area .pl-celula.destino-recusado{background:#fdf6f5;outline:2px dashed #b3382f;outline-offset:-3px}

.pl-coluna-direita{gap:var(--s3)}

/* Visão do celular (especificação t58, "Responsividade"): pessoa selecionada
   e lista de dias. Fora do celular ela não aparece; a grade é que manda. */
.pl-movel{display:none}
.pl-movel-resumo{display:flex;flex-direction:column;gap:2px}
.pl-movel-dias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.pl-movel-dia{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2);
 display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.pl-movel-dia.pl-hoje{border-inline-start:3px solid var(--accent)}
.pl-movel-dia-topo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);font-size:13px}
.pl-movel .pl-reserva{cursor:pointer}
.pl-detalhe-titulo{font-size:15px;margin:var(--s2) 0}
.pl-vazio-detalhe{padding:var(--s4) 0}
.pl-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:0}
.pl-dado dt{font-size:11px;color:var(--muted);margin:0 0 2px}
.pl-dado dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.pl-nota{font-size:11px;margin:var(--s3) 0 0}
.pl-detalhe-acoes{display:flex;flex-direction:column;gap:var(--s2);margin-block-start:var(--s3)}
.pl-detalhe-acoes button{inline-size:100%}
.pl-bloco{border-block-start:1px solid var(--line);padding-block-start:var(--s3);margin-block-start:var(--s3)}
.pl-bloco h3{font-size:13px;margin:0 0 var(--s2);display:flex;align-items:center;gap:var(--s2)}
.pl-alertas,.pl-recentes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.pl-alerta{display:flex;flex-direction:column;gap:2px;font-size:12px;
 border-inline-start:3px solid var(--accent);padding-inline-start:var(--s2)}
.pl-alerta-sobrecarga{border-inline-start-color:#b3382f}
.pl-alerta-dia-nao-util,.pl-alerta-projeto-pausado{border-inline-start-color:var(--muted)}
.pl-recentes li{display:flex;flex-direction:column;gap:1px;font-size:12px}
.pl-form{display:flex;flex-direction:column;gap:var(--s2)}
.pl-form h3{font-size:14px;margin:0}
.pl-form textarea{resize:vertical}
.pl-form-acoes{display:flex;gap:var(--s2);margin-block-start:var(--s2)}
.pl-form-acoes button{flex:1}

.pl-abas{margin-block-start:var(--s4)}
.pl-abas-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-block-end:var(--s2)}
.pl-abas-topo h3{font-size:14px;margin:0}
.pl-abas-corpo{margin-block-start:var(--s3)}
/* ⚠️ A tabela das abas tem `white-space:nowrap` e chega a 1.063px. O
   `.tabela-rolagem` do overview.css não estava recortando aqui, e o excesso
   subia até a raiz: a 390px a PÁGINA andava de lado. Medido em 19/09/2026. */
.pl-abas-corpo .tabela-rolagem{overflow-x:auto;max-inline-size:100%;contain:layout paint}
.pl-tabela td,.pl-tabela th{white-space:nowrap}
.badge.pl-badge-ok{background:#eaf3ed;color:#2f5f42;border:1px solid #cfe3d6}
.badge.pl-badge-alerta{background:#fdeceb;color:#96271f;border:1px solid #f2c3bf}

/* Esta tela NÃO usa o shell de altura fixa `body.tela-dados`: ela tem uma
   seção de abas embaixo, que precisa ser alcançável rolando a página. O que
   não pode é a página crescer com o VOLUME, e é por isso que as três colunas
   do workspace têm teto próprio e rolam por dentro. A conta do teto: a janela
   menos o cabeçalho do sistema, a faixa da semana, os indicadores e o respiro.
   Medido a 1440x900 em 19/09/2026. */
@media (min-width:1101px){
 .pl-workspace>.panel{max-block-size:calc(100dvh - 330px);min-block-size:340px}
}

/* Abaixo de 1101px a grade inteira não cabe: a tela vira fluxo, a coluna da
   esquerda vira uma faixa e a grade rola de lado por dentro. O arraste já se
   desliga sozinho em ponteiro grosso, e o botão "Planejar…" é o caminho. */
@media (max-width:1100px){
 /* ⚠️ O lançador do chat flutuante é fixo no canto inferior direito, com
    z-index 60, e cobria o botão de gravar do formulário de planejamento a
    390px. Transbordo não pega isso: só `elementFromPoint` pega. A folga no
    fim da página garante que qualquer controle possa ser rolado acima dele. */
 .pl-abas{margin-block-end:96px}
 .pl-workspace{grid-template-columns:1fr;gap:var(--s3)}
 .pl-workspace>.panel{overflow:visible}
 .pl-pendentes-rolagem{max-block-size:340px}
 /* ⚠️ `flex:1 1 0` só funciona com a coluna de altura fixa do desktop. Aqui o
    painel tem altura automática, a base zero vence e a área da grade media
    0px de altura a 1024 e a 390: grade (e visão do celular) existiam no HTML
    e não apareciam. Medido em navegador em 23/09/2026. */
 .pl-grade-area{flex:0 0 auto}
 /* ⚠️ A grade CONTINUA contida, inclusive no celular: ela é um rolador
    horizontal, e as células de cabeçalho são `position:sticky`. Sem
    `contain:layout paint` elas escapam do recorte e a RAIZ passa a ter
    964px de largura rolável numa janela de 390. Medido a 390x844 em
    19/09/2026: `documentElement.scrollWidth` 964 com `body.scrollWidth` 390. */
 .pl-grade{grid-template-columns:150px repeat(var(--pl-dias),minmax(120px,1fr))}
 .pl-barra-semana .primary{margin-inline-start:0;inline-size:100%}
 .pl-filtro{flex:1 1 44%}
 .pl-filtro select{inline-size:100%}
}

@media (max-width:760px){
 /* Aqui sim a lista de pendentes volta ao fluxo natural: sem teto de altura,
    recortá-la esconderia os cartões, que foi o defeito da t54 a 390px. */
 .pl-pendentes-rolagem{max-block-size:none;overflow:visible;contain:none}
 /* ⚠️ COM DONO. Sem o `.pl-topo` esta regra é GLOBAL e apaga o cabeçalho de
    QUALQUER tela que use `.pagina-topo` abaixo de 760px. Foi assim que o botão
    "＋ Nova oportunidade" da t62 apareceu em 390px com largura e altura zero:
    existia no HTML, e nem o ponteiro chegava nele. As regras equivalentes de
    carga.css e tarefas.css já têm dono (`body.tela-dados`); esta não tinha. */
 .pl-topo{display:none}
 .pl-metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
 .pl-navegacao{inline-size:100%}
 .pl-semana-rotulo{flex:1 1 auto}
 /* A 390px a grade de sete dias media 916px dentro de um rolador lateral: a
    especificação pede pessoa selecionada e lista de dias, sem comprimir nem
    rolar de lado (parecer do Codex, 23/09, achado 11). */
 .pl-grade{display:none}
 .pl-movel{display:flex;flex-direction:column;gap:var(--s3)}
 .pl-movel-filtro select{inline-size:100%}
 .pl-dados{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
 .pl-reserva,.pl-pendente{transition:none}
}