/* Ivan Senent - WhatsApp. Reproduce el aspecto que tenía Click to Chat PRO (plantilla greetings-pro-1, estilo 3_1). */

.ivs-wa {
	position: fixed;
	bottom: 15px;
	right: 15px;
	/* Por debajo del aviso de cookies (9900) y de su ventana de ajustes (9990): el visitante tiene que poder contestarlos. */
	z-index: 9800;
	line-height: 1.4;
}
.ivs-wa[hidden] { display: none !important; }
.ivs-wa *, .ivs-wa *::before, .ivs-wa *::after { box-sizing: border-box; }
.ivs-wa p { margin: 0; padding: 0; }
.ivs-wa button { all: unset; box-sizing: border-box; cursor: pointer; }
/* El tema pinta de rosa (#c36) cualquier botón al pasar el ratón o al pulsarlo: aquí se anula. */
.ivs-wa button:hover, .ivs-wa button:focus, .ivs-wa button:active { background-color: transparent; color: inherit; text-decoration: none; box-shadow: none; }
.ivs-wa button:focus-visible { outline: 2px solid #25D366; outline-offset: 2px; }

.ivs-wa--entra { animation: ivs-wa-entra .25s; }
@keyframes ivs-wa-entra { from { transform: scale(0); } to { transform: scale(1); } }

/* Botón flotante */
.ivs-wa .ivs-wa__boton { display: flex !important; justify-content: center; align-items: center; }
.ivs-wa__circulo {
	display: block;
	background-color: #25D366;
	padding: 16px;
	border-radius: 50%;
	box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}
.ivs-wa__circulo svg { display: block; width: 36px; height: 36px; pointer-events: none; }
.ivs-wa__cta {
	display: none;
	order: 0;
	padding: 0 16px;
	margin: 0 10px;
	line-height: 1.6;
	font-size: 15px;
	color: #fff;
	background-color: #25d366;
	border-radius: 10px;
}
@media (hover: hover) {
	.ivs-wa__boton:hover .ivs-wa__cta { display: block; animation: ivs-wa-cta .12s cubic-bezier(.25, .8, .25, 1) both; transform-origin: right center; }
}
@keyframes ivs-wa-cta { from { opacity: 0; transform: translateX(6px) scaleX(.6); } to { opacity: 1; transform: none; } }

/* Cuadro de bienvenida */
.ivs-wa__caja {
	position: absolute;
	right: 0;
	bottom: calc(100% + 18px);
	width: 330px;
	max-width: calc(100vw - 30px);
	max-height: 84vh;
	overflow-y: auto;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 9px 0 rgba(0, 0, 0, .14);
	opacity: 0;
	pointer-events: none;
	transform: scale(0) translate(20px, 20px);
	transform-origin: bottom right;
	transition: all .4s cubic-bezier(.19, 1, .22, 1);
}
.ivs-wa__caja.ivs-wa__caja--abierta { opacity: 1; pointer-events: auto; transform: scale(1) translate(0); }

.ivs-wa .ivs-wa__cerrar {
	position: absolute !important;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 5px !important;
	margin: 4px !important;
	border-radius: 50%;
	line-height: 1;
	color: lightgray;
}
.ivs-wa .ivs-wa__cerrar:hover, .ivs-wa .ivs-wa__cerrar:focus, .ivs-wa .ivs-wa__cerrar:active { color: lightgray; }
.ivs-wa__cerrar svg { display: block; width: 18px; height: 18px; }

.ivs-wa__cabecera { padding: 12px 19px; background-color: #7a4a26; line-height: 1.3; color: #fff; }
.ivs-wa__titulo { font-size: 17px; font-weight: 500; color: #fff; }
.ivs-wa__subtitulo { color: #fff; }

.ivs-wa__form { padding: 18px 19px 0; margin: 0; background-color: #ece5dd; }
.ivs-wa__campo { display: flex; flex-direction: column; margin-bottom: 8px; }
.ivs-wa__campo label { margin: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.ivs-wa__campo input {
	width: 100%;
	margin: 0;
	padding: 9px;
	font: inherit;
	color: #333;
	background-color: #fff;
	border: 1px solid #767676;
	border-radius: 4px;
	box-shadow: none;
}

.ivs-wa__trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ivs-wa__acepto { display: flex; align-items: flex-start; gap: 7px; margin: 4px 0 6px; font-size: 13px; line-height: 1.35; }
.ivs-wa__acepto input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: #25D366; }
.ivs-wa__acepto label { margin: 0; padding: 0; font-size: 13px; }
.ivs-wa__acepto a { color: #7a4a26; text-decoration: underline; }
.ivs-wa__aviso { font-size: 11px !important; line-height: 1.35 !important; color: #555; }
.ivs-wa__aviso strong { font-weight: 600; }
.ivs-wa__error { margin-top: 6px !important; font-size: 12px; color: #b00020; }
.ivs-wa__error[hidden] { display: none; }

.ivs-wa__enviar { text-align: center; padding: 11px 0 9px; }
.ivs-wa .ivs-wa__boton-enviar {
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 5px !important;
	background-color: #25D366;
	border-radius: 25px;
	color: #fff;
}
.ivs-wa__boton-enviar span { padding: 1px 0; margin: 0 10px; color: #fff; }
.ivs-wa__boton-enviar svg { display: block; width: 20px; height: 20px; pointer-events: none; }
.ivs-wa__boton-enviar svg path { fill: #fff; }
.ivs-wa .ivs-wa__boton-enviar:focus, .ivs-wa .ivs-wa__boton-enviar:active { background-color: #25D366; }
.ivs-wa .ivs-wa__boton-enviar:hover { background-color: #00d34d; }
.ivs-wa__boton-enviar:hover span { color: #f4f4f4; }
.ivs-wa__boton-enviar:hover svg path { fill: #f4f4f4; }

.ivs-wa__pie { padding: 2px 19px; text-align: center; font-size: 12px; background-color: #fff; }
.ivs-wa__punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #06e376; vertical-align: -1px; }

/* Móvil: el cuadro ocupa el ancho de la pantalla, como antes */
@media only screen and (max-width: 420px) {
	.ivs-wa__caja {
		position: fixed;
		left: 7px;
		right: 7px;
		bottom: 7px;
		width: auto;
		max-width: none;
	}
}