/* ==========================================================================
   Contagem por Setores (S01–S07, perfil Auditor)

   Composição validada como mockup em `/mockups/auditorias/setores` antes de
   qualquer implementação real (mesmo processo de `auditoria-detalhe.css`).
   Seletores escopados sob `.setor*`/`.setores-*`. Reaproveita classes já
   existentes sem redefini-las: `.cartao`, `.selo`, `.btn*`, `.resumo`,
   `.lista-simples`, `.passos` (de `dados.css`/`components.css`) e
   `.trat-mockup-barra` (de `tratativa.css`, a barra de seletor de cenário).
   Nenhuma cor literal: tudo por token de `tokens.css`.
   ========================================================================== */

.setores-pagina {
  max-width: 56rem;
}

/* --- detalhe do setor (S03) -------------------------------------------- */
.setor-detalhe__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

/* `<details>` nativo — sem componente novo para uma lista que só precisa
   recolher/expandir. `<summary>` herda o peso visual de `.cartao__titulo`
   sem duplicar a classe (o elemento não é um <h2>). */
.setor-detalhe__produtos summary {
  font-size: var(--txt-lg);
  font-weight: 600;
  color: var(--azul-900);
  cursor: pointer;
}
.setor-detalhe__produtos[open] summary { margin-bottom: var(--e-3); }
.setor-detalhe__produtos ul { margin-top: var(--e-2); }

/* --- finalizar setor (S05) ----------------------------------------------- */
.setor-finalizar__item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-sm);
}
.setor-finalizar__ok { color: var(--conforme); flex: 0 0 auto; }
.setor-finalizar__pendente { color: var(--atencao-texto); flex: 0 0 auto; }

.setor-finalizar__confirmacao {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-sm);
  cursor: pointer;
}
.setor-finalizar__confirmacao:has(input:disabled) { color: var(--texto-3); cursor: not-allowed; }

/* --- setor finalizado / todos concluídos (S06/S07) ------------------------ */
.setor-concluido__confirmacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-2);
  padding: var(--e-6) var(--e-4);
}
.setor-concluido__icone { color: var(--conforme); }

/* --- progresso agregado ----------------------------------------------------
   Mesma ideia de `.metrica`/`.grafico-arco`, mas o número principal aqui é
   sempre o percentual agregado (RN-08: nunca por produto). */
.setores-progresso {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
}
.setores-progresso__arco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 6px solid var(--azul-100);
  flex: 0 0 auto;
}
.setores-progresso__percentual {
  font-size: var(--txt-xl);
  font-weight: 700;
  color: var(--azul-900);
  font-variant-numeric: tabular-nums;
}

/* --- orientações -------------------------------------------------------
   Bloco deliberadamente compacto — é um lembrete, não deve competir em
   altura com o progresso ou a lista de setores. */
.setores-orientacoes__item {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--txt-sm);
  color: var(--texto-2);
}
.setores-orientacoes__item svg { flex: 0 0 auto; margin-top: 2px; color: var(--conforme); }

/* --- lista de setores ------------------------------------------------------
   Cada setor é um cartão próprio (não linha de tabela): a ação principal
   ("Iniciar"/"Continuar"/"Revisar") precisa de alvo de toque grande — é a
   tela que o auditor abre parado na frente da prateleira, não só de mouse. */
.setores-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.setor-card {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--surface);
}
/* Setor em contagem ganha destaque de borda — é o único com ação primária
   "Continuar", e precisa ser achado em menos de um segundo numa lista de 8. */
.setor-card[data-status="em_contagem"] {
  border-color: var(--azul-300);
  background: var(--azul-100);
}
.setor-card[data-status="concluida"] { opacity: .85; }

.setor-card__ordem {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--texto-2);
  font-size: var(--txt-sm);
  font-weight: 600;
}

.setor-card__corpo { flex: 1; min-width: 0; }

.setor-card__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-1);
}
.setor-card__cabecalho strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setor-card__progresso {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.setor-card__contagem {
  flex: 0 0 auto;
  font-size: var(--txt-xs);
  color: var(--texto-3);
  white-space: nowrap;
}

/* Barra linear neutra — diferente da `.progresso__trilho` de `contagem.css`
   (que vive sobre fundo azul-900, no cabeçalho da tela de bipagem); aqui o
   fundo é o cartão claro da lista de setores. */
.setores-barra {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
}
.setores-barra__preenchimento {
  height: 100%;
  border-radius: 999px;
  background: var(--conforme);
  transition: width .3s ease;
}
.setor-card[data-status="pendente"] .setores-barra__preenchimento { background: var(--linha-2); }

/* --- lista reordenável (S02) ------------------------------------------------
   `components/ui/ListaReordenavel.js`. Escopo próprio (`.lista-reordenavel*`)
   porque é um componente genérico, não exclusivo de setores — mas nasceu
   aqui e só é usado aqui por enquanto. */
.lista-reordenavel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.lista-reordenavel__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--surface);
  cursor: grab;
}
.lista-reordenavel__item:active { cursor: grabbing; }

.lista-reordenavel__alca {
  flex: 0 0 auto;
  color: var(--texto-3);
  /* Ícone de três pontos, girado: lê como alça de arraste vertical sem
     precisar de um traçado novo só para isto. */
  transform: rotate(90deg);
}

.lista-reordenavel__rotulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modo de edição do nome (lápis): o rótulo de texto vira campo + confirmar/
   cancelar, sem trocar de tela. `overflow: visible` porque o campo precisa
   de espaço para o anel de foco, diferente do rótulo estático acima. */
.lista-reordenavel__rotulo--editando {
  overflow: visible;
  white-space: normal;
}
.lista-reordenavel__campo {
  flex: 1;
  min-width: 0;
}

.lista-reordenavel__ordem {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--texto-2);
  font-size: var(--txt-xs);
  font-weight: 700;
}

.lista-reordenavel__acoes {
  flex: 0 0 auto;
  display: flex;
  gap: var(--e-1);
}

.lista-reordenavel__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--texto-2);
}
.lista-reordenavel__botao:hover:not(:disabled) { background: var(--surface-2); }
.lista-reordenavel__botao:disabled { opacity: .4; cursor: not-allowed; }

.lista-reordenavel__seta--cima { transform: rotate(90deg); }
.lista-reordenavel__seta--baixo { transform: rotate(-90deg); }

/* Abaixo de ~420px a alça + dois botões de 44px somam mais de 130px fixos —
   sobra pouco para o nome do setor, que é o dado que decide a leitura da
   lista. O rótulo quebra para a própria linha, abaixo da alça/ordem. */
@media (max-width: 420px) {
  .lista-reordenavel__item { flex-wrap: wrap; }
  .lista-reordenavel__rotulo { flex-basis: 100%; order: 2; white-space: normal; }
  .lista-reordenavel__acoes { order: 3; margin-left: auto; }
}

/* --- mobile ------------------------------------------------------------
   Em telas estreitas o card empilha: ordem+ação saem da linha do nome para
   não espremer o texto do setor, que é o dado mais importante da linha. */
@media (max-width: 640px) {
  .setor-card {
    flex-wrap: wrap;
  }
  .setor-card__corpo {
    order: 2;
    flex-basis: 100%;
  }
  .setor-card > .btn {
    order: 3;
    margin-left: auto;
  }
}

/* Redesign: setor em contagem destacado por borda + friso azul, não pelo
   cartão inteiro tingido (vários setores em contagem ao mesmo tempo
   pintavam a lista toda de azul). Contador em Montserrat tabular — o
   monospace fica para códigos. */
.setor-card[data-status="em_contagem"] {
  background: var(--surface);
  border-color: var(--azul-300);
  box-shadow: inset 3px 0 0 var(--azul-700);
}
.setor-card__contagem { font-family: var(--fonte); font-variant-numeric: tabular-nums; font-size: var(--txt-xs); }