/* ESCALA DE PESSOAL — AS TELAS (29/10/2026, Alan: «um módulo novo dentro do SIGO que funcione exatamente igual» ao sistema de escala que a empresa usava).
   Só tokens do tema (claro e escuro sozinhos); o que é do módulo leva o prefixo ep-. Carregado depois do style.css e do acesso.css.
   Cada item do menu «Escala de pessoal» é uma tela (um cadastro ou uma consulta dos dados do sistema antigo): a página é só a barra de busca e filtros e o cartão da lista — nada de painel de navegação dentro do conteúdo (Alan, 29/10/2026). */

/* ── A PÁGINA: a barra de busca e filtros e o cartão da lista ───────────────────────────────────────────────────────────────────────── */
.ep-conteudo{display:flex;flex-direction:column;gap:var(--pag-entre-cartoes);min-width:0}
.ep-filtros .ep-busca{flex:1 1 260px;min-width:0}
.ep-filtros-listas{display:contents}
.ep-filtros .ep-filtro{flex:1 1 170px;min-width:150px;max-width:300px}
.ep-marca{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:13px;line-height:20px;color:var(--texto-2);cursor:pointer}
.ep-marca[hidden]{display:none}
.ep-marca input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--brand);cursor:pointer}
.ep-filtros .ep-marca{padding-bottom:0}

/* o cartão da lista: a contagem e o botão Novo vão à direita do título */
.ep-card .cartao-cab{flex-wrap:wrap;row-gap:8px}
.ep-card .cartao-titulo{display:flex;align-items:center;gap:4px;min-width:0;margin-right:auto}
.ep-card .lista-contagem{margin-left:0}
.ep-tabela{margin-top:8px}
.ep-tabela .vazio{display:flex;flex-direction:column;align-items:center;gap:4px}
.ep-tabela .vazio .panel-btn{margin-top:10px}

/* a largura vem do que a coluna guarda (classeDaColuna): o texto longo ganha espaço e quebra em palavras, o código e o sim/não ficam estreitos, e o título da coluna também pode quebrar */
.ep-tab th{white-space:normal;line-height:1.25;vertical-align:bottom}
.ep-tab th,.ep-tab td{padding-left:10px;padding-right:10px}
.ep-tab td{white-space:normal;overflow-wrap:break-word}
.ep-tab .ep-c-curto{white-space:nowrap}
.ep-tab .ep-c-largo{min-width:170px}
.ep-tab .ep-c-medio{min-width:100px}
.ep-tab .ep-c-ref{min-width:170px}
.ep-tab .ep-c-multi{min-width:230px}
.ep-tab .ep-c-bool{width:1%;min-width:76px;text-align:center}
.ep-tab .ep-c-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ep-tab td b{font-weight:600}
.ep-tab.ep-editavel tbody tr{cursor:pointer}
.ep-tab:not(.ep-editavel) tbody tr{cursor:default}
.ep-tab tr.ep-inativo td{color:var(--muted)}
.ep-tab tr.ep-inativo td b{font-weight:500}
.ep-th-acoes{width:1%}
.ep-tab td.ep-acoes{width:1%;white-space:nowrap;text-align:right}
.ep-tab td.ep-acoes .btn-icone{width:30px;height:30px;margin-left:4px}
.ep-chip{display:inline-block;margin:1px 4px 1px 0;padding:1px 8px;border-radius:var(--r-full);background:var(--cinza-bg);color:var(--texto-2);font-size:11px;font-weight:600;white-space:nowrap}
@keyframes epRealce{from{background-color:color-mix(in srgb,var(--ok) 20%,transparent)}to{background-color:transparent}}
.ep-tab tr.ep-novo td{animation:epRealce 2.6s ease-out 1}
@media (prefers-reduced-motion:reduce){.ep-tab tr.ep-novo td{animation:none;background-color:var(--ok-bg)}}
.ep-mais{display:flex;justify-content:center;padding:10px 0 2px}
.ep-mais .panel-btn{margin-top:0;gap:6px}
.ep-mais-resto{font-weight:500;color:var(--muted)}

/* ── A JANELA (Novo, Editar, Remover): o overlay rola, a caixa não corta — a lista suspensa abre por cima do que passar da caixa ──────────── */
.diag-overlay.ep-ov{align-items:flex-start;overflow-y:auto;padding:max(16px,7dvh) 16px 24px}
.diag-box.ep-box{width:min(540px,100%);max-height:none;overflow:visible;margin:0 auto}
.ep-box .diag-head{position:static;border-radius:var(--r-lg) var(--r-lg) 0 0}
.ep-form{display:grid;gap:14px;padding:16px 22px 8px}
.ep-form .campo{min-width:0}
.ep-form .campo input[type=text]{width:100%;box-sizing:border-box}
.ep-obrig{margin-left:3px;color:var(--brand);font-style:normal}
.ep-dica{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--alerta)}
.ep-texto{margin:0;font-size:13px;line-height:1.5;color:var(--texto-2)}
.ep-aviso{margin:0;padding:8px 12px;border-radius:var(--r-md);background:var(--erro-bg);color:var(--erro);font-size:12.5px;line-height:1.4}
.ep-aviso[hidden]{display:none}
.ep-rodape{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:10px 22px 18px}
.ep-rodape .panel-btn{margin-top:0}

/* o campo de várias escolhas (as tecnologias de um cargo): caixinhas numa lista própria; nada marcado é nada. O rótulo tem a cara do .campo da casa, mas o contêiner NÃO é um .campo (o `.campo input` do style.css
   desenharia cada caixinha como um campo de texto) */
.ep-campo-multi{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ep-multi{display:flex;flex-direction:column;gap:8px;font-weight:400;letter-spacing:0;text-transform:none}
.ep-multi-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ep-multi-busca{flex:1 1 160px;min-width:0}
.ep-multi-cont{margin-left:auto;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.ep-multi-lista{max-height:220px;overflow:auto;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
.ep-multi-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--linha-tabela);font-size:13px;line-height:20px;color:var(--ink);cursor:pointer}
.ep-multi-item:last-child{border-bottom:0}
.ep-multi-item[hidden]{display:none}
.ep-multi-item input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--brand)}
.ep-multi-item.sel{background:color-mix(in srgb,var(--brand) 6%,var(--surface))}

/* ── TELAS ESTREITAS: a tabela vira cartões ──────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .ep-filtros .ep-busca{flex:1 1 100%}
  .ep-filtros .ep-filtro{flex:1 1 calc(50% - 8px);min-width:0;max-width:none}   /* as listas de filtro vão duas por linha: cinco em fila ocupavam a tela inteira antes da primeira linha */
  .ep-card .cartao-cab .panel-btn{flex:1 1 100%;height:40px}
  .ep-tab thead{display:none}
  .ep-tab,.ep-tab tbody{display:block}
  .ep-tab.vg-tabela tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--linha-tabela)}
  .ep-tab.vg-tabela tbody tr:last-child{border-bottom:0}
  .ep-tab.vg-tabela tbody tr td{display:block;min-width:0;padding:0;border:0;background:transparent}
  .ep-tab.vg-tabela tbody tr td:first-child{grid-column:1;grid-row:1;font-size:14px}
  .ep-tab.vg-tabela tbody tr td.ep-c-sit{grid-column:2;grid-row:1;justify-self:end}   /* a situação vai para o canto do cartão, sem o título (o ponto colorido já diz) */
  /* as larguras da tela larga não valem no cartão: o texto longo, a referência e as escolhas ocupam a linha toda; o código e o sim/não, meia linha */
  .ep-tab.vg-tabela tbody tr td.ep-c-largo,.ep-tab.vg-tabela tbody tr td.ep-c-ref,.ep-tab.vg-tabela tbody tr td.ep-c-multi{grid-column:1/-1;min-width:0}
  .ep-tab.vg-tabela tbody tr td.ep-c-bool,.ep-tab.vg-tabela tbody tr td.ep-c-curto,.ep-tab.vg-tabela tbody tr td.ep-c-medio,.ep-tab.vg-tabela tbody tr td.ep-c-num{width:auto;min-width:0;text-align:left;white-space:normal}
  .ep-tab td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .ep-tab td:first-child[data-rotulo]::before{display:none}
  .ep-tab td.ep-c-sit[data-rotulo]::before{display:none}
  .ep-tab.vg-tabela tbody tr td.ep-acoes{grid-column:1/-1;display:flex;justify-content:flex-end;gap:6px;width:auto}
  .ep-tab.vg-tabela tbody tr td.ep-acoes .btn-icone{width:40px;height:40px;margin-left:0}
  .ep-form{padding:14px 16px 6px}
  .ep-rodape{padding:10px 16px 16px}
  .ep-rodape .panel-btn{flex:1 1 0;height:40px}
  .diag-overlay.ep-ov{padding:12px 12px 20px}
}
/* DEITADO NO CELULAR (a mesma conta do resto do sistema: paisagem e pouca altura): a janela não passa da tela — os campos vão em duas colunas e os respiros diminuem, para o Cadastrar ficar à vista sem rolar */
@media (orientation:landscape) and (max-height:520px){
  .diag-overlay.ep-ov{padding:8px 12px}
  .diag-box.ep-box{width:min(640px,100%)}
  .ep-box .diag-head{padding:10px 16px 8px}
  .ep-box .diag-head h2{font-size:16px}
  .ep-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;padding:10px 16px 4px}
  .ep-form > .ep-marca,.ep-form > .ep-aviso,.ep-form > .ep-campo-multi,.ep-form > .ep-texto{grid-column:1/-1}
  .ep-rodape{padding:8px 16px 12px}
  .ep-rodape .panel-btn{flex:0 0 auto;height:36px}
  .ep-multi-lista{max-height:110px}
}

/* ── O MENU: a linha entre as consultas e os cadastros do grupo «Escala de pessoal» (o item que abre os cadastros leva `separador: true` no MENU_SIGO) ───────────────────────────────── */
.snav-filhos .snav-item.snav-sep-topo{margin-top:10px}
.snav-filhos .snav-item.snav-sep-topo::after{content:"";position:absolute;left:12px;right:12px;top:-6px;height:1px;background:var(--sidebar-borda);pointer-events:none}
.snav-recolhido .snav-filhos .snav-item.snav-sep-topo::after{left:8px;right:8px}