/* =====================================================
   ERROS INLINE POR CAMPO
===================================================== */
/*
Exemplo:
<div class="field field--error">
  <label class="field__label" for="email">Email</label>
  <input id="email" class="input is-invalid" type="email" placeholder="exemplo@dominio.com">
  <div class="field__error" id="email-err">O email não é válido.</div>
</div>
*/
.field__error{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  font-size: .9rem;
  color: var(--danger);
}

/* Ícone simples via pseudo-elemento (bolinha com “!”) */
.field__error::before{
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  font-size: .75rem;
  line-height: 1;
  margin-top: 2px;
}


/* Estados utilitários (caso não uses field--error) */
/*
<input class="input is-invalid">   → aplica borda vermelha
<input class="input is-valid">     → aplica borda verde
*/
.is-invalid.input,
.is-invalid.textarea,
.is-invalid.select{
  border-color: var(--danger);
  box-shadow: var(--shadow), 0 0 0 4px rgba(243,18,96,.15);
}
.is-valid.input,
.is-valid.textarea,
.is-valid.select{
  border-color: var(--ok);
  box-shadow: var(--shadow), 0 0 0 4px rgba(23,201,100,.15);
}

/* =====================================================
   BANNER GLOBAL DE FORMULÁRIO (erro, sucesso, info)
===================================================== */
/*
Coloca no topo do formulário (logo a seguir ao <form> ou .form):

<div class="form">
  <div class="form__banner form__banner--error" >
    <strong>Não foi possível gravar.</strong> Verifica os campos destacados.
  </div>

  <!-- campos aqui... -->

  <div class="actions">
    <button class="btn btn--secondary">Cancelar</button>
    <button class="btn btn--primary">Tentar novamente</button>
  </div>
</div>
*/
.form__banner{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: .95rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
}

/* Ícone base (círculo) */
.form__banner::before{
  content: "";
  width: 20px; height: 20px;
  border-radius: 50%;
  margin-top: 2px;
}

/* VARIANTES */
.form__banner--error{
  border-color: rgba(239,68,68,.35);
  background: #fff5f5;
  color: #7f1d1d;
}
.form__banner--error::before{
  background:
    radial-gradient(circle at 50% 50%, #f31260 0 60%, transparent 60%),
    conic-gradient(from 0turn, #f31260 0turn .02turn, transparent .02turn .48turn, #f31260 .48turn .5turn, transparent .5turn 1turn);
  /* círculo vermelho + “!” estilizado */
}

.form__banner--success{
  border-color: rgba(16,185,129,.35);
  background: #ecfdf5;
  color: #064e3b;
}
.form__banner--success::before{
  background:
    radial-gradient(circle at 50% 50%, #17c964 0 60%, transparent 60%),
    /* “check” simples: duas barras a 45º */
    conic-gradient(from 0.25turn, transparent 0 .36turn, #17c964 .36turn .42turn, transparent .42turn .6turn, #17c964 .6turn .66turn, transparent .66turn 1turn);
}

.form__banner--info{
  border-color: rgba(0,111,238,.35);
  background: #eff6ff;
  color: #0c4a6e;
}
.form__banner--info::before{
  background:
    radial-gradient(circle at 50% 50%, #006FEE 0 60%, transparent 60%),
    conic-gradient(from 0turn, #006FEE 0turn .02turn, transparent .02turn .48turn, #006FEE .48turn .5turn, transparent .5turn 1turn);
  /* círculo azul + “i” estilizado */
}

/* Conteúdo com títulos e listas dentro do banner (opcional)
<div class="form__banner form__banner--error">
  <div>
    <strong>Ocorreram erros:</strong>
    <ul class="form__banner-list">
      <li>O email é obrigatório</li>
      <li>A password deve ter pelo menos 8 caracteres</li>
    </ul>
  </div>
</div>
*/
.form__banner strong{ font-weight: 800; }
.form__banner-list{
  padding-left: 18px; margin: 6px 0 0;
  color: inherit; font-size: .95rem;
}