/* botondearrepentimiento.css
   Estilos puntuales del formulario "Boton de Arrepentimiento".
   No duplica nada de /css/main.css (tokens, reset, fuentes), de
   /css/help.css (.nx-help, hero, .nx-btn-primary) ni de /css/nx-header.css
   (.nx-spinner del loader global, #nx-page-loader), que ya se reutilizan
   tal cual. Acá solo va lo que no existía en ningún lado: el grid del
   form y los inputs/select/textarea. El feedback de carga/éxito/error
   usa el loader global y showToast() (js/nx-footer-md.js), no hace
   falta CSS propio para eso. */

.nx-repentance-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--nx-space-md);
  margin-top:var(--nx-space-md);
}

.nx-repentance-field{
  display:flex;
  flex-direction:column;
  gap:var(--nx-space-xs);
}

.nx-repentance-field--full{
  grid-column:1 / -1;
}

.nx-repentance-field label{
  font-size:var(--nx-font-sm);
  color:var(--nx-color-text-darks2);
  font-weight:600;
}

.nx-repentance-field input,
.nx-repentance-field select,
.nx-repentance-field textarea{
  font:inherit;
  font-size:var(--nx-font-m);
  color:var(--nx-text-dark);
  background:var(--nx-input-bg);
  border:1px solid var(--nx-border-light);
  border-radius:var(--nx-radius-sm);
  padding:10px 12px;
  box-sizing:border-box;
  width:100%;
}

.nx-repentance-field input:focus,
.nx-repentance-field select:focus,
.nx-repentance-field textarea:focus{
  background:var(--nx-input-bg-focus);
  outline:2px solid var(--nx-color-button-bd);
  outline-offset:1px;
}

.nx-repentance-field textarea{
  resize:vertical;
  min-height:96px;
}

.nx-repentance-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  padding-bottom:40px;

}

.nx-repentance-actions .nx-btn-primary{
  border:none;
  cursor:pointer;
  font-size:var(--nx-font-m);
}

@media (max-width:700px){
  .nx-repentance-form{
    grid-template-columns:1fr;
  }
}