/* Console › Faturamento — cor do ícone do cartão por assunto (opção A, item V.5).
 * Rosa = atraso · âmbar = atenção · cinza = consulta (o que faturar). */

.gg-peca.cs-tom-rosa .gg-cabeca > .selo:first-child {
  background: #fde8ec;
  color: #c2415a;
}

.gg-peca.cs-tom-ambar .gg-cabeca > .selo:first-child {
  background: #fff3dd;
  color: #b7791f;
}

.gg-peca.cs-tom-cinza .gg-cabeca > .selo:first-child {
  background: #eef1f0;
  color: #6d7a76;
}

.gg-peca.cs-tom-rosa .gg-cabeca > .selo:first-child svg,
.gg-peca.cs-tom-ambar .gg-cabeca > .selo:first-child svg,
.gg-peca.cs-tom-cinza .gg-cabeca > .selo:first-child svg {
  width: 20px;
  height: 20px;
}

/* No tema escuro, o fundo do selo acompanha o cartão sem perder a palavra da cor. */
:root[data-tema="escuro"] .gg-peca.cs-tom-rosa .gg-cabeca > .selo:first-child {
  background: rgba(194, 65, 90, .18);
  color: #e8a0ae;
}

:root[data-tema="escuro"] .gg-peca.cs-tom-ambar .gg-cabeca > .selo:first-child {
  background: rgba(183, 121, 31, .2);
  color: #e0b86a;
}

:root[data-tema="escuro"] .gg-peca.cs-tom-cinza .gg-cabeca > .selo:first-child {
  background: rgba(109, 122, 118, .22);
  color: #a8b3b0;
}