/**
 * Planejamento de Colaboradores (equipe.css) — v4.5.2
 *
 * Responsabilidades:
 * - filtros, linha do tempo (Gantt/matriz), visões Disponibilidade e Capacidade
 * - assistente "Planejar nova obra" (etapas, candidatos, cobertura, prévia)
 *
 * Dependências:
 * - css/variables.css (tokens), css/components.css (.card/.tag/.btn/.form-grid)
 *
 * Não modificar:
 * - nenhum seletor de outro arquivo é redefinido aqui; todas as classes deste
 *   arquivo têm o prefixo .cp-* ou .crewplan-* e só existem neste módulo.
 *
 * Desktop: matriz Gantt. Celular (<=860px): cards / timeline vertical.
 */

/* ===== Filtros ===== */
.crewplan-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end;padding:14px 16px;border:1px solid var(--border);background:var(--surface2);margin-bottom:14px}
/* 1fr = minmax(auto,1fr) e nao encolhe: o <select> com o nome longo de uma
   funcao ("ESPECIALISTA EM MANUTENCAO ELETRICA") empurra a coluna e estoura
   a largura no celular. minmax(0,1fr) + min-width:0 no filho e a correcao. */
.crewplan-filters>div{min-width:0}
.crewplan-filters select,.crewplan-filters input{min-width:0;max-width:100%}
.crewplan-filters label{margin-bottom:4px}
.crewplan-filter-actions{display:flex;align-items:end}
.crewplan-subbar{align-items:center}
.crewplan-period{min-width:180px;text-align:center;font-size:.88rem}
.crewplan-span .tab{padding:6px 11px}

/* ===== Linha do tempo (Gantt/matriz) ===== */
.cp-gantt{padding:14px 16px}
.cp-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:12px;font-size:.76rem;color:var(--text2)}
.cp-legend span{display:inline-flex;align-items:center;gap:6px}
.cp-legend small{color:var(--text3)}
.cp-chip{width:14px;height:10px;display:inline-block;border:1px solid var(--border)}
.cp-chip.cp-free{background:var(--bg)}
.cp-chip.cp-busy{background:var(--indigo-soft);border-color:var(--indigo)}
.cp-chip.cp-partial{background:var(--amber-soft);border-color:var(--amber)}
.cp-chip.cp-conflict{background:var(--red-soft);border-color:var(--red)}
.cp-chip.cp-off{background:var(--color-status-nontargeted-bg)}

.cp-grid-scroll{overflow-x:auto;max-height:62vh;overflow-y:auto}
.cp-grid{min-width:640px}
.cp-row{display:grid;grid-template-columns:250px minmax(0,1fr);border-bottom:1px solid var(--border)}
.cp-row:last-child{border-bottom:0}
.cp-head{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--border)}
.cp-name{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:9px 12px 9px 0;border-right:1px solid var(--border);min-width:0}
.cp-name b{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-name-sub{display:flex;align-items:center;gap:7px;min-width:0}
.cp-name small{font-size:.72rem;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cp-name .tag{flex:0 0 auto;font-size:.68rem;padding:2px 7px}
.cp-track{display:grid;gap:2px;padding:5px 0 5px 6px;min-width:0}
.cp-col-head{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 0}
.cp-col-head b{font-size:.76rem;font-weight:700}
.cp-col-head small{font-size:.66rem;color:var(--text3);text-transform:uppercase;letter-spacing:.02em}

.cp-cell{display:flex;align-items:center;justify-content:center;height:30px;padding:0 5px;border:1px solid var(--border);font-size:.7rem;font-weight:600;overflow:hidden}
.cp-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-cell.cp-free{background:var(--bg);color:var(--text3);border-style:dashed}
.cp-cell.cp-off{background:var(--color-status-nontargeted-bg);color:var(--color-status-nontargeted-text)}
/* v4.5.1 — a cor da célula deixou de vir da obra (era `--cp-color`, injetado
   inline a partir da posição no cadastro) e passou a informar a SITUAÇÃO.
   v4.5.4 — a cor da obra voltou, por CLASSE (`.cp-obra-N`, mais abaixo), presa
   ao ID da obra. As regras daqui viraram o padrão de quando não há paleta. */
.cp-cell.cp-busy{cursor:pointer;background:var(--indigo-soft);color:var(--indigo);border-color:var(--indigo)}
.cp-cell.cp-busy:hover{background:color-mix(in srgb,var(--indigo) 22%,transparent)}
.cp-cell.cp-busy.cp-partial{background:var(--amber-soft);color:var(--amber);border-color:var(--amber);border-style:dashed}
.cp-cell.cp-busy.cp-partial:hover{background:color-mix(in srgb,var(--amber) 22%,transparent)}
.cp-cell.cp-busy.cp-done{opacity:.55}
.cp-cell.cp-conflict{background:var(--red-soft);color:var(--red);border-color:var(--red);font-weight:700}

/* ===== v4.5.4 — UMA COR POR OBRA =====
   Dez matizes separados no círculo cromático, todos em versão suave: o fundo
   quase branco e o contorno/texto na versão escura do mesmo matiz. Assim oito
   obras lado a lado se distinguem sem o Gantt virar vitral.
   ⚠ NÃO há vermelho nem cinza na paleta: são de Conflito e Férias, que são
   ESTADO e continuam vencendo a cor da obra. O slot vem de
   `CrewPlan.projectPalette` (hash do ID da obra), nunca da posição no cadastro.
   ⚠ As regras abaixo vêm DEPOIS de `.cp-busy.cp-partial` de propósito: têm a
   mesma especificidade (3 classes) e sobrescrevem cor/fundo/contorno, mas não
   declaram `border-style` — então o TRACEJADO do parcial sobrevive. */
:root{
  --cp-obra-0:#4338CA;   --cp-obra-0-soft:#EEF2FF;   /* indigo */
  --cp-obra-1:#15803D;   --cp-obra-1-soft:#F0FDF4;   /* verde */
  --cp-obra-2:#A21CAF;   --cp-obra-2-soft:#FDF4FF;   /* fucsia */
  --cp-obra-3:#3F6212;   --cp-obra-3-soft:#F7FEE7;   /* limao */
  --cp-obra-4:#1E40AF;   --cp-obra-4-soft:#EFF6FF;   /* marinho */
  --cp-obra-5:#A16207;   --cp-obra-5-soft:#FEFCE8;   /* ocre */
  --cp-obra-6:#0369A1;   --cp-obra-6-soft:#F0F9FF;   /* azul */
  --cp-obra-7:#0F766E;   --cp-obra-7-soft:#F0FDFA;   /* teal */
  --cp-obra-8:#155E75;   --cp-obra-8-soft:#ECFEFF;   /* petroleo */
}
.cp-chip.cp-chip-partial{background:var(--bg);border-color:var(--text3);border-style:dashed}
.cp-legend-keys{margin-top:-6px;gap:6px 14px;font-size:.74rem}
.cp-legend-keys b{color:var(--text2)}
.cp-obra-key{display:inline-block;padding:0 4px;border:1px solid currentColor;border-radius:3px;font-style:normal;font-weight:800;font-size:.7rem}
.cp-cell.cp-busy.cp-obra-0{background:var(--cp-obra-0-soft);color:var(--cp-obra-0);border-color:var(--cp-obra-0)}
.cp-cell.cp-busy.cp-obra-0:hover{background:color-mix(in srgb,var(--cp-obra-0) 18%,transparent)}
.cp-obra-key.cp-obra-0{color:var(--cp-obra-0);background:var(--cp-obra-0-soft)}
.cp-cell.cp-busy.cp-obra-1{background:var(--cp-obra-1-soft);color:var(--cp-obra-1);border-color:var(--cp-obra-1)}
.cp-cell.cp-busy.cp-obra-1:hover{background:color-mix(in srgb,var(--cp-obra-1) 18%,transparent)}
.cp-obra-key.cp-obra-1{color:var(--cp-obra-1);background:var(--cp-obra-1-soft)}
.cp-cell.cp-busy.cp-obra-2{background:var(--cp-obra-2-soft);color:var(--cp-obra-2);border-color:var(--cp-obra-2)}
.cp-cell.cp-busy.cp-obra-2:hover{background:color-mix(in srgb,var(--cp-obra-2) 18%,transparent)}
.cp-obra-key.cp-obra-2{color:var(--cp-obra-2);background:var(--cp-obra-2-soft)}
.cp-cell.cp-busy.cp-obra-3{background:var(--cp-obra-3-soft);color:var(--cp-obra-3);border-color:var(--cp-obra-3)}
.cp-cell.cp-busy.cp-obra-3:hover{background:color-mix(in srgb,var(--cp-obra-3) 18%,transparent)}
.cp-obra-key.cp-obra-3{color:var(--cp-obra-3);background:var(--cp-obra-3-soft)}
.cp-cell.cp-busy.cp-obra-4{background:var(--cp-obra-4-soft);color:var(--cp-obra-4);border-color:var(--cp-obra-4)}
.cp-cell.cp-busy.cp-obra-4:hover{background:color-mix(in srgb,var(--cp-obra-4) 18%,transparent)}
.cp-obra-key.cp-obra-4{color:var(--cp-obra-4);background:var(--cp-obra-4-soft)}
.cp-cell.cp-busy.cp-obra-5{background:var(--cp-obra-5-soft);color:var(--cp-obra-5);border-color:var(--cp-obra-5)}
.cp-cell.cp-busy.cp-obra-5:hover{background:color-mix(in srgb,var(--cp-obra-5) 18%,transparent)}
.cp-obra-key.cp-obra-5{color:var(--cp-obra-5);background:var(--cp-obra-5-soft)}
.cp-cell.cp-busy.cp-obra-6{background:var(--cp-obra-6-soft);color:var(--cp-obra-6);border-color:var(--cp-obra-6)}
.cp-cell.cp-busy.cp-obra-6:hover{background:color-mix(in srgb,var(--cp-obra-6) 18%,transparent)}
.cp-obra-key.cp-obra-6{color:var(--cp-obra-6);background:var(--cp-obra-6-soft)}
.cp-cell.cp-busy.cp-obra-7{background:var(--cp-obra-7-soft);color:var(--cp-obra-7);border-color:var(--cp-obra-7)}
.cp-cell.cp-busy.cp-obra-7:hover{background:color-mix(in srgb,var(--cp-obra-7) 18%,transparent)}
.cp-obra-key.cp-obra-7{color:var(--cp-obra-7);background:var(--cp-obra-7-soft)}
.cp-cell.cp-busy.cp-obra-8{background:var(--cp-obra-8-soft);color:var(--cp-obra-8);border-color:var(--cp-obra-8)}
.cp-cell.cp-busy.cp-obra-8:hover{background:color-mix(in srgb,var(--cp-obra-8) 18%,transparent)}
.cp-obra-key.cp-obra-8{color:var(--cp-obra-8);background:var(--cp-obra-8-soft)}

/* Navegadores sem color-mix continuam legíveis: só o realce do hover cai para
   o cinza neutro do tema — o fundo normal já não usa color-mix desde a v4.5.1. */
@supports not (background:color-mix(in srgb,#000 10%,transparent)){
  .cp-cell.cp-busy:hover,
  .cp-cell.cp-busy.cp-partial:hover{background:var(--surface2)}
}

/* ===== Cards (celular) ===== */
.cp-cards{display:none;flex-direction:column;gap:10px}
.cp-card{border:1px solid var(--border);padding:11px 12px}
.cp-card-head{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:8px}
.cp-card-head span{display:flex;flex-direction:column;min-width:0}
.cp-card-head b{font-size:.88rem}
.cp-card-head small{font-size:.72rem;color:var(--text3)}
.cp-card-block{border-left:3px solid var(--indigo);padding:6px 0 6px 9px;margin-bottom:7px;display:flex;flex-direction:column;gap:2px}
.cp-card-block b{font-size:.78rem}
.cp-card-block span{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:600}
.cp-card-block span svg{width:14px;height:14px;color:var(--indigo)}
.cp-card-block small{font-size:.71rem;color:var(--text3)}
.cp-card-empty{font-size:.78rem;color:var(--text3);padding:4px 0}
.cp-card-free{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--green);margin-top:2px}
.cp-card-off{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text3);margin:2px 0 4px}
.cp-card-off svg{width:14px;height:14px;flex:0 0 auto}
.cp-card-free svg{width:14px;height:14px}

/* ===== Barras de disponibilidade e capacidade ===== */
.cp-bar{height:6px;background:var(--border);overflow:hidden;margin-bottom:4px}
.cp-bar.big{height:10px;margin-bottom:0}
.cp-bar-fill{height:100%;background:var(--text3);transition:width .3s ease-out}
.cp-bar-fill.ok{background:var(--green)}
.cp-bar-fill.warn{background:var(--amber)}
.cp-bar-fill.crit{background:var(--red)}
.cp-muted{color:var(--text3)}
.cp-capacity{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.cp-capacity-row{display:grid;grid-template-columns:170px minmax(0,1fr) 52px 150px;gap:12px;align-items:center}
.cp-capacity-label{display:flex;flex-direction:column}
.cp-capacity-label b{font-size:.82rem}
.cp-capacity-label small{font-size:.71rem;color:var(--text3)}
.cp-capacity-pct{font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums}
.cp-capacity-sub{font-size:.72rem;color:var(--text3)}

/* ===== Modais: conflito, dicas, resultado ===== */
.crewplan-conflict{border:1px solid var(--red);background:var(--red-soft);padding:12px 14px;margin-bottom:10px}
/* `>` obrigatório: sem ele o display:flex atinge todo <b> do texto (nome do
   colaborador, obra, datas) e cada um vira uma linha própria. */
.crewplan-conflict>b{display:flex;align-items:center;gap:7px;color:var(--red);font-size:.92rem;margin-bottom:7px}
.crewplan-conflict>b svg{width:17px;height:17px}
.crewplan-conflict p b{color:var(--text);font-weight:700}
.crewplan-conflict p{font-size:.86rem;line-height:1.55;margin-bottom:5px;color:var(--text)}
.crewplan-conflict small{color:var(--text2);font-size:.78rem}
.cp-hint{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid var(--border);background:var(--surface2);font-size:.79rem;color:var(--text2);line-height:1.5}
.cp-hint svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--text3)}
.cp-result{margin-top:14px}
.cp-result-head{font-size:.83rem;color:var(--text2);margin-bottom:8px}

/* ===== Assistente "Planejar nova obra" ===== */
.cp-steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.cp-step{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--border);font-size:.76rem;font-weight:600;color:var(--text3);background:var(--surface2)}
.cp-step b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--border);color:var(--text2);font-size:.68rem}
.cp-step.active{color:var(--text);background:var(--bg);border-color:var(--text)}
.cp-step.active b{background:var(--color-primary);color:var(--color-primary-text)}
.cp-step.done{color:var(--green);border-color:var(--green)}
.cp-step.done b{background:var(--green);color:#fff}

.cp-need-form{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:end;margin-bottom:14px}
.cp-need-block{border:1px solid var(--border);margin-bottom:12px}
.cp-need-head{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 12px;background:var(--surface2);border-bottom:1px solid var(--border)}
.cp-need-head b{font-size:.86rem}
.cp-candidate{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;margin-bottom:0}
.cp-candidate:last-child{border-bottom:0}
.cp-candidate:hover{background:var(--surface2)}
.cp-candidate.picked{background:var(--green-soft)}
.cp-candidate.off{opacity:.5;cursor:not-allowed}
.cp-candidate input{width:17px;height:17px;flex:0 0 auto;margin:0}
.cp-candidate-mark{width:18px;text-align:center;font-size:.95rem;flex:0 0 auto}
.cp-candidate-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cp-candidate-main b{font-size:.85rem}
.cp-candidate-main small{font-size:.72rem;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cp-coverage{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:14px}
.cp-coverage div{background:var(--bg);padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.cp-coverage small{font-size:.72rem;color:var(--text3);font-weight:600}
.cp-coverage b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.cp-coverage b.ok{color:var(--green)}
.cp-coverage b.warn{color:var(--amber)}
.cp-gap{border:1px solid var(--amber);background:var(--amber-soft);padding:11px 13px;margin-top:12px}
.cp-gap>b{display:flex;align-items:center;gap:7px;color:var(--amber);font-size:.85rem;margin-bottom:8px}
.cp-gap>b svg{width:16px;height:16px}
.cp-gap-table{width:100%;border-collapse:collapse;font-size:.8rem}
.cp-gap-table td{padding:4px 6px;border-top:1px solid var(--border)}
.cp-gap-table tr:first-child td{border-top:0}

.cp-preview-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:14px}
.cp-preview-head div{background:var(--bg);padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-preview-head small{font-size:.71rem;color:var(--text3);font-weight:600}
.cp-preview-head b{font-size:.85rem;overflow:hidden;text-overflow:ellipsis}

/* ===== Celular: sem Gantt comprimido, cards e timeline vertical ===== */
@media(max-width:860px){
  /* css/rdo.css tem, no celular, `.toolbar-actions .btn{flex:1;min-width:0}` —
     serve para as duas ações curtas do RDO, mas espreme os TRÊS botões desta
     tela numa linha só e corta o texto. Em vez de mexer naquela regra (que
     vale para o sistema inteiro), esta tela pede a sua própria. */
  .crewplan-toolbar .toolbar-actions{width:100%}
  .crewplan-toolbar .toolbar-actions .btn{flex:1 1 100%;min-width:0;justify-content:center}
  .cp-grid-scroll{display:none}
  .cp-cards{display:flex}
  .cp-gantt{padding:12px 13px}
  .crewplan-period{min-width:120px}
  .cp-capacity-row{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:'label pct' 'bar bar' 'sub sub';gap:5px 10px}
  .cp-capacity-label{grid-area:label}
  .cp-capacity-row .cp-bar{grid-area:bar}
  .cp-capacity-pct{grid-area:pct}
  .cp-capacity-sub{grid-area:sub}
  .cp-need-form{grid-template-columns:1fr}
  .cp-coverage{grid-template-columns:1fr}
  .cp-steps .cp-step{font-size:.71rem;padding:5px 9px}
}
@media(max-width:520px){
  /* css/dashboard.css joga .kpi-grid para uma coluna abaixo de 520px. Com os
     seis indicadores deste módulo isso empurra a tela toda para baixo; aqui
     (e só aqui) eles ficam em duas colunas. */
  #crewplan-kpis .kpi-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .crewplan-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px;gap:9px}
  .crewplan-filter-actions{grid-column:1/-1}
  .cp-candidate{flex-wrap:wrap}
  .cp-candidate-main{flex-basis:100%;order:3}
}


/* =====================================================================
   v4.5.1 — SELETOR DE VÁRIAS FUNÇÕES (assistente, etapa 2)
   O cadastro tem Eletricista I, II, I A e II A e a obra pede "5
   eletricistas". O <select> de uma opção só não dava conta.
   ===================================================================== */
.cp-need-form .cp-role-pick{grid-column:1/-1;min-width:0}
.cp-role-families{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.cp-role-family{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font:inherit;font-size:.74rem;font-weight:600;cursor:pointer}
.cp-role-family:hover{border-color:var(--indigo);background:var(--indigo-soft);color:var(--indigo)}
.cp-role-family svg{width:13px;height:13px}
.cp-role-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px;max-height:184px;overflow:auto;padding:6px;border:1px solid var(--border);background:var(--bg)}
.cp-role-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 7px;cursor:pointer;font-size:.8rem}
.cp-role-option:hover{background:var(--surface2)}
.cp-role-option input{margin:0;flex:0 0 auto}
.cp-role-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-role-option small{color:var(--text3);font-size:.7rem;font-variant-numeric:tabular-nums}
/* A quantidade e o botão dividem uma linha só: empilhados, empurravam a tabela
   de necessidades para fora da primeira dobra do modal. */
.cp-need-qty{display:grid;grid-template-columns:110px auto;align-items:end;gap:8px;min-width:0}
.cp-need-qty label{grid-column:1/-1;margin-bottom:0}
.cp-need-qty input{min-width:0}
.cp-need-qty .btn{white-space:nowrap}
.cp-candidate-role{color:var(--text3);font-size:.71rem;font-weight:600}

/* =====================================================================
   v4.5.1 — PDF DO PLANEJAMENTO (modo printing-crewplan)
   Registrado em Exports.printModes / printReportIds. A montagem passa pelo
   pipeline único de impressão — ver [[impressao-pdf-cliqueobras]].
   ===================================================================== */
#crewplan-print-report{display:none}

/* v4.5.2 — PAISAGEM. O relatório é um Gantt: em retrato as colunas de dia
   ficam com 6 mm e o código da obra não cabe. Deitado, a área útil vai de
   186 mm para 279 mm e um mês inteiro entra dia a dia. */
@page crewplan-report{
  size:A4 landscape;
  margin:9mm;
}

@media print{
  body.printing-crewplan{background:#fff!important}
  body.printing-crewplan #app,
  body.printing-crewplan #modal-overlay,
  body.printing-crewplan #toasts,
  body.printing-crewplan .loading-overlay{display:none!important}
  body.printing-crewplan #crewplan-print-report{display:block!important;width:100%;padding:0;color:#27272a;background:#fff;font-family:Inter,Arial,sans-serif;page:crewplan-report}
  /* v4.5.4 — cabeçalho de UMA linha. O que era um bloco de 14 mm com três
     linhas virou 9 mm: cada milímetro aqui é um milímetro a mais de gráfico. */
  .crewplan-print-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding-bottom:5px;border-bottom:1.5px solid #27272a}
  .crewplan-print-company{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:7px}
  .crewplan-print-company>img{display:grid;width:22px;height:22px;place-items:center;border:1px solid #e4e4e7;border-radius:5px;background:#fff;object-fit:contain}
  .crewplan-print-company>div,.crewplan-print-period{display:flex;min-width:0;flex-direction:column}
  .crewplan-print-head small{color:#71717a;font-size:7px;letter-spacing:.07em}
  .crewplan-print-head b{font-size:9.5px;line-height:1.2}
  .crewplan-print-head span{color:#52525b;font-size:7px;line-height:1.25}
  .crewplan-print-period{align-items:flex-end;text-align:right}
  .crewplan-print-period b{font-size:9.5px}
  .crewplan-print-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:9px 0}
  .crewplan-print-facts>div{display:flex;flex-direction:column;padding:7px 8px;border:1px solid #e4e4e7;border-radius:7px;background:#fafafa}
  .crewplan-print-facts small{color:#71717a;font-size:7px}
  .crewplan-print-facts b{margin-top:2px;font-size:10px}
  /* Uma obra não pode começar no rodapé de uma página e continuar na outra
     sem repetir o nome: quem recebe o PDF lê "quem vai para qual obra". */
  .crewplan-print-project,.crewplan-print-summary{margin-top:12px;break-inside:avoid;page-break-inside:avoid}
  .crewplan-print-project h3,.crewplan-print-summary h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 5px;padding-bottom:4px;border-bottom:1px solid #d4d4d8;font-size:10px}
  .crewplan-print-project h3 span,.crewplan-print-summary h3 span{color:#71717a;font-size:7.5px;font-weight:600}
  .crewplan-print-table{width:100%;border-collapse:collapse;font-size:8px}
  .crewplan-print-table th,.crewplan-print-table td{padding:4px 6px;border:1px solid #e4e4e7;color:#27272a;text-align:left;vertical-align:middle}
  .crewplan-print-table th{background:#f4f4f5;color:#52525b;font-size:7px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
  .crewplan-print-table td.num,.crewplan-print-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .crewplan-print-table thead{display:table-header-group}
  /* ---------- Gantt impresso ----------
     ⚠ O Chrome descarta `background` quando "Gráficos de plano de fundo" está
     desmarcado na janela de impressão, mas NUNCA a borda nem a cor do texto.
     Por isso cada estado carrega os três: fundo (bônus), borda e texto. Assim
     o gráfico continua legível em preto e branco. */
  /* v4.5.4 — as medidas do Gantt vêm de `Views.planejamentoequipe.printMetrics`,
     via variáveis no próprio `#crewplan-print-report`. O fallback de cada
     `var()` é exatamente o valor fixo da v4.5.2: se por algum motivo o JS não
     escrever as variáveis, o PDF sai como saía antes, e não quebrado. */
  .crewplan-print-chart{margin-top:4px;break-inside:auto}
  .crewplan-print-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:6px;color:#52525b;font-size:6.6px}
  .crewplan-print-legend>span{display:inline-flex;align-items:center;gap:4px}
  .cpg-chip{display:inline-block;width:9px;height:7px;border:1px solid #a1a1aa;background:#fff}
  .cpg-keys{color:#3f3f46}
  .cpg-keys i{display:inline-block;padding:0 3px;border:1px solid #4338ca;color:#4338ca;font-style:normal;font-weight:800}
  .crewplan-print-gantt{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--cpg-cell-font,6.2px)}
  /* ⚠ `box-sizing:border-box` é o que faz `--cpg-row` valer de verdade. Com o
     `content-box` do padrão, o padding e a borda somam POR FORA: medi 3,76 mm
     pedidos virarem 4,55 mm de linha, e 40 linhas estouravam a folha em
     31 mm — o cálculo do `printMetrics` dizia que cabia e não cabia. */
  .crewplan-print-gantt th,.crewplan-print-gantt td{box-sizing:border-box;padding:1px;border:1px solid #d4d4d8;overflow:hidden;text-align:center;vertical-align:middle}
  .crewplan-print-gantt thead th{background:#f4f4f5;color:#3f3f46;font-size:6.2px;font-weight:800}
  .crewplan-print-gantt thead th.cpg-sub{color:#71717a;font-size:5px;font-weight:600;text-transform:uppercase}
  .crewplan-print-gantt th.cpg-name{width:var(--cpg-name,46mm);padding:1px 4px;background:#fff;text-align:left}
  .crewplan-print-gantt thead th.cpg-name{background:#f4f4f5;vertical-align:bottom}
  .crewplan-print-gantt tbody th.cpg-name b{display:block;overflow:hidden;color:#18181b;font-size:var(--cpg-name-font,6.8px);font-weight:700;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  .crewplan-print-gantt tbody th.cpg-name small{display:block;overflow:hidden;color:#71717a;font-size:var(--cpg-role-font,5.4px);font-weight:600;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  /* ⚠ Com a linha em menos de 4,3 mm não cabem NOME e FUNÇÃO empilhados.
     Quem sai é a função: o nome é a chave da linha, a função é contexto — e
     ela continua na tela e no filtro. */
  .cpg-tight .crewplan-print-gantt tbody th.cpg-name small{display:none}
  .crewplan-print-gantt thead{display:table-header-group}
  .crewplan-print-gantt tr{break-inside:avoid;page-break-inside:avoid}
  .cpg-cell{height:var(--cpg-row,5.4mm);color:#d4d4d8;font-size:var(--cpg-cell-font,6px);font-weight:800;letter-spacing:-.02em}
  .crewplan-print-gantt td.cpg-alloc{border-color:#4338ca;background:#eef2ff;color:#4338ca}
  .crewplan-print-gantt td.cpg-partial{border:1px dashed #b45309;background:#fffbeb;color:#b45309}
  .crewplan-print-gantt td.cpg-conflict{border-color:#b91c1c;background:#fee2e2;color:#b91c1c;font-size:7.5px}
  .crewplan-print-gantt td.cpg-off{background:#f4f4f5;color:#a1a1aa}
  .cpg-chip.cpg-alloc{border-color:#4338ca;background:#eef2ff}
  .cpg-chip.cpg-partial{border:1px dashed #b45309;background:#fffbeb}
  .cpg-chip.cpg-conflict{border-color:#b91c1c;background:#fee2e2}
  .cpg-chip.cpg-off{border-color:#a1a1aa;background:#f4f4f5}
  /* v4.5.4 — a MESMA paleta da tela (tokens `--cp-obra-*` no `:root`, fora do
     `@media print`, herdados aqui). Uma obra não pode ser verde na tela e roxa
     no papel: quem confere o PDF ao lado do monitor perderia a referência.
     ⚠ Estas regras vêm DEPOIS de `td.cpg-partial`, que usa o atalho
     `border:1px dashed`. Como aqui só se declara `border-color`, o TRACEJADO
     do parcial sobrevive — e é ele, não mais a cor âmbar, que diz "parcial".
     ⚠ Conflito e Férias NÃO têm slot: continuam vermelho com "!" e cinza com
     "//", porque são exceção e têm de saltar por cima da cor da obra. */
  .crewplan-print-gantt td.cpg-obra-0{border-color:var(--cp-obra-0);background:var(--cp-obra-0-soft);color:var(--cp-obra-0)}
  .cpg-obra-key.cpg-obra-0{border-color:var(--cp-obra-0);background:var(--cp-obra-0-soft);color:var(--cp-obra-0)}
  .crewplan-print-gantt td.cpg-obra-1{border-color:var(--cp-obra-1);background:var(--cp-obra-1-soft);color:var(--cp-obra-1)}
  .cpg-obra-key.cpg-obra-1{border-color:var(--cp-obra-1);background:var(--cp-obra-1-soft);color:var(--cp-obra-1)}
  .crewplan-print-gantt td.cpg-obra-2{border-color:var(--cp-obra-2);background:var(--cp-obra-2-soft);color:var(--cp-obra-2)}
  .cpg-obra-key.cpg-obra-2{border-color:var(--cp-obra-2);background:var(--cp-obra-2-soft);color:var(--cp-obra-2)}
  .crewplan-print-gantt td.cpg-obra-3{border-color:var(--cp-obra-3);background:var(--cp-obra-3-soft);color:var(--cp-obra-3)}
  .cpg-obra-key.cpg-obra-3{border-color:var(--cp-obra-3);background:var(--cp-obra-3-soft);color:var(--cp-obra-3)}
  .crewplan-print-gantt td.cpg-obra-4{border-color:var(--cp-obra-4);background:var(--cp-obra-4-soft);color:var(--cp-obra-4)}
  .cpg-obra-key.cpg-obra-4{border-color:var(--cp-obra-4);background:var(--cp-obra-4-soft);color:var(--cp-obra-4)}
  .crewplan-print-gantt td.cpg-obra-5{border-color:var(--cp-obra-5);background:var(--cp-obra-5-soft);color:var(--cp-obra-5)}
  .cpg-obra-key.cpg-obra-5{border-color:var(--cp-obra-5);background:var(--cp-obra-5-soft);color:var(--cp-obra-5)}
  .crewplan-print-gantt td.cpg-obra-6{border-color:var(--cp-obra-6);background:var(--cp-obra-6-soft);color:var(--cp-obra-6)}
  .cpg-obra-key.cpg-obra-6{border-color:var(--cp-obra-6);background:var(--cp-obra-6-soft);color:var(--cp-obra-6)}
  .crewplan-print-gantt td.cpg-obra-7{border-color:var(--cp-obra-7);background:var(--cp-obra-7-soft);color:var(--cp-obra-7)}
  .cpg-obra-key.cpg-obra-7{border-color:var(--cp-obra-7);background:var(--cp-obra-7-soft);color:var(--cp-obra-7)}
  .crewplan-print-gantt td.cpg-obra-8{border-color:var(--cp-obra-8);background:var(--cp-obra-8-soft);color:var(--cp-obra-8)}
  .cpg-obra-key.cpg-obra-8{border-color:var(--cp-obra-8);background:var(--cp-obra-8-soft);color:var(--cp-obra-8)}
  .cpg-chip.cpg-partial{border:1px dashed #71717a;background:#fff}
  .cpg-obra-key{display:inline-block;padding:0 3px;border:1px solid #4338ca;border-radius:2px;color:#4338ca;font-style:normal;font-weight:800}
  .crewplan-print-note{display:block;margin-top:5px;color:#71717a;font-size:6px}
  /* ⚠ Nada de `break-before:page` no detalhe por obra. Duas razões: num
     planejamento pequeno o Gantt e o detalhe cabem na MESMA folha, e forçar a
     página 2 desperdiçaria papel; e `.crewplan-print-project:first-of-type` nem
     casaria — `:first-of-type` olha o TIPO do elemento (`section`), e o
     primeiro `<section>` do relatório é o do gráfico, não o da obra.
     O `break-inside:avoid` de cada seção já impede a quebra feia. */
  .crewplan-print-alert{margin:0 0 4px;padding:4px 7px;border:1px solid #f5c2c7;border-radius:5px;background:#fdf2f2;color:#842029;font-size:7px}
  .crewplan-print-warn{color:#b02a37;white-space:nowrap}
  #crewplan-print-report>footer{margin-top:10px;padding-top:6px;border-top:1px solid #e4e4e7;color:#71717a;font-size:6px;text-align:center}
}