.character-counter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.character-counter-field > input,
.character-counter-field > textarea {
  box-sizing: border-box;
  width: 100%;
}

.character-counter,
.producto-inline-contador,
.producto-contador-caracteres {
  display: block;
  margin-top: 4px;
  color: #586174;
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: right;
}

.character-counter-field > .character-counter {
  margin-top: 0;
}

.character-counter.limite-alcanzado,
.producto-inline-contador.limite-alcanzado,
.producto-contador-caracteres.limite-alcanzado {
  color: #8a5a00;
  font-weight: 600;
}

.character-counter.limite-excedido,
.producto-inline-contador.limite-excedido,
.producto-contador-caracteres.limite-excedido {
  color: #b42318;
  font-weight: 700;
}

input.limite-excedido,
textarea.limite-excedido {
  border-color: #b42318 !important;
  outline-color: #b42318;
}