/* ==================================================================
   Complemento — o que as telas da reforma tributária acrescentaram
   ==================================================================

   Arquivo separado de propósito. A folha principal é, byte a byte, a
   que está em produção; o que nasceu aqui fica deste lado para que a
   comparação entre os dois ambientes continue sendo uma linha só de
   diferença, e para que promover este trabalho a produção seja copiar
   um arquivo em vez de resolver um diff de três mil linhas.

   Nada aqui redefine peça existente. Só acrescenta o que faltava:
   a matiz da tela de Configurações e o padrão de linha de lista.
   ================================================================== */

/* ------------------------------------------------------------------
   Matiz da tela de Configurações
   ------------------------------------------------------------------

   Cada tela carrega a cor do seu domínio — notas é índigo, clientes é
   ciano, produtos é verde-azulado. Configurações não é um domínio: é o
   substrato de onde as outras telas leem os padrões. Grafite é a única
   família ausente de uma paleta inteiramente saturada, e diz "o sistema
   em si" em vez de "mais um assunto".

   A folha principal mistura esta cor com --p-legivel e --c-legivel para
   garantir contraste nos dois temas, então basta declarar a matiz. */

[data-rota="configuracoes"],
[data-modulo="configuracoes"] { --modulo: #475569; }


/* ------------------------------------------------------------------
   Linha de lista editável
   ------------------------------------------------------------------

   Parcelas da fatura, documentos referenciados, reboques e campos de
   uso livre são todos a mesma coisa: uma linha que se acrescenta, se
   preenche e se remove. Antes cada uma montava .grade com um <label>
   vazio só para alinhar o botão de remover na altura dos campos — um
   truque que quebrava assim que a linha quebrava em duas.

   Aqui a linha é uma peça só: os campos crescem, o botão de remover
   fica encostado no fim e alinhado pela base, e some do fluxo de
   tabulação apenas visualmente — continua alcançável por teclado. */

.linha-lista {
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
  padding: var(--e2);
  border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
}

.linha-lista + .linha-lista { margin-top: var(--e2); }

.linha-lista .linha-lista-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--e2) 10px;
  flex: 1;
  min-width: 0;
}

/* O botão de remover não leva rótulo: numa lista de linhas iguais, o
   texto "Remover" repetido em cada uma vira ruído. O que ele remove
   está dito no title e no aria-label. */
.linha-lista .linha-lista-remover { flex: none; }

/* Quando a linha quebra — celular, ou muitos campos — o botão passa a
   ocupar a largura inteira embaixo, em vez de ficar pendurado. */
@media (max-width: 560px) {
  .linha-lista { flex-wrap: wrap; }
  .linha-lista .linha-lista-remover { width: 100%; }
  .linha-lista .linha-lista-remover .botao { width: 100%; }
}

/* Resumo da lista: quantas linhas e quanto somam. Fica abaixo das
   linhas, discreto, porque é conferência e não conteúdo. */
.linha-lista-resumo {
  margin-top: var(--e2);
  color: var(--texto-2);
  font-size: 13px;
}

.linha-lista-resumo strong {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------------
   Estado vazio de lista
   ------------------------------------------------------------------

   Lista vazia é convite, não aviso. Fica no mesmo lugar onde as linhas
   vão aparecer, com a mesma borda, para que acrescentar a primeira não
   mova o resto da tela. */

.lista-vazia {
  padding: var(--e3);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-sm);
  color: var(--texto-2);
  font-size: 13px;
  text-align: center;
}


/* ------------------------------------------------------------------
   Valor herdado
   ------------------------------------------------------------------

   Na tela de emissão, um item pode usar a tributação do produto, a do
   emitente, ou a sua própria. Saber qual das três está valendo é a
   informação mais importante daquele bloco, e ela estava dita só no
   texto do botão. Esta marca deixa o estado visível sem cor nova: usa
   a matiz da própria tela. */

.marca-heranca {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 1px 8px;
  border-radius: var(--raio-cheio);
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--modulo) 12%, transparent);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.marca-heranca.propria {
  background: var(--alerta-fraco);
  color: var(--alerta);
}