/* ==========================================================================
   qo-frontend.css
   Estilos del widget de chat que ve el cliente en la web.
   Prefijo "qo-" en todas las clases para no chocar con el tema (Astra u otro).
   Usa variables CSS para que los colores configurados en el admin se
   apliquen sin tener que tocar este archivo.
   ========================================================================== */

:root {
	--qo-color-primario: #25D366;
	--qo-color-secundario: #128C7E;
	--qo-color-texto-principal: #128C7E;
	--qo-color-texto-secundario: #0F6E56;
}

/* Contenedor raíz: fijo en la esquina inferior derecha, acompaña el scroll */
#qo-widget-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999; /* por encima de casi cualquier elemento del tema */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
#qo-widget-root * {
	box-sizing: border-box;
}

/* Burbuja flotante cerrada.
   El fondo es el degradé de los dos colores de fondo. Los colores de
   texto (más abajo) son totalmente independientes de estos. */
#qo-burbuja {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--qo-color-primario), var(--qo-color-secundario));
	border: none;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	padding: 0;
	overflow: hidden;
}
#qo-burbuja:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
}
#qo-burbuja img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
#qo-burbuja-icono {
	font-size: 28px;
	line-height: 1;
}
#qo-burbuja.qo-oculto {
	display: none;
}

/* Cartelito ("Hola, ¿en qué puedo ayudarte?"). Se muestra/oculta por
   JavaScript agregando la clase "qo-visible" (funciona igual en
   computadora y en celular, ya no depende de "pasar el mouse"). */
.qo-burbuja-tooltip {
	position: absolute;
	right: 74px;
	bottom: 18px;
	width: max-content;
	max-width: 240px;
	background: #fff;
	color: #2b2b2b;
	font-size: 13px;
	line-height: 1.4;
	padding: 10px 14px;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	white-space: normal;
	cursor: pointer;
}
.qo-burbuja-tooltip::after {
	content: "";
	position: absolute;
	right: -6px;
	bottom: 20px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.03);
}
.qo-burbuja-tooltip.qo-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Panel del chat abierto */
#qo-panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 360px;
	max-width: calc(100vw - 24px);
	height: 520px;
	max-height: calc(100vh - 100px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: qo-aparecer 0.22s ease;
}
#qo-panel.qo-oculto {
	display: none;
}
@keyframes qo-aparecer {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cabecera del panel: mismo degradé que la burbuja. */
#qo-panel-header {
	background: linear-gradient(135deg, var(--qo-color-primario), var(--qo-color-secundario));
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
#qo-panel-header-info {
	display: flex;
	align-items: center;
	gap: 10px;
}
#qo-panel-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.25);
}
#qo-panel-nombre {
	font-weight: 600;
	font-size: 15px;
}
#qo-panel-cerrar {
	background: rgba(255, 255, 255, 0.18);
	border: none;
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
#qo-panel-cerrar:hover {
	background: rgba(255, 255, 255, 0.32);
}

/* Cuerpo del panel (mensajes, menú, preguntas, respuestas) */
#qo-panel-cuerpo {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #f4f6f8;
}

/* Burbuja de mensaje "de Boti" */
.qo-mensaje-bot {
	background: #fff;
	border-radius: 14px 14px 14px 2px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.45;
	color: #2b2b2b;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	margin-bottom: 14px;
	max-width: 92%;
}
.qo-mensaje-bot p {
	margin: 0 0 8px 0;
}
.qo-mensaje-bot p:last-child {
	margin-bottom: 0;
}
.qo-mensaje-bot a {
	/* !important: algunos temas de WordPress (y Astra puede ser uno)
	   traen su propia regla de color para "todos los links" con bastante
	   fuerza (especificidad). Esto asegura que siempre gane el color
	   elegido en el panel, sin importar el tema activo. */
	color: var(--qo-color-texto-secundario) !important;
	text-decoration: underline;
}

/* Lista de opciones (categorías o preguntas), estilo "botones de chat" */
.qo-lista-opciones {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}
.qo-opcion-boton {
	background: #fff;
	border: 1.5px solid var(--qo-color-primario);
	/* Mismo motivo que arriba: se fuerza con !important para que ningún
	   tema le gane al color de texto configurado en el panel. */
	color: var(--qo-color-texto-principal) !important;
	border-radius: 20px;
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.qo-opcion-boton:hover {
	background: var(--qo-color-primario);
	color: #fff !important;
}

/* Botón para volver al menú principal */
.qo-boton-volver {
	background: transparent;
	border: none;
	color: #6b7280;
	font-size: 13px;
	cursor: pointer;
	padding: 6px 0;
	margin-bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: underline;
}

/* Botón de WhatsApp dentro del chat */
.qo-boton-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25D366;
	color: #fff !important;
	text-decoration: none !important;
	padding: 10px 16px;
	border-radius: 24px;
	font-size: 13.5px;
	font-weight: 600;
	margin-top: 4px;
}
.qo-boton-whatsapp:hover {
	filter: brightness(0.95);
}

/* Responsive: en pantallas chicas el panel ocupa casi toda la pantalla */
@media (max-width: 480px) {
	#qo-widget-root {
		right: 12px;
		bottom: 12px;
	}
	#qo-panel {
		right: 8px;
		bottom: 8px;
		width: calc(100vw - 16px);
		height: calc(100vh - 90px);
	}
	/* El cartelito no puede ser más ancho que el espacio libre a la
	   izquierda de la burbuja, así nunca se corta contra el borde
	   de la pantalla en celulares angostos. */
	.qo-burbuja-tooltip {
		max-width: calc(100vw - 100px);
		right: 66px;
		font-size: 12.5px;
	}
}