/**
 * CN Quote Registration — aside del detalle del presupuesto
 * (Mi cuenta → view-quote): CTA "Confirmar pedido" (ywraq-new) y cuadrito
 * rosa post-confirmación (ywraq-pending sin respuesta del negocio).
 *
 * Dos estados del mismo patrón (.cnq-detail-aside):
 *
 * 1. COLOCADO (JS activo): cn-quote-account.js mueve el nodo adentro de
 *    `.ywraq-additional-information` — la fila flex nativa de YITH cuya
 *    columna izquierda es la card "Detalles de cliente" y cuya derecha era
 *    el admin-message. El nodo ocupa esa columna derecha, al nivel de la
 *    card.
 *
 * 2. FALLBACK (sin JS): el nodo queda donde lo renderiza el server
 *    (prioridad 11 del endpoint): al pie, hermano del wrapper del detalle.
 *
 * Selectores por posición — sin clases de estado: el aside sólo matchea el
 * estado colocado como hijo de la fila, o el fallback como hermano del
 * wrapper. El listado de presupuestos (/mi-cuenta/quotes/, form dentro de
 * un td) NO matchea ningún selector: conserva su botón nativo.
 *
 * Tokens del botón: el CTA "Confirmar pedido" del landing post-envío
 * (pedido-success 6353:27119): 60px, #337C84, blanco 16 Bold, radius 8,
 * hover #2C6B72. Tokens del cuadrito: el recuadro admin original de YITH
 * para ywraq-new (#FAE8E9 / #A34546).
 */

/* Estado colocado: columna derecha de la fila de detalles. La fila nativa
 * da 47% a cada columna (la card agrega 6% de separación). flex-basis (no
 * width): cuando YITH apila la fila en mobile (≤769px → display:block), la
 * propiedad se ignora y el form vuelve solo al ancho completo. Centrado
 * vertical frente a la card (align-items de la fila es flex-start). */
.ywraq-additional-information > .cnq-account-confirm {
	flex: 0 0 47%;
	align-self: center;
}

/* Fallback sin JS: al pie, separado del contenido del detalle. */
.ywraq-view-quote-wrapper ~ .cnq-account-confirm {
	margin-top: 32px;
}

/* Botón del detalle (colocado y fallback): tokens del CTA del landing. */
.ywraq-additional-information > .cnq-account-confirm .cnq-account-confirm__submit,
.ywraq-view-quote-wrapper ~ .cnq-account-confirm .cnq-account-confirm__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0 32px;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: #ffffff;
	background: #337c84;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ywraq-additional-information > .cnq-account-confirm .cnq-account-confirm__submit:hover,
.ywraq-additional-information > .cnq-account-confirm .cnq-account-confirm__submit:focus-visible,
.ywraq-view-quote-wrapper ~ .cnq-account-confirm .cnq-account-confirm__submit:hover,
.ywraq-view-quote-wrapper ~ .cnq-account-confirm .cnq-account-confirm__submit:focus-visible {
	background: #2c6b72;
	color: #ffffff;
}

/* Mobile: botón full-width, mismo patrón del landing (6353:27576). */
@media (max-width: 768px) {
	.ywraq-additional-information > .cnq-account-confirm .cnq-account-confirm__submit,
	.ywraq-view-quote-wrapper ~ .cnq-account-confirm .cnq-account-confirm__submit {
		width: 100%;
	}
}

/* Cuadrito post-confirmación (ywraq-pending sin respuesta del negocio):
 * el mismo cuadrito rosa original (`.ywraq-status-ywraq-new
 * .ywraq-admin-message`: #FAE8E9 / #A34546, sin sombra). Colocado, la
 * geometría del slot viene de la regla nativa de YITH para hijos div de la
 * fila (`.ywraq-additional-information > div`: 47%, radius 10, padding 20,
 * y apilado 100% en mobile ≤769px). Fallback sin JS (hermano del wrapper):
 * se aporta la geometría completa acá. */
.cnq-detail-notice--confirmed {
	background: #fae8e9;
	color: #a34546;
	border-radius: 10px;
	padding: 20px;
}

.ywraq-view-quote-wrapper ~ .cnq-detail-notice--confirmed {
	margin-top: 32px;
}