/* ---------------------------------------------------------------------------
 * Carrito de cotización
 *
 * El panel lateral, sus filas, el formulario y los botones. También
 * el fondo general del sitio, que estaba en el mismo bloque.
 *
 * Salió de insuplagas-site-ui.css, que tenía 2.872 renglones con la cabecera,
 * el carrito, el inicio y dos páginas sueltas adentro. El contenido se mudó tal
 * cual, sin reescribir una regla: lo único nuevo es este encabezado. El orden
 * relativo entre archivos lo fija la cadena de dependencias del encolado, en
 * insuplagas-assets.php.
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
   Header flotante (desktop + mobile)
   -------------------------------------------------------------------------- */
body,
#wrapper,
.site-content {
	background: var(--insu-color-surface-soft) !important;
}

.insu-cart-live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.insu-cart-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(1, 15, 108, 0.2);
	border-radius: 999px;
	background: #ffffff;
	color: var(--insu-color-brand-blue);
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.insu-cart-add svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.insu-cart-add:hover,
.insu-cart-add:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(164, 44, 23, 0.34);
	color: var(--insu-color-brand-red);
	box-shadow: 0 8px 18px rgba(1, 15, 108, 0.12);
}

.insu-cart-add--catalog {
	width: 36px;
	height: 36px;
	padding: 0;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 6;
	box-shadow: 0 8px 18px rgba(1, 15, 108, 0.14);
}

.single-product .insu-cart-add-row {
	margin: 0 0 10px !important;
}

.single-product .insu-cart-add--single {
	min-height: 42px;
	padding: 10px 16px;
	font-family: var(--insu-font-heading);
	font-size: 0.88rem;
	font-weight: 600;
}

.single-product .insu-cart-add--single .insu-cart-add__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   Carrito catalogo: panel
   -------------------------------------------------------------------------- */
body.insu-cart-open {
	overflow: hidden;
}

body.insu-cart-open .insu-wa-float {
	opacity: 0 !important;
	pointer-events: none !important;
	transform: translateY(8px) !important;
}

.insu-cart-panel {
	position: fixed;
	inset: 0;
	z-index: 12050;
}

.insu-cart-panel[hidden] {
	display: none !important;
}

.insu-cart-panel__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(1, 15, 108, 0.28);
	backdrop-filter: blur(2px);
}

.insu-cart-panel__dialog {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 0;
	box-shadow: none;
}

.insu-cart-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
	border-bottom: 1px solid rgba(1, 15, 108, 0.12);
	background: #ffffff;
}

.insu-cart-panel__header h3 {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--insu-font-heading);
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--insu-color-ink);
}

.insu-cart-panel__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(164, 44, 23, 0.12);
	color: var(--insu-color-brand-red);
	font-size: 0.76rem;
}

.insu-cart-panel__close {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(1, 15, 108, 0.18);
	border-radius: 999px;
	background: #ffffff;
	color: var(--insu-color-ink);
	font-size: 0.95rem;
	line-height: 1;
}

.insu-cart-panel__body {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
}

.insu-cart-panel__items {
	max-height: 43vh;
	overflow: auto;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(1, 15, 108, 0.1);
	background: #f8fbff;
	min-height: 0;
}

.insu-cart-empty {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(1, 15, 108, 0.72);
}

.insu-cart-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 10px;
	padding: 10px;
	border: 1px solid rgba(1, 15, 108, 0.14);
	border-radius: 12px;
	background: #ffffff;
}

.insu-cart-item + .insu-cart-item {
	margin-top: 8px;
}

.insu-cart-item__thumb {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(1, 15, 108, 0.12);
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
}

.insu-cart-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 5px;
}

.insu-cart-item__thumb svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.insu-cart-item__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.insu-cart-item__title {
	font-family: var(--insu-font-heading);
	font-size: 0.87rem;
	line-height: 1.22;
	color: var(--insu-color-ink);
	text-decoration: none;
}

.insu-cart-item__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.insu-cart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(1, 15, 108, 0.2);
	border-radius: 999px;
	background: #ffffff;
}

.insu-cart-qty__btn {
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: var(--insu-color-ink);
	font-size: 1rem;
	line-height: 1;
}

.insu-cart-qty__value {
	min-width: 42px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid rgba(1, 15, 108, 0.14);
	border-right: 1px solid rgba(1, 15, 108, 0.14);
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--insu-color-ink);
	background: #ffffff;
}

.insu-cart-item__remove {
	border: 0;
	background: transparent;
	color: var(--insu-color-brand-red);
	font-size: 0.77rem;
	font-weight: 700;
}

.insu-cart-panel__checkout {
	min-height: 0;
	overflow: auto;
	padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
}

.insu-cart-panel__checkout h4 {
	margin: 0 0 10px;
	font-family: var(--insu-font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--insu-color-ink-soft);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.insu-cart-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.insu-cart-field {
	display: block;
}

.insu-cart-field input,
.insu-cart-field select {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid rgba(1, 15, 108, 0.16);
	border-radius: 12px;
	background: #f9fbff;
	font-size: 0.86rem;
	color: var(--insu-color-ink);
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.insu-cart-field input::placeholder {
	color: rgba(1, 15, 108, 0.56);
	opacity: 1;
}

.insu-cart-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(1, 15, 108, 0.7) 50%), linear-gradient(135deg, rgba(1, 15, 108, 0.7) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.insu-cart-field input:focus,
.insu-cart-field select:focus {
	outline: none;
	border-color: rgba(164, 44, 23, 0.44);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(164, 44, 23, 0.12);
}

.insu-cart-field--wide {
	grid-column: 1 / -1;
}

.insu-cart-fieldset {
	margin: 0;
	padding: 11px 12px;
	border: 1px solid rgba(1, 15, 108, 0.14);
	border-radius: 12px;
	background: #f9fbff;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.insu-cart-fieldset legend {
	padding: 0 4px;
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--insu-color-ink-soft);
	letter-spacing: 0.02em;
}

.insu-cart-fieldset label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid rgba(1, 15, 108, 0.16);
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--insu-color-ink);
}

.insu-cart-form__notice {
	margin: 0;
	min-height: 1.2em;
	font-size: 0.8rem;
	grid-column: 1 / -1;
}

.insu-cart-form__notice.is-success {
	color: #0f7a28;
}

.insu-cart-form__notice.is-error {
	color: #a42c17;
}

.insu-cart-form__notice.is-loading {
	color: rgba(1, 15, 108, 0.72);
}

.insu-cart-form__submit {
	width: 100%;
	min-height: 42px;
	border: 1px solid rgba(164, 44, 23, 0.34);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--insu-color-accent) 0%, var(--insu-color-brand-blue) 100%);
	color: #ffffff;
	font-family: var(--insu-font-heading);
	font-size: 0.88rem;
	font-weight: 700;
	grid-column: 1 / -1;
}

.insu-cart-form__submit:disabled {
	opacity: 0.56;
	cursor: not-allowed;
}

@media (min-width: 992px) {

	.insu-cart-panel__header {
		padding: calc(16px + env(safe-area-inset-top)) 26px 16px;
	}

	.insu-cart-panel__body {
		grid-template-columns: minmax(360px, 0.95fr) minmax(460px, 1.05fr);
		grid-template-rows: 1fr;
	}

	.insu-cart-panel__items {
		max-height: none;
		padding: 20px 24px;
		border-bottom: 0;
		border-right: 1px solid rgba(1, 15, 108, 0.1);
	}

	.insu-cart-panel__checkout {
		padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
	}

	.insu-cart-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 11px;
	}
}

@media (max-width: 991px) {

	.insu-cart-fieldset {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Los botones del carrito, en hover.
 *
 * Ninguno tenía estado propio, y el tema define para todo el sitio
 * button:hover { background-color: #c36; color: #fff }. Esa regla vale (0,1,1)
 * y le gana a un botón definido con una sola clase, que vale (0,1,0): el rótulo
 * se volvía blanco sobre fondo claro y desaparecía, que es lo que se veía en
 * "Consultar precio" del catálogo.
 *
 * No alcanza con una regla general para todos los botones nuestros: la mitad del
 * CSS del sitio viaja dentro del archivo combinado de LiteSpeed, que carga antes
 * que las hojas sueltas, así que dos reglas de igual especificidad no se ordenan
 * de forma previsible. Cada botón declara el suyo.
 * ------------------------------------------------------------------------ */
.insu-cart-panel__close:hover,
.insu-cart-panel__close:focus-visible {
	background: var(--insu-color-surface-soft);
	color: var(--insu-color-accent);
}

.insu-cart-qty__btn:hover,
.insu-cart-qty__btn:focus-visible {
	background: var(--insu-color-surface-soft);
	color: var(--insu-color-accent);
}

.insu-cart-item__remove:hover,
.insu-cart-item__remove:focus-visible {
	background: var(--insu-color-accent-soft);
	color: var(--insu-color-brand-red);
}

/* Este ya es oscuro con texto blanco: sólo se le fija el color para que la
   regla del tema no lo cambie, y se le oscurece un poco el fondo. */
.insu-cart-form__submit:hover,
.insu-cart-form__submit:focus-visible {
	color: #ffffff;
	filter: brightness(.94);
}