/**
 * Avisos de stock.
 *
 * Todo el color sale de los tokens --vor-* que declara frontend.css, así que el
 * bloque cambia con la paleta elegida en los ajustes sin tocar una línea de
 * aquí. No hay ni un color escrito a mano: los degradados y los tintes se
 * componen con rgb(var(--vor-…-rgb) / alfa), que es la única forma de teñir algo
 * cuando el color base es una variable.
 */

.vor-aviso {
	margin: 40px 0 0;
	scroll-margin-top: 24px;
}

/**
 * Cuerpo del bloque.
 *
 * Dos columnas en escritorio: el argumento a la izquierda y el formulario a la
 * derecha. El formulario es lo que hay que rellenar, así que va donde termina la
 * lectura.
 *
 * Es la ÚNICA superficie del bloque. Antes el formulario traía su propio borde y
 * su propio fondo, y el resultado era una tarjeta dentro de otra: dos marcos
 * concéntricos que no separaban nada, porque las dos mitades son la misma cosa.
 * Ahora las columnas se separan con un filete, que es lo que de verdad hacía
 * falta. Si algo vuelve a necesitar borde aquí dentro, casi seguro que lo que
 * quiere es un filete.
 */
.vor-aviso__cuerpo {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 34px;
	align-items: start;
	padding: 30px 32px;
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-l);
	/* Tinte del acento sobre la superficie: destaca sin salirse de la paleta. */
	background:
		linear-gradient(180deg, rgb(var(--vor-accent-rgb) / .07), transparent 240px),
		var(--vor-surface);
}

.vor-aviso__texto > .vor-eyebrow { margin-bottom: 10px; }

/* Prefijo .vor-lienzo por lo que avisa frontend.css: sus reglas de título son
   (0,1,1) y le ganarían a una sola clase escrita después. */
.vor-lienzo .vor-aviso__titulo {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	margin-bottom: 10px;
}

.vor-aviso__texto p { margin: 0 0 14px; font-size: .95rem; line-height: 1.55; }

/* Sin caja: solo el filete del acento. Enseña de qué se va a avisar, que es un
   apunte dentro del argumento, no un módulo aparte. */
.vor-aviso__criterios {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 2px 0 2px 14px;
	border-left: 3px solid var(--vor-accent);
	font-size: .9rem;
}

/* Sin filtros no hay nada que destacar y además falta un paso: el filete se
   apaga para que no prometa un contenido que todavía no existe. */
.vor-aviso__criterios[data-vor-vacio] { border-left-color: var(--vor-line); }

.vor-aviso__criterios[data-vor-vacio] .vor-aviso__criterios-et,
.vor-aviso__criterios[data-vor-vacio] strong,
.vor-aviso__criterios:not([data-vor-vacio]) .vor-aviso__criterios-vacio { display: none; }

/* Es una frase, no un rótulo: en versalitas y con interletraje se leía como un
   grito y encima costaba más entenderla, que es justo lo contrario de lo que
   tiene que hacer el estado vacío. */
.vor-aviso__criterios-vacio {
	font-size: .88rem;
	line-height: 1.5;
	color: var(--vor-ink-2);
	text-wrap: pretty;
}

.vor-aviso__criterios-et {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vor-ink-3);
}

.vor-lienzo .vor-aviso__criterios strong { color: var(--vor-ink); }

/* Formulario ------------------------------------------------------------ */

.vor-aviso__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0 0 0 34px;
	/* El filete que separa las dos columnas. Va en el formulario y no en el
	   contenedor porque así desaparece solo cuando la rejilla se apila. */
	border-left: 1px solid var(--vor-line-soft);
}

/* .vor-campo trae borde inferior y separación pensados para el panel de
   filtros; dentro del formulario del aviso sobran. */
.vor-aviso__form .vor-campo {
	padding: 0;
	border-bottom: 0;
	gap: 6px;
}

.vor-aviso__form .vor-campo > label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vor-ink-3);
}

/* El campo se apoya ahora en el fondo de la tarjeta, no en el del formulario:
   le basta un escalón para distinguirse. */
.vor-lienzo .vor-aviso__form .vor-input { background: var(--vor-surface-2); }

.vor-aviso__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--vor-ink-2);
	cursor: pointer;
}

/**
 * Casilla propia.
 *
 * Repite el patrón de .vor-opcion de frontend.css en vez de heredarlo: aquella
 * está pensada para una fila de filtro de 17 px y aquí hace falta algo más
 * grande, porque marcar esta casilla es un acto jurídico y tiene que costar
 * trabajo fallar el toque en un móvil.
 */
.vor-aviso__consent input[type="checkbox"] {
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	/* El borde va con un color de TEXTO (--vor-ink-3) y no con el de línea:
	   --vor-line está pensado para separadores discretos y en las paletas claras
	   deja la casilla casi invisible. Esta casilla no puede pasar desapercibida:
	   es el consentimiento, y tiene que verse que está sin marcar. */
	border: 1.5px solid var(--vor-ink-3);
	border-radius: 5px;
	/* El mismo escalón que el campo de correo: los dos se apoyan en el fondo de
	   la tarjeta desde que el formulario dejó de tener el suyo. */
	background: var(--vor-surface-2);
	cursor: pointer;
	position: relative;
	transition: background-color .15s, border-color .15s;
}

.vor-aviso__consent input[type="checkbox"]:hover { border-color: var(--vor-accent); }

.vor-aviso__consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--vor-accent);
	outline-offset: 2px;
}

.vor-aviso__consent input[type="checkbox"]:checked {
	background: var(--vor-accent);
	border-color: var(--vor-accent);
}

.vor-aviso__consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--vor-accent-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.vor-lienzo .vor-aviso__legal {
	margin: 0;
	font-size: .76rem;
	line-height: 1.5;
	color: var(--vor-ink-3);
}

.vor-aviso__legal a { color: var(--vor-ink-2); }

.vor-aviso__form .vor-btn { width: 100%; }

/* El botón se apaga por dos motivos distintos y el cursor tiene que decir cuál:
   «no se puede todavía» mientras falten filtros, «espera» mientras se envía. */
.vor-aviso__form .vor-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

.vor-aviso__form[data-vor-enviando] .vor-btn[disabled] { cursor: progress; }

/**
 * Trampa para bots.
 *
 * Ni display:none ni visibility:hidden: los rellenadores automáticos más
 * cuidadosos los detectan y saltan el campo. Sacarlo del lienzo con posición
 * absoluta lo deja invisible para una persona y perfectamente rellenable para un
 * bot, que es exactamente lo que se busca.
 */
.vor-aviso__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Respuesta y avisos ---------------------------------------------------- */

.vor-aviso__respuesta,
.vor-aviso__banner {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--vor-r-s);
	font-size: .88rem;
	line-height: 1.45;
}

.vor-aviso__respuesta { margin: 0; }
.vor-aviso__respuesta[hidden] { display: none; }

.vor-lienzo .vor-aviso__respuesta--ok,
.vor-lienzo .vor-aviso__banner--ok {
	border: 1px solid rgb(var(--vor-accent-rgb) / .45);
	background: rgb(var(--vor-accent-rgb) / .1);
	color: var(--vor-ink);
}

.vor-lienzo .vor-aviso__respuesta--error,
.vor-lienzo .vor-aviso__banner--error {
	border: 1px solid var(--vor-danger-line);
	background: rgb(var(--vor-danger-rgb) / .12);
	color: var(--vor-danger-ink);
}

.vor-aviso__banner strong { color: inherit; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
	.vor-aviso__cuerpo {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 24px 20px;
	}

	/* Apilado ya no hay dos columnas que separar: el filete se convierte en la
	   línea que marca dónde empieza el formulario. */
	.vor-aviso__form {
		padding: 22px 0 0;
		border-left: 0;
		border-top: 1px solid var(--vor-line-soft);
	}
}

@media (max-width: 480px) {
	.vor-aviso { margin-top: 28px; }

	.vor-aviso__cuerpo {
		padding: 20px 16px;
		border-radius: var(--vor-r-m);
	}

	/* A 390 px el texto del consentimiento es lo único que puede desbordar:
	   son tres líneas largas dentro de un flex con una casilla al lado. */
	.vor-aviso__consent { font-size: .8rem; }

	.vor-aviso__criterios { font-size: .85rem; }
}

/**
 * Nada de aquí dentro puede empujar el ancho de la página.
 *
 * El resumen de criterios es texto que viene de los nombres de marca y modelo, y
 * un «Mercedes-Benz Clase C Estate» sin puntos de corte se sale del contenedor
 * en un móvil estrecho. Igual con la dirección de correo que se teclea en el
 * campo.
 */
.vor-aviso,
.vor-aviso__cuerpo,
.vor-aviso__form { min-width: 0; max-width: 100%; }

.vor-aviso__criterios strong,
.vor-aviso__banner span,
.vor-aviso__respuesta span { overflow-wrap: anywhere; }

.vor-aviso__form .vor-input {
	max-width: 100%;
	/* Sin esto, un input dentro de un grid/flex reclama su ancho por defecto de
	   ~20 caracteres y no baja de ahí aunque el contenedor sea menor. */
	min-width: 0;
}