/*
 * cotizador.css
 * Botón "Agregar a cotización" + widget flotante + modal. Vive aparte del
 * carrito/checkout de WooCommerce (carrito-checkout.css) a propósito: es
 * un flujo paralelo, no lo reemplaza.
 */

/* Botón secundario, junto al de Añadir al carrito */
.saes-boton-cotizar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 100%;
	margin-top: .5rem;
	padding: .65rem 1rem;
	border-radius: var(--radio-md);
	border: 1.5px solid var(--color-primario);
	background: transparent;
	color: var(--color-primario);
	font-family: var(--fuente-cuerpo);
	font-weight: 600;
	font-size: .85rem;
	cursor: pointer;
	transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.saes-boton-cotizar:hover { background: var(--color-primario); color: #fff; }
.saes-boton-cotizar--ficha { width: auto; margin-top: var(--espacio-sm); padding: .85rem 1.5rem; }
.saes-boton-cotizar.saes-cotiz-agregado {
	background: var(--color-exito) !important;
	border-color: var(--color-exito) !important;
	color: #fff !important;
}

/* Widget flotante */
/* [hidden] gana por orden de cascada aunque tenga la misma especificidad
   que .saes-cotiz-widget si no se declara aparte — sin esto el widget se
   veía "Mi cotización 0" aunque el JS le pusiera el atributo hidden. */
.saes-cotiz-widget[hidden] { display: none; }
.saes-cotiz-widget {
	position: fixed;
	right: var(--espacio-sm);
	bottom: var(--espacio-sm);
	z-index: 900;
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--color-secundario);
	color: #fff;
	padding: .85rem 1.25rem;
	border-radius: var(--radio-full);
	box-shadow: var(--sombra-hover);
	cursor: pointer;
	font-weight: 600;
	font-size: .9rem;
	transition: transform var(--transicion);
}
.saes-cotiz-widget:hover { transform: translateY(-3px); }
.saes-cotiz-widget__contador {
	background: var(--color-acento);
	color: #fff;
	min-width: 22px;
	height: 22px;
	padding: 0 .35rem;
	border-radius: var(--radio-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
}

/* Modal */
.saes-cotiz-modal[hidden] { display: none; }
.saes-cotiz-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(16, 21, 26, .55);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--transicion);
}
.saes-cotiz-modal.saes-visible { opacity: 1; }
.saes-cotiz-modal__caja {
	background: #fff;
	width: 100%;
	max-width: 480px;
	max-height: 88vh;
	overflow-y: auto;
	border-radius: var(--radio-lg) var(--radio-lg) 0 0;
	padding: var(--espacio-md);
	position: relative;
	transform: translateY(24px);
	transition: transform var(--transicion);
}
.saes-cotiz-modal.saes-visible .saes-cotiz-modal__caja { transform: translateY(0); }
.saes-cotiz-modal__cerrar {
	position: absolute;
	top: var(--espacio-sm);
	right: var(--espacio-sm);
	background: var(--color-fondo-alterno);
	border: none;
	width: 32px;
	height: 32px;
	border-radius: var(--radio-full);
	cursor: pointer;
	font-size: 1rem;
}

@media (min-width: 640px) {
	.saes-cotiz-modal { align-items: center; }
	.saes-cotiz-modal__caja { border-radius: var(--radio-lg); }
}

.saes-cotiz-vacio { color: var(--color-texto-suave); font-size: .9rem; }

.saes-cotiz-lista { list-style: none; margin: 0 0 var(--espacio-md); padding: 0; }
.saes-cotiz-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--color-borde);
}
.saes-cotiz-item__info { flex: 1; min-width: 0; }
.saes-cotiz-item__nombre { display: block; font-size: .9rem; font-weight: 600; }
.saes-cotiz-item__sku { display: block; font-size: .75rem; color: var(--color-texto-suave); }
.saes-cotiz-item__cantidad {
	width: 52px;
	padding: .35rem;
	border-radius: var(--radio-sm);
	border: 1px solid var(--color-borde);
	text-align: center;
}
.saes-cotiz-item__quitar {
	background: none;
	border: none;
	color: var(--color-error);
	cursor: pointer;
	font-size: 1rem;
	padding: .25rem;
}

.saes-cotiz-form .field { margin-bottom: var(--espacio-sm); }
.saes-cotiz-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.saes-cotiz-form input,
.saes-cotiz-form textarea {
	width: 100%;
	padding: .7rem .9rem;
	border-radius: var(--radio-sm);
	border: 1px solid var(--color-borde);
	font-family: var(--fuente-cuerpo);
	font-size: .95rem;
}
.saes-cotiz-form__enviar { width: 100%; margin-top: var(--espacio-xs); }

.saes-cotiz-mensaje {
	margin-top: var(--espacio-sm);
	padding: var(--espacio-sm);
	border-radius: var(--radio-sm);
	font-size: .9rem;
}
.saes-cotiz-mensaje--ok { background: #e9f7ef; color: #1e8e5a; }
.saes-cotiz-mensaje--error { background: #fdecec; color: #c0392b; }

/* .boton (variables.css) fija display:inline-flex con la misma
   especificidad que [hidden] — sin este override, este botón (arranca
   oculto hasta que se envía la cotización) se veía desde el principio. */
.saes-cotiz-descargar[hidden] { display: none; }
.saes-cotiz-descargar { width: 100%; margin-top: var(--espacio-sm); }