/* ==========================================================================
   blind digital — campos e mensagens, compartilhados por todas as telas
   ========================================================================== */

.field { margin-bottom: 20px; }

.field__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 9px;
}

.field__input,
.field__select,
.field__area {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  font-size: var(--t-md);
  color: var(--ink);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field__area { min-height: 140px; resize: vertical; line-height: 1.6; }
.field__select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2386868F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}

.field__input:focus,
.field__select:focus,
.field__area:focus {
  outline: none;
  border-color: var(--b2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--b2) 12%, transparent);
}

.field__input::placeholder, .field__area::placeholder { color: var(--ink-3); }

.field__hint { margin-top: 7px; font-size: var(--t-sm); color: var(--ink-3); }

.field__error {
  margin-top: 7px;
  font-size: var(--t-sm);
  color: var(--alert);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field__error::before { content: '—'; opacity: .55; }

.field.has-error .field__input,
.field.has-error .field__select { border-color: var(--alert); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* --- mensagens ---------------------------------------------------------- */
.flash {
  padding: 13px 18px;
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--t-base);
  margin-bottom: 22px;
}
.flash--ok   { background: var(--ok-bg);    border-color: var(--ok-line);    color: var(--ok-fg); }
.flash--erro { background: var(--alert-bg); border-color: var(--alert-line); color: var(--alert-fg); }

/* --- selo de estado ----------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge--ativa, .badge--pago, .badge--deferido { background: var(--ok-bg); color: var(--ok-fg); }
.badge--pendente, .badge--em_analise, .badge--aberto,
.badge--aguardando_documento, .badge--em_recuperacao { background: var(--warn-bg); color: var(--warn-fg); }
.badge--suspensa, .badge--cancelada, .badge--indeferido,
.badge--inadimplente, .badge--falhou { background: var(--alert-bg); color: var(--alert-fg); }