/**
 * HP Chatbot — hoja de estilos aislada del tema.
 *
 * Escrita desde cero para convivir con temas que imponen estilos globales
 * (Elementor, botones amarillos de marca, etc.).
 *
 * Estrategia de aislamiento:
 *   1. TODOS los selectores cuelgan de #hp-chatbot-root. Un id aporta
 *      especificidad (1,0,0), por encima de casi cualquier regla de tema
 *      basada en clases.
 *   2. Reset interno con `all: unset` que borra la herencia del tema dentro
 *      del widget, y reconstrucción explícita de cada propiedad.
 *   3. !important en fondo, texto y borde de los cuatro elementos que el tema
 *      estaba pintando de amarillo: burbuja flotante, cabecera, burbujas de
 *      mensaje y botones de opción.
 *
 * Paleta definitiva:
 *   #111111  burbuja flotante, cabecera, mensajes del usuario
 *   #FFFFFF  panel, botones de opción, textos sobre negro
 *   #F4F4F4  fondo de las burbujas del bot
 *   #222222  texto de las burbujas del bot
 *   #E0E0E0  borde de los botones de opción
 *   #EEEEEE  borde superior del pie
 *   #666666  texto de los botones del pie
 *   #F5C518  amarillo: SOLO la línea de 3px bajo la cabecera
 */

/* =========================================================================
 * 1. RESET INTERNO
 * Borra todo lo que el tema inyecta dentro del widget y devuelve el display
 * por defecto del navegador. A partir de aquí se reconstruye cada estilo.
 * ========================================================================= */

/*
 * IMPORTANTE: los elementos SVG quedan FUERA del reset.
 *
 * `all: unset` no solo borra fill y stroke: en Chrome y Safari la geometría
 * de un <path> (`d`) es una propiedad CSS, así que `all` la reseteaba a `none`
 * y el dibujo desaparecía por completo. De ahí la burbuja negra sin icono y la
 * X invisible. Excluyendo svg y sus formas, la geometría se conserva y el
 * aspecto se controla con las reglas de la sección 4.
 */
#hp-chatbot-root,
#hp-chatbot-root *:not(svg):not(path):not(g):not(circle):not(line):not(polyline):not(polygon):not(rect):not(ellipse) {
	all: unset;
	box-sizing: border-box;
	display: revert;
	font-family: inherit;
}

/* =========================================================================
 * 2. CONTENEDOR RAÍZ
 * ========================================================================= */

#hp-chatbot-root {
	/* Tokens de color. */
	--hp-negro: #111111;
	--hp-blanco: #ffffff;
	--hp-bot-fondo: #f4f4f4;
	--hp-bot-texto: #222222;
	--hp-borde: #e0e0e0;
	--hp-borde-suave: #eeeeee;
	--hp-pie-texto: #666666;

	position: relative;
	z-index: 99999;
	font-family: inherit; /* Hereda la tipografía del sitio. */
	font-size: 14px;
	line-height: 1.5;
	color: var( --hp-negro );
	text-align: left;
}

/* Ningún elemento interno puede desbordar horizontalmente (los SVG llevan
   medidas fijas propias y quedan excluidos). */
#hp-chatbot-root *:not(svg) {
	max-width: 100%;
}

/* =========================================================================
 * 3. BOTONES: base común
 * `all: unset` deja los <button> sin nada; se declara todo explícitamente.
 * ========================================================================= */

#hp-chatbot-root button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0 solid transparent;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	outline: none;
}

/* =========================================================================
 * 4. ICONOS SVG
 * ========================================================================= */

/*
 * Regla única para todos los iconos del widget. El color NO se fija aquí:
 * se toma con currentColor del contenedor (la burbuja y el botón cerrar lo
 * declaran en blanco), así el mismo SVG sirve sobre cualquier fondo.
 */
#hp-chatbot-root svg {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	overflow: visible !important;
}

/* Las formas heredan del <svg>; ningún atributo del markup las pisa. */
#hp-chatbot-root svg * {
	fill: inherit !important;
	stroke: inherit !important;
	stroke-width: inherit !important;
	stroke-linecap: inherit !important;
	stroke-linejoin: inherit !important;
	vector-effect: non-scaling-stroke;
}

/* =========================================================================
 * 5. BURBUJA FLOTANTE — fondo #111111, icono blanco. Nunca amarilla.
 * ========================================================================= */

#hp-chatbot-root .hp-chatbot__burbuja {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;
	/* Centra el icono en los dos ejes. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background-color: #111111 !important;
	background-image: none !important;
	/* currentColor del SVG: el icono sale blanco. */
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.22 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#hp-chatbot-root .hp-chatbot__burbuja:hover,
#hp-chatbot-root .hp-chatbot__burbuja:focus,
#hp-chatbot-root .hp-chatbot__burbuja:active {
	background-color: #111111 !important;
	color: #ffffff !important;
	border: 0 !important;
}

#hp-chatbot-root .hp-chatbot__burbuja:hover {
	transform: scale( 1.08 );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.28 );
}

#hp-chatbot-root .hp-chatbot__burbuja:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 3px;
}

/* Envoltorio del icono: también centrado, por si el tema altera el flujo. */
#hp-chatbot-root .hp-chatbot__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

/* El icono del globo de chat mide 26px; hereda el blanco de la burbuja. */
#hp-chatbot-root .hp-chatbot__burbuja svg {
	width: 26px !important;
	height: 26px !important;
}

/* Con el panel abierto la burbuja desaparece: el único cierre es la X del header. */
#hp-chatbot-root.is-abierto .hp-chatbot__burbuja {
	display: none;
}

/* =========================================================================
 * 6. PANEL
 * ========================================================================= */

#hp-chatbot-root .hp-chatbot__panel {
	position: fixed;
	right: 24px;
	bottom: 96px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc( 100vw - 32px );
	height: 580px;
	max-height: calc( 100vh - 120px );
	overflow: hidden;
	border-radius: 16px;
	background-color: #ffffff !important;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.18 );

	/* Estado cerrado; .is-abierto dispara la entrada. */
	opacity: 0;
	transform: translateY( 12px ) scale( 0.98 );
	transform-origin: bottom right;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

/* El atributo hidden manda sobre el display:flex de arriba. */
#hp-chatbot-root .hp-chatbot__panel[hidden] {
	display: none !important;
}

#hp-chatbot-root.is-abierto .hp-chatbot__panel {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
}

/* =========================================================================
 * 7. CABECERA — negra, con la única línea amarilla de toda la interfaz
 * ========================================================================= */

#hp-chatbot-root .hp-chatbot__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	background-color: #111111 !important;
	background-image: none !important;
	color: #ffffff !important;
	/* Amarillo #F5C518: línea de 3px bajo la cabecera. Único uso. */
	border: 0 !important;
	border-bottom: 3px solid #f5c518 !important;
}

#hp-chatbot-root .hp-chatbot__identidad {
	display: flex;
	flex-direction: column;
	min-width: 0; /* Deja que el subtítulo se recorte sin ensanchar la fila. */
	overflow: hidden;
}

#hp-chatbot-root .hp-chatbot__nombre {
	display: block;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

#hp-chatbot-root .hp-chatbot__subtitulo {
	display: block;
	overflow: hidden;
	color: rgba( 255, 255, 255, 0.7 ) !important;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Botón cerrar: X blanca de 20px, sin fondo. */
#hp-chatbot-root .hp-chatbot__cerrar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0 !important;
	border-radius: 6px;
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
}

#hp-chatbot-root .hp-chatbot__cerrar:hover {
	background-color: rgba( 255, 255, 255, 0.14 ) !important;
	color: #ffffff !important;
}

/* La X mide 20px dentro del área clicable de 32x32. */
#hp-chatbot-root .hp-chatbot__cerrar svg {
	width: 20px !important;
	height: 20px !important;
}

#hp-chatbot-root .hp-chatbot__cerrar:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

/* =========================================================================
 * 8. CUERPO — hilo de mensajes
 * ========================================================================= */

#hp-chatbot-root .hp-chatbot__cuerpo {
	flex: 1 1 auto;
	/* Sin min-height:0 el flex item no encoge y el primer mensaje se corta. */
	min-height: 0;
	width: 100%;
	padding: 16px;
	overflow-x: hidden; /* Nunca hay scroll horizontal. */
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: #ffffff !important;
	-webkit-overflow-scrolling: touch;
}

#hp-chatbot-root .hp-chatbot__cuerpo::-webkit-scrollbar {
	width: 6px;
}

#hp-chatbot-root .hp-chatbot__cuerpo::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: rgba( 0, 0, 0, 0.15 );
}

/* Fila de mensaje: decide el lado del hilo. */
#hp-chatbot-root .hp-chatbot__mensaje {
	display: flex;
	width: 100%;
	margin: 0 0 10px 0;
}

#hp-chatbot-root .hp-chatbot__mensaje--bot {
	justify-content: flex-start;
}

#hp-chatbot-root .hp-chatbot__mensaje--usuario {
	justify-content: flex-end;
}

/* Burbuja de texto. */
#hp-chatbot-root .hp-chatbot__texto {
	display: block;
	max-width: 80%;
	padding: 10px 14px;
	border: 0 !important;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	/* Correos y URLs largas bajan de línea en vez de desbordar. */
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
}

#hp-chatbot-root .hp-chatbot__mensaje--bot .hp-chatbot__texto {
	border-bottom-left-radius: 4px;
	background-color: #f4f4f4 !important;
	color: #222222 !important;
}

#hp-chatbot-root .hp-chatbot__mensaje--usuario .hp-chatbot__texto {
	border-bottom-right-radius: 4px;
	background-color: #111111 !important;
	color: #ffffff !important;
}

/* =========================================================================
 * 9. INDICADOR DE "ESCRIBIENDO..."
 * ========================================================================= */

#hp-chatbot-root .hp-chatbot__escribiendo {
	display: flex;
	align-items: center;
	gap: 4px;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 0 10px 0;
	padding: 12px 14px;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	background-color: #f4f4f4 !important;
}

#hp-chatbot-root .hp-chatbot__punto {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #999999;
	animation: hp-chatbot-punto 1.2s infinite ease-in-out;
}

#hp-chatbot-root .hp-chatbot__punto:nth-child( 2 ) {
	animation-delay: 0.16s;
}

#hp-chatbot-root .hp-chatbot__punto:nth-child( 3 ) {
	animation-delay: 0.32s;
}

@keyframes hp-chatbot-punto {
	0%,
	60%,
	100% {
		opacity: 0.35;
		transform: translateY( 0 );
	}

	30% {
		opacity: 1;
		transform: translateY( -3px );
	}
}

/* =========================================================================
 * 10. BOTONES DE OPCIÓN — blancos con borde gris; hover negro
 * ========================================================================= */

#hp-chatbot-root .hp-chatbot__opciones {
	display: block;
	width: 100%;
	margin: 4px 0;
}

#hp-chatbot-root .hp-chatbot__opcion {
	display: block;
	width: 100%;
	margin: 0 0 8px 0;
	padding: 12px 14px;
	border: 1px solid #e0e0e0 !important;
	border-radius: 10px;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #111111 !important;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	/* El texto largo baja de línea; nunca se corta ni desborda. */
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#hp-chatbot-root .hp-chatbot__opcion:last-child {
	margin-bottom: 0;
}

#hp-chatbot-root .hp-chatbot__opcion:hover,
#hp-chatbot-root .hp-chatbot__opcion:focus {
	border: 1px solid #111111 !important;
	background-color: #111111 !important;
	color: #ffffff !important;
}

#hp-chatbot-root .hp-chatbot__opcion:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

/* =========================================================================
 * 11. PIE — botones en estilo texto
 * ========================================================================= */

#hp-chatbot-root .hp-chatbot__pie {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 12px;
	border-top: 1px solid #eeeeee;
	background-color: #ffffff;
}

#hp-chatbot-root .hp-chatbot__pie-boton {
	display: inline-block;
	padding: 2px 0;
	border: 0;
	background-color: transparent;
	background-image: none;
	color: #666666;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: color 0.18s ease;
}

#hp-chatbot-root .hp-chatbot__pie-boton:hover {
	color: #111111;
	text-decoration: underline;
}

#hp-chatbot-root .hp-chatbot__pie-boton:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

/* =========================================================================
 * 12. MÓVIL — panel a pantalla completa
 * ========================================================================= */

@media ( max-width: 480px ) {
	#hp-chatbot-root .hp-chatbot__burbuja {
		right: 16px;
		bottom: 16px;
	}

	#hp-chatbot-root .hp-chatbot__panel {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		transform-origin: center bottom;
	}

	#hp-chatbot-root .hp-chatbot__texto {
		max-width: 85%;
	}
}

/* =========================================================================
 * 13. MOVIMIENTO REDUCIDO
 * ========================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	#hp-chatbot-root .hp-chatbot__panel,
	#hp-chatbot-root .hp-chatbot__burbuja,
	#hp-chatbot-root .hp-chatbot__opcion,
	#hp-chatbot-root .hp-chatbot__punto {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}