/**
 * Formulario de publicacion: una sola rejilla y una sola forma de campo.
 *
 * Motors mezclaba tres estilos en la misma pantalla: el panel azul con select2 sin radio,
 * el campo Año como input claro dentro de ese panel oscuro, y el bloque de abajo con la
 * etiqueta al costado y anchos desparejos.
 *
 * formulario.js desmonta select2 y marca los 12 campos con `.rm-campo`; aca se les da
 * forma. Los `!important` son deliberados: el plugin declara sus campos con cadenas de
 * cuatro y cinco clases, y competir en especificidad con cada una era insostenible.
 */

/* -------------------------------------------------------------------------
 * Rejilla comun
 * ---------------------------------------------------------------------- */

/*
 * El bloque de abajo lleva la cadena completa de Motors a proposito: el plugin lo declara
 * con esas cuatro clases (add-listing.css), asi que un `.stm-form-1-end-unit` suelto
 * pierde y el bloque se queda en flex.
 */
.rm-cascada__niveles,
.stm-form1-intro-unit .row,
.stm-form-price-edit > .row.stm-relative,
.stm-vl-plugin-pure .stm_add_car_form .stm_add_car_form_1 .stm-form-1-end-unit {
	display: grid;
	/* minmax(0,…) y no 1fr a secas: con 1fr un campo ancho agranda su columna y las
	   tres dejan de ser iguales. */
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 18px 20px;
}

@media ( max-width: 767px ) {
	.rm-cascada__niveles,
	.stm-form1-intro-unit .row,
	.stm-form-price-edit > .row.stm-relative,
	.stm-vl-plugin-pure .stm_add_car_form .stm_add_car_form_1 .stm-form-1-end-unit {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 575px ) {
	.rm-cascada__niveles,
	.stm-form1-intro-unit .row,
	.stm-form-price-edit > .row.stm-relative,
	.stm-vl-plugin-pure .stm_add_car_form .stm_add_car_form_1 .stm-form-1-end-unit {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.rm-cascada {
	margin-bottom: 18px;
}

/* Mismos 30 px que el relleno del panel: asi las tres columnas de abajo caen justo
   debajo de las tres de arriba. Su `margin: 41px -15px` tambien se anula, porque sacaba
   el bloque 15 px fuera del panel. */
.stm-vl-plugin-pure .stm_add_car_form .stm_add_car_form_1 .stm-form-1-end-unit,
.stm-form-price-edit > .row.stm-relative {
	margin: 41px 0 30px;
	padding: 0 30px;
}

.stm-form-price-edit > .row.stm-relative {
	margin: 0;
}

/* El margen negativo de .row descolocaba la fila de marca/año/ciudad 15 px a la
   izquierda respecto de la cascada, que no lo tiene. */
.stm-form1-intro-unit .row {
	margin: 0;
}

/* El relleno lateral va en el contenedor, no en cada celda: si queda en la celda, el
   campo es mas angosto que su columna y no coincide con el de arriba. */
.stm-form1-intro-unit .row > div,
.stm-form-price-edit > .row.stm-relative > div,
.stm-vl-plugin-pure .stm_add_car_form .stm_add_car_form_1 .stm-form-1-end-unit .stm-form-1-quarter {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	flex: none;
}

/* Motors envuelve el precio en una tarjeta con relleno de 40 px y fondo propio. Se
   aplana: dejaba el precio y la moneda 40 px adentro y 80 px mas angostos que el resto. */
.stm-vl-plugin-pure .stm-form-price-edit .stm_price_input {
	min-width: 0;
	padding: 0;
	background-color: transparent;
}

/* La ubicacion, si algun dia se activa, ocupa la fila entera. */
.stm-form-1-end-unit > .stn-add-car-location-wrap {
	grid-column: 1 / -1;
}

/* -------------------------------------------------------------------------
 * Etiqueta siempre arriba
 * ---------------------------------------------------------------------- */

/* Motors escribe el campo primero y la etiqueta despues, y las pone lado a lado.
   Con `order` se sube la etiqueta sin tocar el HTML del plugin. */
.stm-form-1-end-unit > .stm-form-1-quarter {
	display: flex;
	flex-direction: column;
}

.stm-form-1-end-unit .stm-label {
	order: 1;
	float: none;
}

/*
 * `flex: none` no es decorativo. Motors le pone `flex: 1 1 0%` a los inputs porque en su
 * diseño la caja es horizontal y el campo ocupa lo que sobra al lado de la etiqueta. Al
 * girar la caja a vertical, ese mismo `flex` los estira a lo ALTO.
 */
.stm-form-1-end-unit .stm-form-1-quarter > input,
.stm-form-1-end-unit .stm-form-1-quarter > select {
	order: 2;
	flex: none;
	float: none;
}

.rm-cascada .rm-nivel label,
.stm-form1-intro-unit .stm-label,
.stm-form-1-end-unit .stm-label,
.stm-form-price-edit .stm_price_input .stm_label,
.rm-cascada__titulo {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.rm-cascada .rm-nivel label,
.rm-cascada__titulo,
.stm-form1-intro-unit .stm-label {
	color: var( --motors-contrast-text-color, #ffffff );
}

.stm-form-1-end-unit .stm-label,
.stm-form-price-edit .stm_price_input .stm_label {
	color: var( --rm-tinta );
}

/* -------------------------------------------------------------------------
 * La forma de campo: una sola, para los 12
 * ---------------------------------------------------------------------- */

/*
 * `opacity` y `visibility` van si o si: Motors apaga TODOS los <select> nativos del
 * formulario para dibujar select2 encima, y al desmontarlo esa regla los borraria.
 *
 *     .stm-vl-plugin-pure select { opacity: 0; visibility: hidden; }   (add-listing.css)
 */
.rm-campo {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 44px !important;
	/* Motors les da `flex: 1 1 0%`; dentro de una caja vertical eso le gana al alto y el
	   Año quedaba en 40 px mientras el resto media 44. */
	flex: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	line-height: 42px !important;
	opacity: 1 !important;
	visibility: visible !important;
	box-shadow: none !important;
}

select.rm-campo {
	padding: 0 34px 0 12px !important;
	appearance: none;
	-webkit-appearance: none;
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	cursor: pointer;
}

input.rm-campo {
	padding: 0 12px !important;
}

/* El desplegable abierto lo pinta el navegador sobre fondo claro y hereda el color del
   select. Sin esto, en el panel oscuro quedan opciones blancas sobre popup blanco. */
.rm-campo option {
	background-color: #ffffff;
	color: var( --rm-tinta );
}

/* --- Dentro del panel azul --- */

.stm-form1-intro-unit .rm-campo,
.rm-cascada .rm-campo {
	border-color: rgba( 255, 255, 255, 0.25 ) !important;
	background-color: transparent !important;
	color: var( --motors-contrast-text-color, #ffffff ) !important;
}

.stm-form1-intro-unit select.rm-campo,
.rm-cascada select.rm-campo {
	/* Flecha dibujada en el propio fondo: evita depender de un icono externo. */
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E" );
}

.stm-form1-intro-unit .rm-campo::placeholder {
	color: rgba( 255, 255, 255, 0.6 );
}

.stm-form1-intro-unit .rm-campo:focus,
.rm-cascada .rm-campo:focus {
	outline: 2px solid var( --motors-contrast-text-color, #ffffff );
	outline-offset: 1px;
}

/* --- Fuera del panel, sobre fondo claro --- */

.stm-form-1-end-unit .rm-campo,
.stm-form-price-edit .rm-campo {
	border-color: var( --rm-linea ) !important;
	background-color: #ffffff !important;
	color: var( --rm-tinta ) !important;
}

.stm-form-1-end-unit select.rm-campo,
.stm-form-price-edit select.rm-campo {
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235e6975' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E" );
}

.stm-form-1-end-unit .rm-campo::placeholder,
.stm-form-price-edit .rm-campo::placeholder {
	color: var( --rm-gris );
}

.stm-form-1-end-unit .rm-campo:focus,
.stm-form-price-edit .rm-campo:focus {
	outline: 2px solid var( --rm-acero );
	outline-offset: 1px;
}

/* --- Red de seguridad: si select2 no se pudo desmontar, que al menos calce --- */

.stm-form1-intro-unit .select2-container,
.stm-form-1-end-unit .select2-container,
.rm-moneda .select2-container {
	width: 100% !important;
}

.stm-form1-intro-unit .select2-selection,
.stm-form-1-end-unit .select2-selection,
.rm-moneda .select2-selection {
	height: 44px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
}

.stm-form1-intro-unit .select2-selection__rendered,
.stm-form-1-end-unit .select2-selection__rendered,
.rm-moneda .select2-selection__rendered {
	padding: 0 28px 0 12px !important;
	line-height: 42px !important;
	border: 0 !important;
}

.stm-form1-intro-unit .select2-selection__arrow,
.stm-form-1-end-unit .select2-selection__arrow,
.rm-moneda .select2-selection__arrow {
	height: 42px;
	right: 6px;
}

/* -------------------------------------------------------------------------
 * Selectores en cascada (categoria y ubicacion)
 * ---------------------------------------------------------------------- */

/* "Ubicación" encabeza sus tres niveles: sin el, País/Región/Ciudad se leian como tres
   campos sueltos mas y no como un solo dato. Es un poco mas chico que las etiquetas de
   campo para que se note que esta un escalon arriba. */
.rm-cascada__titulo {
	/* Subtitulo del grupo, no una etiqueta mas: un punto mas grande y en negrita, sin
	   mayusculas con tracking (el sistema visual del sitio no las usa). */
	margin: 8px 0 10px;
	font-size: 16px;
	font-weight: 700;
	font-stretch: 82%;
}

.rm-nivel {
	min-width: 0;
	animation: rm-aparece 0.18s ease-out;
}

/* Cada nivel nuevo entra con un desplazamiento corto, para que se note que aparecio
   algo abajo y el usuario no crea que el formulario se quedo quieto. */
@keyframes rm-aparece {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.rm-nivel { animation: none; }
}

/* -------------------------------------------------------------------------
 * Precio: el simbolo de la moneda, dentro del campo
 * ---------------------------------------------------------------------- */

.rm-precio {
	position: relative;
}

/* `pointer-events: none` para que el clic sobre el simbolo caiga en el input y no al
   costado — si no, tocar justo ahi no enfoca el campo. El relleno izquierdo del campo lo
   calcula formulario.js midiendo este bloque, porque "$ CLP" y "S/" no ocupan lo mismo. */
.rm-precio__simbolo {
	position: absolute;
	top: 0;
	left: 12px;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 5px;
	height: 44px;
	line-height: 44px;
	color: var( --rm-tinta );
	pointer-events: none;
	white-space: nowrap;
}

.rm-precio__signo {
	font-size: 17px;
	font-weight: 700;
}

.rm-precio__codigo {
	font-size: 12px;
	font-weight: 600;
	color: var( --rm-gris );
}

/* El monto es lo que importa en la caja: mas grande y con cifras de ancho fijo, para
   que los miles no bailen mientras se escribe. Piso de 72 px por si el JS no llega a
   medir el simbolo. */
.rm-precio input.rm-precio__campo {
	padding-left: 72px !important;
	font-size: 18px !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	/* Motors anima todo cambio de los inputs: el hueco del simbolo se deslizaba cada vez
	   que cambiaba la moneda. */
	transition: border-color 0.15s !important;
}

/* El select original de Motors: sigue en el formulario y sigue enviandose, pero ya no
   se ve. */
.rm-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Pasos: cada seccion del formulario se lee como un paso numerado
 * ---------------------------------------------------------------------- */

/*
 * Motors titula las secciones en mayusculas con tracking negativo y las separa con una
 * linea gris, sin ninguna jerarquia: en el celular el formulario era una sola tira larga
 * donde no se sabia cuanto faltaba. El numero va con un contador CSS y no escrito en el
 * texto para que se reacomode solo cuando el plan agrega o quita la seccion de video.
 */
.stm_add_car_form {
	counter-reset: rm-paso;
}

.stm_add_car_form .stm-car-listing-data-single.stm-border-top-unit {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 40px 0 20px !important;
	padding: 0 0 12px !important;
	border-top: 0 !important;
	border-bottom: 1px solid var( --rm-linea ) !important;
}

.stm_add_car_form .stm-car-listing-data-single.stm-border-top-unit > .title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	font-stretch: 82%;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var( --rm-tinta ) !important;
}

.stm_add_car_form .stm-car-listing-data-single.stm-border-top-unit > .title::before {
	counter-increment: rm-paso;
	content: counter( rm-paso );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: 12px;
	border-radius: 4px;
	background: var( --rm-acero );
	color: #ffffff;
	font-size: 17px;
	font-stretch: 100%;
	font-variant-numeric: tabular-nums;
	vertical-align: 2px;
}

/* El primer paso arranca pegado al encabezado de la pagina. */
.stm_add_car_form .stm_add_car_form_1 .stm-car-listing-data-single.stm-border-top-unit:first-child {
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
 * Etiquetas
 * ---------------------------------------------------------------------- */

/* Una sola voz para todas las etiquetas: 14 px, peso 600. Motors mezclaba 13, 14 y 15 px
   con pesos distintos segun la seccion. */
.stm-form-1-end-unit .stm-label,
.stm-form1-intro-unit .stm-label,
.rm-cascada .rm-nivel label,
.stm-vl-plugin-pure .stm-form-price-edit .stm_price_input .stm_label {
	margin-bottom: 6px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* La etiqueta del precio quedaba blanca sobre blanco: Motors la pinta para su tarjeta
   oscura, que ya no esta. */
.stm-vl-plugin-pure .stm-form-price-edit .stm_price_input .stm_label {
	color: var( --rm-tinta ) !important;
}

/* -------------------------------------------------------------------------
 * Errores
 * ---------------------------------------------------------------------- */

/* Motors marca el campo que falta con `.required_field` y un borde rojo de 1 px que en
   el celular casi no se ve. Borde mas grueso en el oxido del sitio (no otro rojo). */
/* `body` delante para ganarle a `.stm-form-price-edit .rm-campo`, que declara el borde
   normal con !important y no siempre queda dentro de .stm_add_car_form. */
body .rm-campo.required_field,
body .stm_add_car_form input.required_field,
body .stm_add_car_form textarea.required_field {
	border-color: var( --rm-oxido ) !important;
	box-shadow: inset 0 0 0 1px var( --rm-oxido ) !important;
}

.stm_add_car_form .required_field + label,
.stm_add_car_form label.required_field {
	outline: 2px solid var( --rm-oxido );
	outline-offset: 2px;
}

/* El resumen de errores sale junto al boton de envio: caja con borde oxido y texto
   oscuro legible, en vez de texto rojo suelto. */
.stm-add-a-car-message {
	margin: 16px 0 0;
	padding: 12px 14px 12px 16px;
	border: 1px solid var( --rm-oxido );
	border-left-width: 4px;
	border-radius: 4px;
	background: #ffffff;
	color: var( --rm-tinta ) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* -------------------------------------------------------------------------
 * Envio
 * ---------------------------------------------------------------------- */

/* Solo tamaño y letra: el color del boton lo define botones.css para todo el sitio. */
.stm-form-checking-user .btn-add-edit button[type="submit"] {
	min-height: 48px;
	padding: 0 24px !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* El ícono de Motors va con `position: absolute` pensado para su relleno original: con el
   de arriba quedaba encima de «Enviar» (comentario del dueño: «error visual»). */
.stm-form-checking-user .btn-add-edit button[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.stm-form-checking-user .btn-add-edit button[type="submit"] i {
	position: static !important;
	margin: 0 !important;
	font-size: 18px !important;
	line-height: 1;
}

.stm_add_car_form button:focus-visible,
.stm-form-checking-user button:focus-visible {
	outline: 2px solid var( --rm-acero );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Celular
 * ---------------------------------------------------------------------- */

@media ( max-width: 575px ) {
	.stm_add_car_form .stm-car-listing-data-single.stm-border-top-unit {
		margin-top: 32px !important;
	}

	.stm_add_car_form .stm-car-listing-data-single.stm-border-top-unit > .title {
		font-size: 21px !important;
	}

	/* Los 30 px de relleno del panel azul dejaban los campos en 220 px de ancho en un
	   telefono de 375. Se bajan a 16 px en el panel y en los bloques que se alinean con
	   el, para que las columnas sigan cayendo una debajo de la otra. */
	.stm-vl-plugin-pure .stm_add_car_form .stm-form1-intro-unit {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.stm-vl-plugin-pure .stm_add_car_form .stm_add_car_form_1 .stm-form-1-end-unit,
	.stm-form-price-edit > .row.stm-relative {
		padding: 0 16px;
	}

	/* Boton de envio a todo el ancho: es la accion final y el pulgar lo encuentra. */
	.stm-form-checking-user .add-car-btns-wrap {
		flex: 1 1 100%;
		padding: 0 !important;
	}

	.stm-form-checking-user .add-car-btns-wrap .btn-add-edit,
	.stm-form-checking-user .btn-add-edit button[type="submit"] {
		width: 100% !important;
	}

	/* frontend_styles.css de Motors topa todo boton de envio en 190 px. */
	.stm-form-checking-user .btn-add-edit button[type="submit"] {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   Paneles azules: el mismo acero del resto del sitio, sin depender de Motors
   ------------------------------------------------------------------------- */

/* Motors pinta estos tres paneles con `var(--motors-bg-contrast)`, que sale de sus
   opciones (Motors → estilos). Si esa opción vuelve a cambiar, el formulario quedaría
   con un azul distinto al de la cabecera de la portada y el pie, que fue justo lo que
   el dueño notó ("el azul de esta zona parece ser más oscuro"). Se fija al token para
   que haya un solo azul. Motors antepone `.stm-vl-plugin-pure` (clase del body): se usa
   `body.stm-vl-plugin-pure` para ganarle por un punto, y la variante sin esa clase por si
   Motors deja de ponerla. */
body.stm-vl-plugin-pure .stm_add_car_form .stm_add_car_form_1 .stm-form1-intro-unit,
body.stm-vl-plugin-pure .stm_add_car_form .stm-form-4-videos .stm-add-videos-unit,
body .stm_add_car_form .stm_add_car_form_1 .stm-form1-intro-unit,
body .stm_add_car_form .stm-form-4-videos .stm-add-videos-unit,
body .stm-add-a-car-login .stm-login-form form {
	background-color: var( --rm-acero );
	background-image: none;
}

/* La caja de "quién publica" usaba #f0f3f7, un gris azulado que no es del sistema:
   al lado del panel acero se leía como un tercer tono de azul. */
body.stm-vl-plugin-pure .stm_add_car_form .stm-form-checking-user,
body .stm_add_car_form .stm-form-checking-user {
	background-color: var( --rm-hormigon );
}

/* -------------------------------------------------------------------------
 * Plan al final del formulario
 *
 * Las tarjetas (rm-formulario.php) van dentro de la caja «quién publica» de Motors, cuyo
 * fondo cambia según la sesión: hormigón para quien aún no ingresó y el acero del panel
 * (`body.logged-in … .stm-form-checking-user`) para quien ya tiene sesión, que es cuando se
 * ven los planes. Para que los textos se lean en los dos casos, el bloque lleva su propio
 * panel de hormigón y cada tarjeta es blanca, con borde de línea, como las del listado.
 * ---------------------------------------------------------------------- */

.rm-planes {
	box-sizing: border-box;
	min-width: 0;
	margin: 0 0 24px;
	padding: 24px;
	border: 0;
	border-radius: 4px;
	background: var( --rm-hormigon );
}

.rm-planes__titulo {
	float: left;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	color: var( --rm-tinta );
	font-size: 24px;
	font-stretch: 82%;
	font-weight: 800;
	line-height: 1.2;
}

.rm-planes__ayuda {
	clear: both;
	margin: 0 0 16px;
	color: var( --rm-gris );
	font-size: 15px;
	line-height: 1.5;
}

.rm-planes__lista {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
}

/* Rejilla de dos columnas (círculo + texto) y no `position: absolute` para el círculo: en
   un contenedor flex Chrome medía el `left` desde el borde del relleno y lo corría 48 px. */
.rm-plan {
	display: grid;
	grid-template-columns: 20px minmax( 0, 1fr );
	align-content: start;
	column-gap: 12px;
	row-gap: 6px;
	margin: 0;
	padding: 16px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: #ffffff;
	color: var( --rm-tinta );
	cursor: pointer;
}

.rm-plan > :not( input ) {
	grid-column: 2;
}

/* Motors lo declara `position: relative; top: -1px` con `.stm-vl-plugin-pure input[type=radio]`:
   de ahí la clase de más para ganarle. */
.rm-planes .rm-plan > input[type="radio"] {
	grid-column: 1;
	grid-row: 1 / span 6;
	position: static;
	top: 0;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var( --rm-acero );
}

/* Elegida: borde grueso en el acero del sitio y fondo apenas tintado. */
.rm-plan:has( input:checked ) {
	border-color: var( --rm-acero );
	box-shadow: inset 0 0 0 1px var( --rm-acero );
	background: var( --rm-acero-claro );
}

.rm-plan:has( input:focus-visible ) {
	outline: 2px solid var( --rm-acero );
	outline-offset: 2px;
}

.rm-plan__nombre {
	font-size: 18px;
	font-stretch: 82%;
	font-weight: 800;
	line-height: 1.25;
}

.rm-plan__precio {
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.2;
}

.rm-plan__datos {
	margin: 6px 0 0;
	padding: 0 0 0 18px;
	color: var( --rm-gris );
	font-size: 14px;
	line-height: 1.45;
}

.rm-plan__datos li {
	margin: 0 0 4px;
}

/* Básica ya usada: se ve, pero apagada, y dice por qué. */
.rm-plan--bloqueado {
	cursor: not-allowed;
	opacity: 0.6;
}

.rm-plan__aviso {
	color: var( --rm-tinta );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* Mismo recuadro con borde óxido que el resumen de errores de Motors (arriba). */
.rm-planes__error {
	margin: 16px 0 0;
	padding: 12px 14px 12px 16px;
	border: 1px solid var( --rm-oxido );
	border-left-width: 4px;
	border-radius: 4px;
	background: #ffffff;
	color: var( --rm-tinta );
	font-size: 15px;
	line-height: 1.5;
}

.rm-planes__error[hidden] {
	display: none;
}

@media ( max-width: 900px ) {
	.rm-planes {
		padding: 16px;
	}

	.rm-planes__lista {
		grid-template-columns: 1fr;
	}
}

/* «Mostrar mi perfil público» en el recuadro del usuario, arriba del formulario: distrae en
   medio de la publicación y abre otra pestaña (pedido del dueño, 2026-10-07). «Cerrar sesión»
   se queda: sirve para cambiar de cuenta. */
.stm-add-a-car-user .right-info > a[ href*="view-myself" ] {
	display: none;
}

/* «Otra marca (escríbela)» (rm-marcas.php, marcas.js): el campo aparece bajo el desplegable. */
.rm-marca-otra {
	margin-top: 8px;
}

.rm-marca-otra label {
	display: grid;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
}

.rm-marca-otra input {
	width: 100%;
}