/*
 * Checklist ESEN — protótipo (Etapa A)
 * telas/painel.css — #/painel (js/telas/painel.js): visão operacional (administrador/responsável) e Início (funcionário).
 * Só tokens de css/base.css; componentes de css/componentes.css e css/layout.css. Prefixo: .painel-op-
 */

/* ---------- Comuns ---------- */
.painel-op-coluna { min-width: 0; align-content: start; }
.painel-op-tipo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.painel-op-tipo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-op-tipo .icone { flex: none; width: 16px; height: 16px; color: var(--cor-texto-2); }

/* Tabelas do painel: células duplas sem cortar o foco do link do código */
.painel-op-tabela .link-codigo { max-width: 100%; }
.painel-op-tabela .progresso__texto { min-width: 36px; text-align: right; }
.painel-op-status { gap: var(--esp-1); align-items: flex-start; }
.painel-op-status > .badge { max-width: 100%; }
.painel-op-status .status-texto { max-width: 100%; }
.painel-op-status .status-texto > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-op-tabela abbr { text-decoration: none; cursor: help; }

/* Linha tocável: badges do serviço e do relatório lado a lado */
.painel-op-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; }
@media (min-width: 768px) { .painel-op-so-celular { display: none; } }

/* ---------- Ranking por tipo (cada linha é link) ---------- */
.painel-op-ranking { padding: var(--esp-1) 0; }
.painel-op-ranking > li { list-style: none; }
.painel-op-rank {
  padding: 0 var(--esp-4); color: inherit; text-decoration: none;
  transition: background-color var(--dur-rapida);
}
.painel-op-rank:hover { background: var(--cor-superficie-2); }
.painel-op-rank:focus-visible { outline-offset: -2px; }
.painel-op-rank__nome { display: inline-flex; align-items: center; gap: var(--esp-2); }
.painel-op-rank__nome .icone { flex: none; width: 16px; height: 16px; color: var(--cor-texto-2); }
.painel-op-rank__nome > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Não conformidades recentes ---------- */
.painel-op-nc { list-style: none; margin: 0; padding: 0; }
.painel-op-nc > li + li { border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.painel-op-nc__linha {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--esp-3); align-items: start;
  padding: var(--esp-3) var(--esp-4); color: inherit; text-decoration: none; transition: background-color var(--dur-rapida);
}
.painel-op-nc__linha:hover { background: var(--cor-superficie-2); }
.painel-op-nc__linha:focus-visible { outline-offset: -2px; }
.painel-op-nc__icone { padding-top: 2px; color: var(--cor-perigo-texto); }
.painel-op-nc__icone .icone { width: 16px; height: 16px; stroke-width: var(--traco-icone-status); }
.painel-op-nc__conteudo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.painel-op-nc__texto {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-corpo); line-height: var(--lh-corpo); color: var(--cor-texto);
}
.painel-op-nc__num { font-family: var(--fonte-mono); font-variant-numeric: normal; font-size: var(--fs-codigo); font-weight: var(--peso-medio); color: var(--cor-texto-3); }
.painel-op-nc__meta { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-op-nc__meta .codigo { color: var(--cor-texto); font-size: var(--fs-legenda); }

/* ---------- Produtividade e equipes ---------- */
.painel-op-pessoa { color: inherit; text-decoration: none; border-radius: var(--raio-1); }
.painel-op-pessoa .pessoa__nome { text-decoration: underline dotted var(--cor-borda-controle); text-underline-offset: 3px; }
.painel-op-pessoa:hover .pessoa__nome { text-decoration-style: solid; text-decoration-color: var(--cor-texto); }
.painel-op-tabela th.tabela__num .tabela__ordenar { justify-content: flex-end; }

/* =========================================================================
   FUNCIONÁRIO — Início
   ========================================================================= */
/* Continuar de onde parou */
.painel-op-cont { list-style: none; margin: 0; padding: 0; }
.painel-op-cont__item { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); }
.painel-op-cont__item + .painel-op-cont__item { border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.painel-op-cont__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-1) var(--esp-3); }
.painel-op-cont__tipo { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; font-size: var(--fs-painel); line-height: var(--lh-painel); font-weight: var(--peso-forte); }
.painel-op-cont__tipo .icone { flex: none; width: 20px; height: 20px; color: var(--cor-texto-2); }
.painel-op-cont__local { color: var(--cor-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-op-cont__local .peso-medio { color: var(--cor-texto); }
.painel-op-cont__falta { font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-texto-2); }
.painel-op-cont__falta .contagem-nc { font-weight: var(--peso-forte); }
.painel-op-cont__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-1); }
.painel-op-cont__salvo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); color: var(--cor-texto-2); }
.painel-op-cont__salvo .icone { width: 16px; height: 16px; stroke-width: var(--traco-icone-status); }

/* Este mês: faixa de 3 indicadores dentro do painel (sem borda dupla).
   Largo (≥ 480 px de painel): 3 colunas. Estreito (coluna lateral, celular): uma linha por indicador
   (rótulo e nota à esquerda, número à direita) para nenhum rótulo quebrar no meio da palavra. */
.painel-op-mes { container-type: inline-size; container-name: painel-op-mes; }
.painel-op-mes__faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; border-radius: 0; }
@media (min-width: 1200px) { .painel-op-mes__faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container painel-op-mes (max-width: 479.98px) {
  .painel-op-mes__faixa { grid-template-columns: minmax(0, 1fr); }
  .painel-op-mes__faixa .indicador {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rotulo valor" "nota valor";
    align-items: center; column-gap: var(--esp-4); row-gap: 2px; padding: var(--esp-3) var(--esp-4);
  }
  .painel-op-mes__faixa .indicador__rotulo { grid-area: rotulo; }
  .painel-op-mes__faixa .indicador__rotulo > span { overflow-wrap: normal; }
  .painel-op-mes__faixa .indicador__seta { display: none; }
  .painel-op-mes__faixa .indicador__valor { grid-area: valor; margin-top: 0; text-align: right; }
  .painel-op-mes__faixa .indicador__nota { grid-area: nota; }
}

/* Concluídos recentemente */
.painel-op-conc { list-style: none; margin: 0; padding: 0; }
.painel-op-conc__item { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); }
.painel-op-conc__item + .painel-op-conc__item { border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.painel-op-conc__linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.painel-op-conc__data { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); color: var(--cor-texto-2); }
.painel-op-conc__cliente { color: var(--cor-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-op-conc__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-1); }
.painel-op-conc__link { font-size: var(--fs-rotulo); font-weight: var(--peso-forte); }

/* Notebook (1024–1199): as colunas empilham; a lateral (por tipo + não conformidades) vira duas colunas lado a lado. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .painel-op-coluna--lateral { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- Toque (< 1024) ---------- */
@media (max-width: 1023px) {
  /* Produtividade/equipes em cartões: números em duas colunas para o cartão não ficar comprido */
  .tabela.painel-op-grade-toque tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabela.painel-op-grade-toque tbody td { grid-column: auto; }
  .tabela.painel-op-grade-toque tbody td.tabela__principal, .tabela.painel-op-grade-toque tbody td.painel-op-largo { grid-column: 1 / -1; }
  .tabela.painel-op-grade-toque td[data-rotulo]::before { width: auto; min-width: 0; }
  .tabela.painel-op-grade-toque tbody td.tabela__num { justify-content: flex-start; }
  .painel-op-grade-toque .pessoa { min-height: var(--alvo-minimo); }
  .painel-op-grade-toque .painel-op-link-equipe { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
  .painel-op-nc__linha { grid-template-columns: 20px minmax(0, 1fr); padding: var(--esp-3) var(--esp-4); min-height: var(--alvo-minimo); }
  .painel-op-nc__icone .icone { width: 20px; height: 20px; }
  .painel-op-nc__texto { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .painel-op-nc__meta { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .painel-op-nc__meta .codigo { font-size: var(--fs-legenda-toque); }
  .painel-op-rank__nome .icone { width: 20px; height: 20px; }
  .painel-op-cont__tipo { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .painel-op-cont__tipo .icone { width: 24px; height: 24px; }
  .painel-op-cont__local { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .painel-op-cont__falta, .painel-op-cont__salvo, .painel-op-conc__data { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .painel-op-cont__salvo .icone { width: 20px; height: 20px; }
  .painel-op-conc__cliente { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .painel-op-conc__link { font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
}

/* ---------- Celular (< 768) ---------- */
@media (max-width: 767px) {
  /* Linha de serviço: só exceções do relatório (pendente/falha) ao lado do status — "disponível" é o caso normal */
  .painel-op-rel--ok { display: none; }
  .painel-op-ranking .ranking__linha { grid-template-columns: 148px minmax(48px, 1fr) auto; }
  .painel-op-cont__local { white-space: normal; }
  .painel-op--inicio .pagina-cab__acoes, .painel-op--inicio .painel-op-novo { width: 100%; }
  .painel-op-cont__rodape { flex-direction: column; align-items: stretch; }
  .painel-op-cont__botao { width: 100%; }
  .painel-op-mes__faixa .indicador { padding: var(--esp-3); }
}

/* Suas OS para executar (responsável/administrador que também executa) */
.painel-minhas { margin-bottom: var(--esp-5); }
.painel-minhas__lista { list-style: none; margin: 0; padding: 0; }
.painel-minhas__item { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-3) var(--esp-5); border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.painel-minhas__item:first-child { border-top: 0; }
.painel-minhas__texto { min-width: 0; }
.painel-minhas__cliente { font-weight: var(--peso-forte); overflow-wrap: anywhere; }
.painel-minhas__meta { color: var(--cor-texto-2); font-size: var(--fs-rotulo); }
.painel-minhas__fim { display: flex; align-items: center; gap: var(--esp-3); flex: none; }
@media (max-width: 1023px) {
  .painel-minhas__item { flex-direction: column; align-items: stretch; padding: var(--esp-3) var(--esp-4); }
  .painel-minhas__fim { justify-content: space-between; }
}