/**
 * Tela de Configurações — painel administrativo de parâmetros.
 *
 * Mesmo padrão de navegação lateral + painel de `.regras-layout`
 * (pages/notificacoes.css), adaptado para categorias com contagem em vez de
 * eventos de notificação.
 */

.config-pagina { display: flex; flex-direction: column; gap: var(--e-4); }

/* --- barra superior (busca + escopo) --------------------------------------- */
.config-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.config-busca {
  position: relative;
  flex: 1 1 18rem;
  max-width: 24rem;
}
.config-busca__icone {
  position: absolute;
  left: var(--e-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-3);
  pointer-events: none;
}
.config-busca__campo { padding-left: calc(var(--e-3) * 2 + 16px); width: 100%; }

.config-escopo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.config-escopo__rotulo {
  font-size: var(--txt-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-3);
}

.config-aviso {
  font-size: var(--txt-sm);
  color: var(--texto-2);
  background: var(--surface-2);
  border-left: 3px solid var(--info);
  border-radius: var(--raio);
  padding: var(--e-2) var(--e-3);
  margin: 0;
}

/* --- layout: navegação lateral + painel ------------------------------------ */
.config-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--e-4);
  align-items: start;
}
@media (max-width: 900px) {
  .config-layout { grid-template-columns: 1fr; }
}

.config-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--e-4);
}
/* Telas estreitas: 16 categorias empilhadas verticalmente empurrariam o
   painel de parâmetros para muito abaixo da dobra — vira uma fileira
   horizontal rolável (mesma técnica de `.chips-periodo`, central.css),
   cada item com largura natural em vez de `width: 100%`. */
@media (max-width: 900px) {
  .config-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--e-1);
    -webkit-overflow-scrolling: touch;
  }
  .config-nav__item { width: auto; flex: 0 0 auto; white-space: nowrap; }
}

.config-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--txt-sm);
  padding: var(--e-2) var(--e-3);
  background: none;
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  color: var(--texto);
}
.config-nav__item:hover { background: var(--surface-2); }
.config-nav__item[aria-current='true'] { background: var(--azul-100); color: var(--azul-700); font-weight: 600; }

.config-nav__contagem {
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px var(--e-2);
}
.config-nav__item[aria-current='true'] .config-nav__contagem { background: var(--surface); color: var(--azul-700); }

.config-nav__skeleton {
  height: 2.25rem;
  border-radius: var(--raio);
  background: var(--surface-2);
  animation: config-pulso 1.2s ease-in-out infinite;
}

/* --- bloco de categoria ------------------------------------------------- */
.config-categoria {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.config-categoria__topo {
  padding: var(--e-4) var(--e-4) var(--e-2);
}
.config-categoria__titulo {
  font-size: var(--txt-md);
  font-weight: 700;
  color: var(--azul-900);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.config-lista { display: flex; flex-direction: column; }

.config-skeleton-linha {
  height: 3.5rem;
  margin: var(--e-3) var(--e-4);
  border-radius: var(--raio);
  background: var(--surface-2);
  animation: config-pulso 1.2s ease-in-out infinite;
}
@keyframes config-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* --- linha de parâmetro --------------------------------------------------- */
.config-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--linha);
  flex-wrap: wrap;
}
.config-lista .config-linha:first-child { border-top: none; }

.config-linha__texto {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.config-linha__titulo { font-size: var(--txt-sm); font-weight: 600; color: var(--texto); }
.config-linha__descricao { margin: 0; font-size: var(--txt-sm); color: var(--texto-2); }
.config-linha__chave {
  font-size: var(--txt-xs);
  color: var(--texto-3);
}
.config-linha__origem { margin-top: 2px; width: fit-content; }

.config-linha__controle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.config-campo-numero {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.campo--curto { width: 5rem; text-align: right; }
.config-campo-numero__unidade { font-size: var(--txt-sm); color: var(--texto-3); white-space: nowrap; }

.btn--pequeno { padding: 6px var(--e-3); font-size: var(--txt-sm); }

/* --- editor de pesos ------------------------------------------------------ */
.pesos-editor { display: flex; flex-direction: column; gap: var(--e-2); }
.pesos-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
.pesos-linha__campo { display: flex; align-items: center; gap: var(--e-1); }
.pesos-linha__campo input { width: 4.5rem; text-align: right; }

.pesos-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linha);
  font-weight: 600;
}
.pesos-total__valor { font-variant-numeric: tabular-nums; }
.pesos-total__valor--erro { color: var(--falta); }

/* --- editor de lista (chips) ------------------------------------------------ */
.chip__remover {
  display: inline-flex;
  margin-left: 4px;
  color: var(--texto-3);
  vertical-align: middle;
}
.chip__remover:hover { color: var(--falta); }