/*
 * Checklist ESEN — protótipo (Etapa A)
 * telas/servicos.css — lista (#/servicos) e detalhe (#/servicos/:codigo). Prefixo .servicos-; só tokens.
 */

/* =========================================================================
   LISTA — tabela (desktop/notebook) e lista tocável (celular/tablet)
   ========================================================================= */
.servicos-tabela .servicos-col-codigo { width: 132px; }
.servicos-tabela .servicos-col-tipo { width: 132px; }
.servicos-tabela .servicos-col-func { width: 116px; }
.servicos-tabela .servicos-col-data { width: 96px; }
.servicos-tabela .servicos-col-nc { width: 48px; }
.servicos-tabela .servicos-col-status { width: 136px; }
.servicos-tabela .servicos-col-rel { width: 0; }
.servicos-tabela .servicos-col-acoes { width: 48px; }
.servicos-tabela .servicos-tipo { gap: 6px; }
/* Abaixo de 1440 a coluna Relatório some (largura 0) e o documento aparece embaixo do status. */
.servicos-tabela .servicos-td-rel { padding: 0; visibility: hidden; }

@media (min-width: 1440px) {
  .servicos-tabela .servicos-col-tipo { width: 136px; }
  .servicos-tabela .servicos-col-func { width: 152px; }
  .servicos-tabela .servicos-col-data { width: 104px; }
  .servicos-tabela .servicos-col-nc { width: 56px; }
  .servicos-tabela .servicos-col-status { width: 148px; }
  .servicos-tabela .servicos-col-rel { width: 124px; }
  .servicos-tabela .servicos-col-acoes { width: 52px; }
  .servicos-tabela .servicos-tipo { gap: var(--esp-2); }
  .servicos-tabela .servicos-td-rel { padding: 0 10px; visibility: visible; }
  .servicos-status__rel { display: none; }
}

.servicos-tipo { display: inline-flex; align-items: center; gap: var(--esp-2); max-width: 100%; min-width: 0; vertical-align: middle; }
.servicos-tipo > .icone { flex: none; color: var(--cor-texto-2); }
.servicos-tipo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.servicos-status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); }
.servicos-tabela abbr { text-decoration: none; cursor: help; }

/* Ordenação no toque (a tabela tem os cabeçalhos clicáveis) */
.servicos-ordem {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  min-height: var(--alvo-minimo); padding: var(--esp-1) var(--esp-2) var(--esp-1) var(--esp-4);
  border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
}
.servicos-ordem__texto { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); color: var(--cor-texto); }
.servicos-ordem__texto .icone { flex: none; color: var(--cor-destaque); stroke-width: var(--traco-icone-status); }
.servicos-ordem__texto strong { font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.servicos-ordem .btn { flex: none; }

.servicos-linha-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; }
.servicos-linha-data { display: inline-flex; align-items: center; gap: var(--esp-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.servicos-lado-func { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto); }
.servicos-resultado .linha__lado { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .servicos-linha-data { display: none; } }

/* =========================================================================
   DETALHE — cabeçalho e faixa de fatos
   ========================================================================= */
.servicos-titulo { display: flex; align-items: center; gap: var(--esp-3); }
.servicos-titulo > .icone { flex: none; width: 24px; height: 24px; color: var(--cor-texto-2); }
.servicos-titulo > span { min-width: 0; }

.servicos-mais__texto { display: none; }

.servicos-fatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-4) var(--esp-6);
  margin: 0; padding: var(--esp-4) var(--esp-5);
  background: var(--cor-superficie-1); border: var(--borda-largura) solid var(--cor-borda-sutil); border-radius: var(--raio-3);
}
.servicos-fatos__item { min-width: 0; }
.servicos-fatos dt { font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-forte); color: var(--cor-texto-3); }
.servicos-fatos dd { display: flex; flex-direction: column; align-items: flex-start; margin: 2px 0 0; min-width: 0; font-size: var(--fs-corpo); line-height: var(--lh-corpo); color: var(--cor-texto); overflow-wrap: anywhere; }
.servicos-fatos__sec { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }

/* =========================================================================
   DETALHE — Resumo
   ========================================================================= */
.servicos-lista-simples { display: grid; gap: 2px; margin: 0; padding: 0 0 0 18px; list-style: disc; }
.servicos-lista-simples li::marker { color: var(--cor-texto-3); }
.servicos-nota-inline { margin-left: var(--esp-2); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }

.servicos-ncs { display: grid; justify-items: start; gap: var(--esp-3); margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.servicos-ncs__titulo { display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: var(--peso-forte); }
.servicos-ncs__titulo .icone { stroke-width: var(--traco-icone-status); }
.servicos-ncs__lista { display: grid; gap: var(--esp-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.servicos-ncs__item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3); background: var(--cor-perigo-fundo); border-left: var(--borda-marcador) solid var(--cor-perigo); border-radius: var(--raio-2);
}
.servicos-ncs__num { font-family: var(--fonte-mono); font-variant-numeric: normal; font-size: var(--fs-codigo); line-height: var(--lh-corpo); font-weight: var(--peso-medio); color: var(--cor-texto-2); }
.servicos-ncs__texto { display: grid; gap: 2px; min-width: 0; }
.servicos-ncs__obs { font-size: var(--fs-rotulo); line-height: 20px; color: var(--cor-texto-2); }
.servicos-ncs .link-seta { padding: var(--esp-1) 0; }

.servicos-faltas { display: grid; margin: 0; padding: 0; list-style: none; }
.servicos-faltas > li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
}
.servicos-faltas > li:last-child { border-bottom: 0; }
.servicos-faltas > li > .icone { margin-top: 2px; stroke-width: var(--traco-icone-status); }

/* Em uma coluna (abaixo de 1200) o progresso sobe para logo depois de "Falta para concluir";
   a partir de 1200 as duas pilhas voltam a ser colunas (2:1). */
.servicos-resumo > .pilha { display: contents; }
.servicos-resumo .servicos-bloco { order: 2; }
.servicos-resumo .servicos-bloco--falta { order: 0; }
.servicos-resumo .servicos-bloco--progresso { order: 1; }
@media (min-width: 1200px) {
  .servicos-resumo > .pilha { display: flex; }
  .servicos-resumo .servicos-bloco, .servicos-resumo .servicos-bloco--falta, .servicos-resumo .servicos-bloco--progresso { order: 0; }
}

.servicos-progresso { display: grid; gap: var(--esp-4); }
.servicos-progresso__barra { display: grid; gap: var(--esp-2); }
.servicos-progresso__rotulo { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-forte); }
.servicos-progresso__nota { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.servicos-contagens { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.servicos-contagens__linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  min-height: 40px; padding: var(--esp-2) 0; border-bottom: var(--borda-largura) solid var(--cor-borda-sutil);
}
.servicos-contagens__rotulo { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; color: var(--cor-texto-2); }
.servicos-contagens__rotulo .icone { flex: none; stroke-width: var(--traco-icone-status); }
.servicos-contagens__valor { display: inline-flex; align-items: baseline; gap: var(--esp-2); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; color: var(--cor-texto); white-space: nowrap; }
.servicos-contagens__extra { font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-normal); color: var(--cor-texto-3); }

/* =========================================================================
   DETALHE — Checklist (revisão somente leitura)
   ========================================================================= */
.servicos-checklist .revisao__titulo { margin: 0; }
.servicos-opcional { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.servicos-checklist .revisao__resposta--vazia { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); }
.servicos-responder { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); }
/* Fotos vinculadas ao item: miniatura com código legível; o texto do placeholder fica só no rótulo acessível. */
.servicos-checklist .revisao__fotos .foto { width: 96px; }
.servicos-checklist .revisao__fotos .foto-demo__titulo { display: none; }
.servicos-secao-fotos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
}
.servicos-secao-fotos__texto { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; color: var(--cor-texto-2); }
.servicos-secao-fotos__texto .icone { flex: none; color: var(--cor-texto-3); }

/* =========================================================================
   DETALHE — Fotografias e Relatório
   ========================================================================= */
@media (min-width: 1024px) { .servicos-fotos-grade { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
.servicos-fotos .painel__acoes .fotos__contador { white-space: nowrap; }
.servicos-relatorio-acoes { margin-top: var(--esp-1); }
.servicos-simulacao { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-processo-texto); }
.servicos-simulacao .icone { flex: none; margin-top: 1px; }

/* =========================================================================
   TOQUE (< 1024) e CELULAR (< 768)
   ========================================================================= */
@media (max-width: 1023px) {
  .servicos-fatos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servicos-fatos dt { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); font-weight: var(--peso-normal); }
  .servicos-fatos dd { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .servicos-fatos__sec { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .servicos-progresso__rotulo { font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
  .servicos-progresso__nota, .servicos-contagens__extra, .servicos-nota-inline, .servicos-opcional { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .servicos-contagens__linha { min-height: var(--alvo-minimo); font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .servicos-ncs__obs, .servicos-responder, .servicos-checklist .revisao__resposta--vazia { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .servicos-responder { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
  .servicos-faltas > li { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .servicos-faltas > li > .icone { margin-top: 4px; }
  .servicos-simulacao { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
}

@media (max-width: 767px) {
  .servicos-titulo { gap: var(--esp-2); }
  .servicos-mais { order: -1; width: 100%; gap: var(--esp-2); padding: 0 var(--esp-4); }
  .servicos-mais__texto { display: inline; }

  .servicos-fatos { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); }
  .servicos-fatos__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--esp-3); }
  .servicos-fatos dd { margin: 0; }

  .servicos-ncs__item { grid-template-columns: 32px minmax(0, 1fr); }
  .servicos-secao-fotos { padding: var(--esp-3) var(--esp-4); }
  .servicos-secao-fotos .btn { width: 100%; }
  .servicos-checklist .revisao__resposta--vazia { align-items: flex-start; }
  .servicos-relatorio-acoes > .btn { flex: 1 1 100%; }
  .servicos-fotos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Etapas xx.yy, NCs por prioridade e pendências do resumo (Manual Técnico 1.0) */
.servicos-etapa-meta { display: block; font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.servicos-checklist .revisao__num.mono { white-space: nowrap; }
.servicos-ncs__lista--painel { padding: var(--esp-3) var(--esp-5) var(--esp-4); }
.servicos-ncs__lista--painel .servicos-ncs__item { grid-template-columns: 48px minmax(0, 1fr); padding: var(--esp-3); }
.servicos-ncs__item--critica { background: var(--cor-perigo-fundo); }
.servicos-ncs__item--menor { background: var(--cor-processo-fundo); border-left-color: var(--cor-processo); }
.servicos-ncs__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.servicos-ncs__acao { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }
.servicos-pend { margin: 0; }
@media (max-width: 1023px) {
  .servicos-etapa-meta, .servicos-ncs__acao { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .servicos-ncs__lista--painel { padding: var(--esp-2) var(--esp-4) var(--esp-3); }
}