/* =========================================================
   MG Solicitudes  ·  formulario publico
   Sistemas Digitales MG  ·  https://sistemasmg.es
   Nota de mantenimiento: el tema Impreza estiliza los campos y el boton con
   selectores de mucho peso, del tipo
   `[type="submit"]:not(.w-btn):not(.button)`, que ganaban a una sola clase.
   Por eso aqui las clases van repetidas (`.tlm-form.tlm-form`): sube la
   especificidad sin recurrir a !important en todo.
   ========================================================= */

.tlm-form{
  --tlm-ink:#0A0E14;
  --tlm-ink-2:#47515F;
  --tlm-ink-3:#6B7481;
  --tlm-line:#E1E6EC;
  --tlm-red:#B21E24;
  --tlm-red-br:#CE2228;
  --tlm-red-dk:#7E0D12;
  --tlm-bg:#FFFFFF;
  font-family:inherit;
  color:var(--tlm-ink);
}
.tlm-form *{box-sizing:border-box;}
.tlm-form p{margin:0;}

.tlm-form .tlm-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px;}
.tlm-form .tlm-f{margin:0 0 15px 0;}
.tlm-form .tlm-f label{display:block;font-size:13px;font-weight:500;color:var(--tlm-ink-2);margin-bottom:6px;}

.tlm-form.tlm-form input[type=text],
.tlm-form.tlm-form input[type=email],
.tlm-form.tlm-form input[type=tel],
.tlm-form.tlm-form textarea{
  width:100%;padding:11px 14px;font-family:inherit;font-size:15px;line-height:1.4;
  color:var(--tlm-ink);background:var(--tlm-bg);
  border:1px solid var(--tlm-line);border-radius:10px;
  min-height:0;height:auto;box-shadow:none;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tlm-form.tlm-form textarea{resize:vertical;min-height:0;height:78px;}
.tlm-form.tlm-form input:focus,
.tlm-form.tlm-form textarea:focus{
  outline:none;border-color:var(--tlm-red);box-shadow:0 0 0 4px rgba(178,30,36,.08);
}
.tlm-form.tlm-form ::placeholder{color:var(--tlm-ink-3);opacity:1;}

/* consentimiento */
.tlm-form .tlm-f-acepta{font-size:13px;color:var(--tlm-ink-3);margin:0;}
.tlm-form.tlm-form .tlm-f-acepta label{padding-top:6px;}
.tlm-form .tlm-f-acepta label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:400;line-height:1.5;margin:0;}
.tlm-form.tlm-form .tlm-f-acepta input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:0 0 auto;margin:1px 0 0 0;padding:0;
  border:1px solid #B2BAC4;border-radius:5px;background:var(--tlm-bg);cursor:pointer;
  box-shadow:none;transition:background .25s ease,border-color .25s ease;
}
.tlm-form.tlm-form .tlm-f-acepta input[type=checkbox]:checked{background:var(--tlm-red);border-color:var(--tlm-red);}

/* Campo trampa: nunca debe verse. Va oculto por partida doble porque el tema
   puede reescribir la posicion de los elementos del formulario. */
.tlm-form .tlm-trampa,
.tlm-form.tlm-form .tlm-trampa{
  display:none !important;
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;height:1px !important;
  overflow:hidden !important;
}

/* boton
   El margen superior va en el boton y no en su parrafo: la portada declara
   `#tlm p{margin:0}` con un identificador, y eso gana a cualquier clase. */
.tlm-form .tlm-f-envia{margin:0;}
.tlm-form.tlm-form .tlm-enviar{
  position:relative;overflow:hidden;display:block;
  margin-top:24px;
  width:100%;padding:16px 26px;font-family:inherit;font-size:16px;font-weight:600;
  letter-spacing:-0.01em;color:#FFFFFF;
  background:linear-gradient(140deg,#CE2228 0%,#B21E24 48%,#7E0D12 100%);
  border:none;border-radius:999px;cursor:pointer;
  box-shadow:0 12px 30px -14px rgba(126,13,18,.85);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,filter .3s ease;
}
.tlm-form.tlm-form .tlm-enviar:hover{
  transform:translateY(-3px);
  filter:saturate(1.12) brightness(1.06);
  box-shadow:0 18px 40px -16px rgba(126,13,18,.9);
}
.tlm-form.tlm-form .tlm-enviar:active{transform:translateY(-1px);}
.tlm-form.tlm-form .tlm-enviar[disabled]{opacity:.65;cursor:progress;transform:none;filter:none;}

/* errores */
.tlm-form.tlm-form .tlm-mal{border-color:var(--tlm-red);box-shadow:0 0 0 3px rgba(178,30,36,.09);}
.tlm-form .tlm-error-campo{display:block;color:#A5111A;font-size:12.5px;margin-top:5px;}

.tlm-form .tlm-aviso{margin:18px 0 0;padding:0;font-size:14px;line-height:1.55;border-radius:11px;}
.tlm-form .tlm-aviso.tlm-visible{padding:13px 16px;border:1px solid var(--tlm-line);background:#F6F8FA;color:var(--tlm-ink-2);}
.tlm-form .tlm-aviso.tlm-ok{border-color:#A9D6BC;background:#F1FAF4;color:#14532B;}
.tlm-form .tlm-aviso.tlm-ko{border-color:#E6B0B4;background:#FDF5F5;color:#7E0D12;}

@media (max-width:620px){
  .tlm-form.tlm-form input[type=text],
  .tlm-form.tlm-form input[type=email],
  .tlm-form.tlm-form input[type=tel],
  .tlm-form.tlm-form textarea{font-size:16px;padding:12px 14px;}
  .tlm-form.tlm-form textarea{height:86px;}
  .tlm-form.tlm-form .tlm-enviar{margin-top:20px;}
}

@media (prefers-reduced-motion:reduce){
  .tlm-form *{transition-duration:.01ms !important;}
}