/* Padrão de formulários (mesmo visual do login): bordas definidas, foco suave, botão principal arredondado.
   Funciona com Bootstrap 4 e 5. Cor do foco via variável: --fm-foco (padrão verde; a área do cliente redefine para azul). */
:root { --fm-foco: #16a34a; --fm-foco-sombra: rgba(22,163,74,.15); --fm-borda: #a9b6cc; --fm-borda-hover: #8b9bb5; --fm-tinta: #0f1b33; --fm-suave: #64748b; --fm-erro: #ef4444; --fm-ok: #22c55e; }

label, .col-form-label { font-size: 13px; font-weight: 600; color: #25324d; }

.form-control, .form-select, .form-select, select.form-control,
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input[type=search], input[type=date], input[type=time], input[type=datetime-local] {
  border: 1.5px solid var(--fm-borda); border-radius: 10px; background-color: #fff; color: var(--fm-tinta); font-size: 15px;
  transition: border-color .15s, box-shadow .15s, background-color .15s; }
.form-control, .form-select, .form-select { min-height: 44px; padding: .5rem .85rem; }
textarea.form-control { min-height: 96px; }
.form-control-sm, .form-select-sm, .form-select-sm { min-height: 34px; border-radius: 8px; font-size: 13.5px; padding: .25rem .6rem; }
.form-control-lg, .form-select-lg, .form-select-lg { min-height: 50px; font-size: 16px; }
.form-control::placeholder { color: #a3aec2; }
.form-control:hover, .form-select:hover, .form-select:hover { border-color: var(--fm-borda-hover); }
.form-control:focus, .form-select:focus, .form-select:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=search]:focus {
  border-color: var(--fm-foco); background-color: #fff; box-shadow: 0 0 0 4px var(--fm-foco-sombra); outline: 0; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #f1f5f9; color: var(--fm-suave); }

/* validação */
.form-control.is-invalid, .was-validated .form-control:invalid, .form-select.is-invalid { border-color: var(--fm-erro); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.form-control.is-valid, .was-validated .form-control:valid, .form-select.is-valid { border-color: var(--fm-ok); }
.form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow: 0 0 0 4px rgba(34,197,94,.15); }

/* grupo com ícone/addon */
.input-group > .form-control, .input-group > .form-select, .input-group > .form-select { border-radius: 0 10px 10px 0; }
.input-group > :first-child:not(:only-child) { border-radius: 10px 0 0 10px; }
.input-group-text, .input-group-prepend .input-group-text, .input-group-append .input-group-text { border: 1.5px solid var(--fm-borda); background: #f8fafc; color: #94a3b8; }
.input-group:focus-within .input-group-text { border-color: var(--fm-foco); color: var(--fm-foco); }

/* campo com ícone interno (mesmo markup do login): <div class="fm-in"><i class="fas fa-envelope ic"></i><input class="form-control"></div> */
.fm-in { position: relative; }
.fm-in > i.ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px; pointer-events: none; transition: color .15s; }
.fm-in > .form-control { padding-left: 42px; }
.fm-in:focus-within > i.ic { color: var(--fm-foco); }

/* checkbox / radio */
input[type=checkbox], input[type=radio] { accent-color: var(--fm-foco); }
.form-check-input:checked { background-color: var(--fm-foco); border-color: var(--fm-foco); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--fm-foco-sombra); border-color: var(--fm-foco); }

/* preenchimento automático do navegador não pinta o campo de azul */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill, textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--fm-tinta) !important; caret-color: var(--fm-tinta); transition: background-color 9999s ease-out 0s; }

/* botão principal arredondado com efeito suave (usar em login e ações principais de formulário) */
.fm-btn { width: 100%; height: 50px; border: 0; border-radius: 10px; color: #fff; font-size: 15.5px; font-weight: 600; cursor: pointer; margin-top: 6px;
  background: linear-gradient(135deg, var(--fm-foco), var(--fm-foco)); background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.06)); background-color: var(--fm-foco);
  box-shadow: 0 6px 16px var(--fm-foco-sombra); transition: transform .12s, box-shadow .12s, filter .12s; }
.fm-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 20px var(--fm-foco-sombra); }
.fm-btn:active { transform: translateY(1px); }
.fm-btn:focus-visible { outline: 3px solid var(--fm-foco-sombra); outline-offset: 2px; }
.fm-seguro { text-align: center; color: #94a3b8; font-size: 12px; margin-top: 22px; }
.fm-seguro i { margin-right: 5px; }

@media (prefers-reduced-motion: reduce) { .form-control, .form-select, .fm-btn { transition: none !important; } }