/*
 * Login y registro (widget de Motors en /authorization/ y en el popup "Ingresar").
 *
 * Solo CSS: el widget y sus textos son del agente "legal" (página 2630) y los colores que
 * trae guardados en Elementor (rojo #ff0032, granate #a80808) no son del sistema visual.
 * Elementor los escribe con selectores del tipo `.elementor-2630 .elementor-element-xxx
 * form`, así que acá se usa `body .stm-login-register-form …` y !important SOLO en
 * fondos, bordes y colores, que es lo que hay que ganarle al CSS guardado del widget.
 *
 * Tipografía: antes se forzaba Montserrat; el sitio pasó a Archivo (diseno.css), así
 * que se deja heredar y solo se ajustan peso y ancho de los títulos.
 */

/* ---------------------------------------------------------------------
 * Títulos
 * ------------------------------------------------------------------ */

body .stm-login-register-form h3 {
	margin: 0 0 14px;
	color: var( --rm-tinta ) !important;
	font-size: 26px;
	font-weight: 800 !important;
	font-stretch: 82%;
	line-height: 1.15;
	text-transform: none !important;
}

body .stm-login-register-form h4 {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------------
 * Paneles
 *
 * Ingresar: panel plano en acero (el mismo azul de la portada). Registro: blanco con
 * borde, porque es largo y un segundo bloque azul de 850 px pesa demasiado al lado.
 * ------------------------------------------------------------------ */

body .stm-login-register-form .stm-login-form form,
body .stm-login-register-form .stm-login-form form.stm_forgot_password_send {
	background: var( --rm-acero ) !important;
	border-radius: 4px;
	box-shadow: none !important;
}

body .stm-login-register-form .stm-login-form form {
	padding: 28px 24px !important;
}

/* El formulario de "olvidé la contraseña" va pegado debajo: sin radio arriba para que
   se lea como continuación del mismo panel. */
body .stm-login-register-form .stm-login-form form.stm_forgot_password_send {
	margin-top: -4px;
	border-radius: 0 0 4px 4px;
}

body .stm-login-register-form .stm-login-form h4,
body .stm-login-register-form .stm-login-form label,
body .stm-login-register-form .stm-login-form a {
	color: #fff !important;
}

body .stm-login-register-form .stm-login-form a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .stm-login-register-form .stm-register-form form {
	padding: 28px 24px 12px !important;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #fff !important;
	box-shadow: none !important;
}

body .stm-login-register-form .stm-register-form h4,
body .stm-login-register-form .stm-register-form label {
	color: var( --rm-tinta ) !important;
}

body .stm-login-register-form .stm-register-form a {
	color: var( --rm-acero ) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * Campos
 * ------------------------------------------------------------------ */

body .stm-login-register-form input[type="text"],
body .stm-login-register-form input[type="email"],
body .stm-login-register-form input[type="tel"],
body .stm-login-register-form input[type="password"] {
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var( --rm-linea ) !important;
	border-radius: 4px !important;
	background: var( --rm-hormigon ) !important;
	color: var( --rm-tinta ) !important;
	font-size: 16px; /* 16 px: con menos, iOS hace zoom al tocar el campo. */
	box-shadow: none !important;
}

/* Sobre el panel acero el gris de campo casi no se distingue: blanco. */
body .stm-login-register-form .stm-login-form input[type="text"],
body .stm-login-register-form .stm-login-form input[type="password"] {
	border-color: transparent !important;
	background: #fff !important;
}

body .stm-login-register-form input::placeholder {
	color: var( --rm-gris );
	opacity: 1;
}

body .stm-login-register-form input:focus-visible {
	outline: 2px solid var( --rm-acero );
	outline-offset: 1px;
}

body .stm-login-register-form .stm-login-form input:focus-visible,
body .stm-login-register-form .stm-login-form a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Motors marca con .form-error los campos que el servidor rechazó. */
body .stm-login-register-form input.form-error,
body .stm-login-register-form input.rm-confirm-password-mismatch {
	border: 2px solid var( --rm-oxido ) !important;
}

/* ---------------------------------------------------------------------
 * Botones: todos en óxido, el único tono de acción del sitio.
 * ------------------------------------------------------------------ */

body .stm-login-register-form input[type="submit"],
body .stm-login-register-form button[type="submit"] {
	min-height: 46px;
	padding: 0 24px;
	border: 0 !important;
	border-radius: 4px !important;
	background: var( --rm-oxido ) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}

body .stm-login-register-form input[type="submit"]:hover,
body .stm-login-register-form button[type="submit"]:hover {
	background: var( --rm-oxido-hover ) !important;
}

/* Registro: Motors lo deja apagado hasta aceptar los términos. Se nota apagado, pero en
   el mismo tono, en vez del gris translúcido que traía. */
body .stm-login-register-form input[type="submit"][disabled],
body .stm-login-register-form input[type="submit"].disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

body .stm-login-register-form input[type="submit"]:focus-visible {
	outline: 2px solid var( --rm-tinta );
	outline-offset: 2px;
}

body .stm-login-register-form .stm-login-form input[type="submit"]:focus-visible {
	outline-color: #fff;
}

/* ---------------------------------------------------------------------
 * Mensajes del servidor (error / éxito)
 *
 * Motors usa la misma clase para los dos; login-register.js agrega --ok cuando el texto
 * es de éxito. Caja blanca con franja lateral: se lee igual sobre el panel acero y
 * sobre el registro blanco.
 * ------------------------------------------------------------------ */

body .stm-login-register-form .stm-message-ajax-validation {
	margin-top: 14px;
	padding: 10px 12px;
	border-left: 4px solid var( --rm-oxido );
	border-radius: 4px;
	background: #fff !important;
	color: var( --rm-tinta ) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none !important;
}

body .stm-login-register-form .stm-message-ajax-validation.rm-msg--ok {
	border-left-color: var( --rm-acero );
}

/* ---------------------------------------------------------------------
 * Campo "Confirmar contraseña": el único hook disponible lo deja al final del
 * formulario, después del botón de enviar. Un script lo reubica bajo
 * "Contraseña"; se mantiene oculto hasta que eso pase para que no se vea
 * saltar de lugar al cargar la página.
 * ------------------------------------------------------------------ */

.stm-register-form .rm-confirm-password-field {
	display: none;
}

.stm-register-form .rm-confirm-password-error {
	display: none;
	margin-top: 6px;
	color: var( --rm-oxido );
	font-size: 13px;
	font-weight: 600;
}

.stm-register-form .rm-confirm-password-error.visible {
	display: block;
}

/* ---------------------------------------------------------------------
 * Teléfono: las dos columnas de Bootstrap se apilan bajo 992 px; bajo 480 px se
 * recorta el relleno para que los campos no queden angostos en 360 px.
 * ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
 * Registro sin nombre de usuario
 *
 * La cuenta se identifica con el correo; el nombre de usuario lo genera el
 * servidor (rm-login-register.php). :has() oculta la columna antes de que
 * cargue el JS, para que no se vea aparecer y desaparecer; el JS la quita
 * igual en navegadores sin :has().
 * ------------------------------------------------------------------ */

body .stm-login-register-form .stm-register-form .col-md-6:has( > input[name="stm_nickname"] ) {
	display: none;
}

.stm-register-form .rm-ayuda-correo {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var( --rm-gris );
}

@media ( max-width: 991px ) {
	body .stm-login-register-form .stm-login-form {
		margin-bottom: 28px;
	}
}

@media ( max-width: 480px ) {
	body .stm-login-register-form .stm-login-form form,
	body .stm-login-register-form .stm-register-form form {
		padding: 20px 16px !important;
	}

	body .stm-login-register-form input[type="submit"] {
		width: 100%;
	}

	body .stm-login-register-form h3 {
		font-size: 22px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body .stm-login-register-form * {
		transition: none !important;
	}
}