/* Centro Solar · Asistente IA — widget flotante.

   Todo el aspecto se controla con las custom properties de .cs-ai, que PHP
   genera desde la pestaña «Ajustes personalizados».

   Dos cosas importantes de este archivo:
   1. Hay un reset agresivo de botones y campos. El widget se inyecta dentro de
      themes y de Elementor, que estilan `button` y `textarea` globalmente y
      descolocan los iconos.
   2. Los contenedores de scroll llevan `min-height: 0`. Sin eso, un hijo flex
      no puede encogerse y la lista de mensajes deja de hacer scroll. */

.cs-ai {
	/* Valores de reserva: los reales llegan como estilo inline. */
	--cs-ai-font: inherit;
	--cs-ai-font-size: 15px;
	--cs-ai-launcher-bg: #F5A623;
	--cs-ai-launcher-color: #1A1A1A;
	--cs-ai-launcher-size: 60px;
	--cs-ai-offset-x: 20px;
	--cs-ai-offset-y: 20px;
	--cs-ai-close-color: #1A1A1A;
	--cs-ai-header-bg: #F5A623;
	--cs-ai-header-color: #1A1A1A;
	--cs-ai-avatar-bg: #FFFFFF;
	--cs-ai-error-bg: #FDECEC;
	--cs-ai-error-color: #8A1F1F;
	--cs-ai-panel-bg: #FFFFFF;
	--cs-ai-text: #1F2430;
	--cs-ai-panel-w: 380px;
	--cs-ai-panel-h: 600px;
	--cs-ai-radius: 16px;
	--cs-ai-bot-bg: #F2F4F7;
	--cs-ai-bot-color: #1F2430;
	--cs-ai-user-bg: #F5A623;
	--cs-ai-user-color: #1A1A1A;
	--cs-ai-border: #E7E9EE;
	--cs-ai-accent: #F5A623;
	--cs-ai-chip-bg: #FFFFFF;
	--cs-ai-chip-color: #1F2430;
	--cs-ai-chip-border: #E7E9EE;
	--cs-ai-input-bg: #FFFFFF;
	--cs-ai-input-color: #1F2430;
	--cs-ai-input-border: #E7E9EE;
	--cs-ai-send-bg: #F5A623;
	--cs-ai-send-color: #1A1A1A;
	--cs-ai-send-size: 44px;
	--cs-ai-shadow: 0 18px 48px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
	--cs-ai-safe-b: env(safe-area-inset-bottom, 0px);
	--cs-ai-safe-t: env(safe-area-inset-top, 0px);

	position: fixed;
	right: var(--cs-ai-offset-x);
	bottom: calc(var(--cs-ai-offset-y) + var(--cs-ai-safe-b));
	z-index: 99990;
	font-family: var(--cs-ai-font);
	font-size: var(--cs-ai-font-size);
	line-height: 1.5;
	color: var(--cs-ai-text);
	-webkit-text-size-adjust: 100%;
}

.cs-ai--left {
	right: auto;
	left: var(--cs-ai-offset-x);
}

.cs-ai *,
.cs-ai *::before,
.cs-ai *::after {
	box-sizing: border-box;
}

/* --- Reset a prueba de themes y de Elementor --- */

/* `:where()` no aporta especificidad: el reset queda en (0,1,0), suficiente
   para ganarle a un `button {}` del theme, pero por debajo de las reglas de
   componente de más abajo, que si no quedarían anuladas. */
.cs-ai :where(button, textarea, input) {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

.cs-ai :where(button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-align: center;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.cs-ai :where(button)::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.cs-ai :where(svg) {
	display: block;
	flex: 0 0 auto;
}

.cs-ai :where(p) {
	margin: 0;
	padding: 0;
}

/* --- Botón flotante --- */

.cs-ai__launcher {
	width: var(--cs-ai-launcher-size);
	height: var(--cs-ai-launcher-size);
	margin-left: auto;
	border-radius: 50%;
	background: var(--cs-ai-launcher-bg);
	color: var(--cs-ai-launcher-color);
	box-shadow: var(--cs-ai-shadow);
	transition: transform .18s ease;
}

.cs-ai--left .cs-ai__launcher {
	margin-left: 0;
	margin-right: auto;
}

.cs-ai__launcher:hover {
	transform: translateY(-2px) scale(1.04);
}

.cs-ai__launcher:focus-visible {
	outline: 3px solid var(--cs-ai-accent);
	outline-offset: 3px;
}

.cs-ai__launcher svg {
	width: calc(var(--cs-ai-launcher-size) * .46);
	height: calc(var(--cs-ai-launcher-size) * .46);
}

.cs-ai__launcher .cs-ai__icon-close {
	display: none;
	color: var(--cs-ai-close-color);
}

.cs-ai.is-open .cs-ai__launcher .cs-ai__icon-chat {
	display: none;
}

.cs-ai.is-open .cs-ai__launcher .cs-ai__icon-close {
	display: block;
}

/* --- Panel --- */

.cs-ai__panel {
	position: absolute;
	right: 0;
	bottom: calc(var(--cs-ai-launcher-size) + 16px);
	display: flex;
	flex-direction: column;
	min-height: 0;
	width: min(var(--cs-ai-panel-w), calc(100vw - 32px));
	/* La altura disponible descuenta TODO lo que hay debajo del panel: la
	   separación configurada, el botón flotante, el hueco entre ambos y un
	   margen arriba. Sin restar la separación, subirla (p. ej. para esquivar un
	   botón de WhatsApp) empuja el panel fuera de la pantalla por arriba. */
	height: min(
		var(--cs-ai-panel-h),
		max(
			260px,
			calc(100dvh - var(--cs-ai-offset-y) - var(--cs-ai-safe-b) - var(--cs-ai-launcher-size) - 32px)
		)
	);
	overflow: hidden;
	border: 1px solid var(--cs-ai-border);
	border-radius: var(--cs-ai-radius);
	background: var(--cs-ai-panel-bg);
	box-shadow: var(--cs-ai-shadow);
	transition: opacity .2s ease, transform .2s ease;
}

/* El estado cerrado se declara sólo cuando está cerrado. Si el ocultamiento
   vive en la regla base, cualquier regla posterior de la misma especificidad
   —las del bloque responsive, por ejemplo— puede dejar el panel a medio abrir. */
.cs-ai:not(.is-open) .cs-ai__panel {
	opacity: 0;
	transform: translateY(12px) scale(.98);
	pointer-events: none;
}

/* Reserva para navegadores sin dvh. */
@supports not (height: 100dvh) {
	.cs-ai__panel {
		height: min(
			var(--cs-ai-panel-h),
			max(
				260px,
				calc(100vh - var(--cs-ai-offset-y) - var(--cs-ai-safe-b) - var(--cs-ai-launcher-size) - 32px)
			)
		);
	}
}

.cs-ai--left .cs-ai__panel {
	right: auto;
	left: 0;
}

.cs-ai.is-open .cs-ai__panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.cs-ai__header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: 16px 18px;
	background: var(--cs-ai-header-bg);
	color: var(--cs-ai-header-color);
}

.cs-ai__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .28);
	background: color-mix(in srgb, var(--cs-ai-avatar-bg) 28%, transparent);
}

.cs-ai__avatar svg {
	width: 22px;
	height: 22px;
}

.cs-ai__titles {
	min-width: 0;
}

.cs-ai__title {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.25;
}

.cs-ai__subtitle {
	margin-top: 2px;
	font-size: .8em;
	opacity: .85;
}

.cs-ai__subtitle:empty {
	display: none;
}

.cs-ai__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin-left: auto;
	border-radius: 8px;
	color: var(--cs-ai-close-color);
	opacity: .85;
}

.cs-ai__close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .2);
	background: color-mix(in srgb, var(--cs-ai-avatar-bg) 20%, transparent);
}

.cs-ai__close svg {
	width: 18px;
	height: 18px;
}

/* --- Mensajes --- */

.cs-ai__log {
	flex: 1 1 auto;
	min-height: 0;            /* sin esto el scroll no funciona */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--cs-ai-panel-bg);
}

.cs-ai__log::-webkit-scrollbar {
	width: 8px;
}

.cs-ai__log::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: rgba(0, 0, 0, .18);
	background: color-mix(in srgb, var(--cs-ai-text) 25%, transparent);
}

.cs-ai__msg {
	flex: 0 0 auto;
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	animation: cs-ai-in .22s ease both;
}

@keyframes cs-ai-in {
	from { opacity: 0; transform: translateY(6px); }
}

.cs-ai__msg--bot {
	align-self: flex-start;
	background: var(--cs-ai-bot-bg);
	color: var(--cs-ai-bot-color);
	border-bottom-left-radius: 4px;
}

.cs-ai__msg--user {
	align-self: flex-end;
	background: var(--cs-ai-user-bg);
	color: var(--cs-ai-user-color);
	border-bottom-right-radius: 4px;
}

.cs-ai__msg--error {
	align-self: flex-start;
	background: var(--cs-ai-error-bg);
	color: var(--cs-ai-error-color);
	border-bottom-left-radius: 4px;
	font-size: .93em;
}

.cs-ai__msg strong { font-weight: 700; }
.cs-ai__msg em { font-style: italic; }

.cs-ai__msg a {
	color: inherit;
	text-decoration: underline;
}

.cs-ai__msg ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

.cs-ai__debug {
	flex: 0 0 auto;
	max-width: 100%;
	padding: 8px 12px;
	border-radius: 10px;
	background: #2B2F36;
	color: #FFD9A0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* --- Indicador de escritura --- */

.cs-ai__typing {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
	align-self: flex-start;
	padding: 14px;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	background: var(--cs-ai-bot-bg);
}

.cs-ai__typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cs-ai-bot-color);
	opacity: .45;
	animation: cs-ai-bounce 1.2s infinite ease-in-out;
}

.cs-ai__typing span:nth-child(2) { animation-delay: .15s; }
.cs-ai__typing span:nth-child(3) { animation-delay: .3s; }

@keyframes cs-ai-bounce {
	0%, 60%, 100% { transform: none; opacity: .45; }
	30% { transform: translateY(-5px); opacity: 1; }
}

/* --- Sugerencias --- */

.cs-ai__suggestions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 18px 12px;
	background: var(--cs-ai-panel-bg);
}

.cs-ai__suggestions:empty {
	display: none;
}

.cs-ai__chip {
	min-height: 36px;
	padding: 7px 13px;
	border: 1px solid var(--cs-ai-chip-border);
	border-radius: 999px;
	background: var(--cs-ai-chip-bg);
	color: var(--cs-ai-chip-color);
	font-size: .86em;
	transition: border-color .15s ease;
}

.cs-ai__chip:hover {
	border-color: var(--cs-ai-accent);
}

/* --- Composer --- */

.cs-ai__form {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--cs-ai-border);
	background: var(--cs-ai-panel-bg);
}

.cs-ai__input {
	flex: 1 1 auto;
	max-height: 110px;
	min-height: var(--cs-ai-send-size);
	padding: 11px 12px;
	border: 1px solid var(--cs-ai-input-border);
	border-radius: 12px;
	background: var(--cs-ai-input-bg);
	color: var(--cs-ai-input-color);
	font-size: .93em;
	resize: none;
}

.cs-ai__input::placeholder {
	color: var(--cs-ai-input-color);
	opacity: .5;
}

.cs-ai__input:focus {
	border-color: var(--cs-ai-accent);
	box-shadow: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-ai-accent) 22%, transparent);
}

.cs-ai__send {
	flex: 0 0 auto;
	width: var(--cs-ai-send-size);
	height: var(--cs-ai-send-size);
	border-radius: 12px;
	background: var(--cs-ai-send-bg);
	color: var(--cs-ai-send-color);
	transition: opacity .15s ease;
}

.cs-ai__send:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.cs-ai__send svg {
	width: 19px;
	height: 19px;
}

/* --- Centrado óptico de los iconos ---
   Medido muestreando el trazo de cada icono y promediando los puntos: da el
   centro de masa de la tinta, que es lo que percibe el ojo. Un SVG puede tener
   la caja perfectamente centrada y verse torcido igualmente (el avión de papel
   es el caso extremo). Los valores están en unidades del viewBox de 24, así que
   escalan con el icono. --- */

.cs-ai :where(svg) > g {
	transform-box: view-box;
	transform-origin: center;
}

.cs-ai .cs-ai__icon--chat > g {
	transform: translate(0.32px, -0.46px);
}

.cs-ai .cs-ai__icon--bubbles > g {
	transform: translate(0.24px, -0.36px);
}

.cs-ai .cs-ai__icon--sun > g {
	transform: translate(-0.17px, 0.13px);
}

.cs-ai .cs-ai__icon--bolt > g {
	transform: translate(0.48px, 0.16px);
}

.cs-ai .cs-ai__icon--question > g {
	transform: translate(-0.26px, 0.49px);
}

.cs-ai .cs-ai__icon--headset > g {
	transform: translate(-0.54px, -0.42px);
}

.cs-ai .cs-ai__icon--sparkles > g {
	transform: translate(-1.89px, -0.61px);
}

.cs-ai .cs-ai__icon--robot > g {
	transform: translate(0.07px, -0.67px);
}

.cs-ai .cs-ai__icon--x > g {
	transform: translate(-0.17px, -0.17px);
}

.cs-ai .cs-ai__icon--chevron > g {
	transform: translate(0px, 0.12px);
}

.cs-ai .cs-ai__icon--arrow > g {
	transform: translate(0.18px, -1.97px);
}

.cs-ai .cs-ai__icon--plane > g {
	transform: translate(-1.64px, 1.64px);
}

.cs-ai .cs-ai__icon--arrow-up > g {
	transform: translate(-0.18px, 1.97px);
}

.cs-ai .cs-ai__icon--chevron > g {
	transform: translate(0.12px, 0px);
}

.cs-ai .cs-ai__icon--circle > g {
	transform: translate(-0.13px, 0.27px);
}


/* Posición del botón de enviar */

.cs-ai--send-left .cs-ai__send {
	order: -1;
}

.cs-ai--send-below .cs-ai__form {
	flex-wrap: wrap;
}

.cs-ai--send-below .cs-ai__input {
	flex: 1 1 100%;
}

.cs-ai--send-below .cs-ai__send {
	margin: 8px auto 0;
	width: 100%;
	max-width: 180px;
}

.cs-ai__footer {
	flex: 0 0 auto;
	padding: 0 12px 10px;
	background: var(--cs-ai-panel-bg);
	color: var(--cs-ai-text);
	opacity: .55;
	font-size: .72em;
	text-align: center;
}

.cs-ai__footer:empty {
	display: none;
}

/* Botón del shortcode */

.cs-ai-open-trigger {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--cs-ai-launcher-bg, #F5A623);
	color: var(--cs-ai-launcher-color, #1A1A1A);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* --- Widget incrustado (vista previa del panel) ---
   El root ocupa todo el contenedor para que los porcentajes del panel se
   calculen contra el escenario y no contra el botón flotante. --- */

.cs-ai--embedded {
	position: absolute;
	inset: 0;
	bottom: 0;
}

.cs-ai--embedded .cs-ai__launcher {
	position: absolute;
	right: var(--cs-ai-offset-x);
	bottom: var(--cs-ai-offset-y);
	margin: 0;
}

.cs-ai--embedded.cs-ai--left .cs-ai__launcher {
	right: auto;
	left: var(--cs-ai-offset-x);
}

.cs-ai--embedded .cs-ai__panel {
	right: var(--cs-ai-offset-x);
	bottom: calc(var(--cs-ai-offset-y) + var(--cs-ai-launcher-size) + 16px);
	width: min(var(--cs-ai-panel-w), calc(100% - var(--cs-ai-offset-x) - 16px));
	height: min(
		var(--cs-ai-panel-h),
		calc(100% - var(--cs-ai-offset-y) - var(--cs-ai-launcher-size) - 32px)
	);
}

.cs-ai--embedded.cs-ai--left .cs-ai__panel {
	right: auto;
	left: var(--cs-ai-offset-x);
}

/* ==================================================================
   TABLET · 601 – 1024 px
   El panel flotante se mantiene, pero nunca puede salirse de la
   pantalla ni en vertical ni en horizontal.
   ================================================================== */

@media (min-width: 601px) and (max-width: 1024px) {
	.cs-ai:not(.cs-ai--embedded) .cs-ai__panel {
		width: min(var(--cs-ai-panel-w), calc(100vw - 2 * var(--cs-ai-offset-x)));
		height: min(
			var(--cs-ai-panel-h),
			max(
				260px,
				calc(100dvh - var(--cs-ai-offset-y) - var(--cs-ai-safe-b) - var(--cs-ai-launcher-size) - 40px)
			)
		);
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__launcher {
		width: max(var(--cs-ai-launcher-size), 56px);
		height: max(var(--cs-ai-launcher-size), 56px);
	}
}

/* Tablet o móvil en horizontal: la altura manda. */
@media (max-height: 600px) and (min-width: 601px) {
	.cs-ai:not(.cs-ai--embedded) .cs-ai__panel {
		height: calc(100dvh - var(--cs-ai-launcher-size) - var(--cs-ai-offset-y) - 24px);
	}
}

/* ==================================================================
   MÓVIL · hasta 600 px
   El chat pasa a pantalla completa, respetando notch y barra inferior.
   ================================================================== */

@media (max-width: 600px) {
	.cs-ai:not(.cs-ai--embedded) {
		right: max(12px, var(--cs-ai-offset-x));
		bottom: calc(max(12px, var(--cs-ai-offset-y)) + var(--cs-ai-safe-b));
	}

	.cs-ai--left:not(.cs-ai--embedded) {
		right: auto;
		left: max(12px, var(--cs-ai-offset-x));
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__launcher {
		width: clamp(52px, var(--cs-ai-launcher-size), 64px);
		height: clamp(52px, var(--cs-ai-launcher-size), 64px);
	}

	/* Con el panel a pantalla completa el botón estorba: cierra desde la cabecera. */
	.cs-ai.is-open:not(.cs-ai--embedded) .cs-ai__launcher {
		display: none;
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__panel {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	/* A pantalla completa no hay que escalar ni desplazar nada: el panel ocupa
	   exactamente la pantalla y la entrada se hace sólo con opacidad. */
	.cs-ai:not(.cs-ai--embedded) .cs-ai__panel,
	.cs-ai:not(.is-open):not(.cs-ai--embedded) .cs-ai__panel {
		transform: none;
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__header {
		padding-top: calc(16px + var(--cs-ai-safe-t));
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__close {
		width: 44px;
		height: 44px;
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__close svg {
		width: 22px;
		height: 22px;
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__msg {
		max-width: 90%;
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__form {
		padding-bottom: calc(12px + var(--cs-ai-safe-b));
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__footer {
		padding-bottom: calc(10px + var(--cs-ai-safe-b));
	}

	/* 16px es el mínimo que evita que iOS haga zoom al enfocar el campo. */
	.cs-ai:not(.cs-ai--embedded) .cs-ai__input {
		font-size: 16px;
		min-height: 46px;
	}

	.cs-ai:not(.cs-ai--embedded) {
		--cs-ai-send-size: 46px;
	}

	.cs-ai:not(.cs-ai--embedded) .cs-ai__chip {
		min-height: 40px;
	}
}

/* Bloquea el scroll de la página mientras el chat ocupa la pantalla. */
html.cs-ai-locked,
html.cs-ai-locked body {
	overflow: hidden;
	overscroll-behavior: none;
}

/* En pantallas táctiles el hover no aporta y deja estados pegados. */
@media (hover: none) {
	.cs-ai__launcher:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-ai *,
	.cs-ai *::before,
	.cs-ai *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}