/* Prodecad Chat — widget del visitante.
 *
 * Colocacion: abajo a la DERECHA, el hueco que deja el boton de WhatsApp al
 * retirarlo. La izquierda esta ocupada por el selector de idiomas flotante, que
 * se puso ahi precisamente porque la derecha estaba pillada.
 *
 * Paleta: la del sitio, medida sobre el HTML de la home — negro #0A0A0A y oro
 * #EFB810. Los rojos que aparecen en la home son de las banderas del selector,
 * no de la marca.
 *
 * POR QUE TODO CUELGA DE #pcd-chat-raiz
 *
 * La primera version usaba clases sueltas (.pcd-burbuja) y el tema se la comio
 * entera: la burbuja salio en produccion como un boton rectangular con borde
 * rosa #cc3366, padding de 8x16 y display block, con el rotulo debajo del
 * circulo en vez de al lado. Una clase pesa 0,1,0 y en este WordPress hay
 * Elementor, Woo, Royal Addons y el tema peleando por los <button>.
 *
 * Colgarlo todo del id sube la especificidad a 1,1,0 y gana sin repartir
 * !important por todas partes. Solo llevan !important las cuatro propiedades
 * del reset del boton, que es justo donde el tema pega mas fuerte.
 */

#pcd-chat-raiz {
	/* Separacion desde el borde inferior. Es una variable y no un numero porque
	 * el carrito flotante de WooCommerce ocupa esta misma esquina cuando el
	 * visitante mete algo en la cesta; el JS sube este valor para apartarse. */
	--pcd-abajo: 20px;
	--pcd-oro: #efb810;
	--pcd-oro-claro: #ffde00;
	--pcd-negro: #0a0a0a;
	--pcd-panel: #141414;
	--pcd-linea: #2a2a2a;
	--pcd-texto: #f5f5f5;
	--pcd-suave: #a8a8a8;
	--pcd-verde: #23b80b;
}

/* ── Burbuja ───────────────────────────────────────────────────────────── */

#pcd-chat-raiz .pcd-burbuja {
	position: fixed;
	right: 20px;
	bottom: var(--pcd-abajo);
	z-index: 99980; /* por debajo del carrito lateral, que va mas alto */
	transition: bottom 0.2s ease;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	width: auto !important;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

#pcd-chat-raiz .pcd-burbuja:hover,
#pcd-chat-raiz .pcd-burbuja:focus {
	background: none !important;
	border: 0 !important;
}

#pcd-chat-raiz .pcd-burbuja__circulo {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	flex: none;
	border-radius: 50%;
	background: var(--pcd-negro);
	border: 2px solid var(--pcd-oro);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#pcd-chat-raiz .pcd-burbuja:hover .pcd-burbuja__circulo {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}

#pcd-chat-raiz .pcd-burbuja__circulo svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--pcd-oro);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* El rotulo solo en pantallas anchas: en movil compite con el pie de pagina. */
#pcd-chat-raiz .pcd-burbuja__rotulo {
	order: -1;
	flex: none;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--pcd-negro);
	color: var(--pcd-texto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Punto de aviso del saludo sin leer. */
#pcd-chat-raiz .pcd-burbuja__punto {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--pcd-oro-claro);
	border: 2px solid var(--pcd-negro);
}

#pcd-chat-raiz .pcd-burbuja[hidden],
#pcd-chat-raiz .pcd-panel[hidden] {
	display: none !important;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

#pcd-chat-raiz .pcd-panel {
	position: fixed;
	right: 20px;
	bottom: var(--pcd-abajo);
	z-index: 99981;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - var(--pcd-abajo) - 20px);
	overflow: hidden;
	border-radius: 16px;
	background: var(--pcd-panel);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
	font-family: inherit;
	font-size: 15px;
	color: var(--pcd-texto);
	animation: pcd-entrar 0.22s ease-out;
}

@keyframes pcd-entrar {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	#pcd-chat-raiz .pcd-panel {
		animation: none;
	}
	#pcd-chat-raiz .pcd-burbuja__circulo {
		transition: none;
	}
}

#pcd-chat-raiz .pcd-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	padding: 14px 14px 14px 18px;
	background: var(--pcd-negro);
	border-bottom: 1px solid var(--pcd-linea);
}

#pcd-chat-raiz .pcd-cab__punto {
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--pcd-verde);
}

#pcd-chat-raiz .pcd-cab__titulo {
	flex: 1;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

/* La salida a una persona, siempre a la vista. */
#pcd-chat-raiz .pcd-cab__wa {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 8px;
	color: var(--pcd-verde);
	text-decoration: none !important;
	box-shadow: none;
}

#pcd-chat-raiz .pcd-cab__wa:hover {
	background: #232323;
	color: var(--pcd-verde);
}

#pcd-chat-raiz .pcd-cab__wa svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

#pcd-chat-raiz .pcd-cab__cerrar {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px;
	background: transparent !important;
	color: var(--pcd-suave);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#pcd-chat-raiz .pcd-cab__cerrar:hover {
	background: #232323 !important;
	color: #fff;
}

/* ── Conversacion ──────────────────────────────────────────────────────── */

#pcd-chat-raiz .pcd-hilo {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	scrollbar-width: thin;
	scrollbar-color: #333 transparent;
}

#pcd-chat-raiz .pcd-hilo::-webkit-scrollbar {
	width: 8px;
}
#pcd-chat-raiz .pcd-hilo::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 4px;
}

#pcd-chat-raiz .pcd-msg {
	max-width: 85%;
	margin: 0;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

#pcd-chat-raiz .pcd-msg--bot {
	align-self: flex-start;
	background: #1f1f1f;
	color: var(--pcd-texto);
	border-bottom-left-radius: 5px;
}

#pcd-chat-raiz .pcd-msg--yo {
	align-self: flex-end;
	background: var(--pcd-oro);
	color: var(--pcd-negro);
	font-weight: 500;
	border-bottom-right-radius: 5px;
}

#pcd-chat-raiz .pcd-msg a {
	color: var(--pcd-oro-claro);
	text-decoration: underline;
	word-break: break-all;
}

#pcd-chat-raiz .pcd-msg--yo a {
	color: var(--pcd-negro);
}

/* Puntos de "escribiendo". */
#pcd-chat-raiz .pcd-puntos {
	display: inline-flex;
	gap: 4px;
	padding: 3px 0;
}

#pcd-chat-raiz .pcd-puntos i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pcd-suave);
	animation: pcd-latir 1.1s infinite ease-in-out;
}

#pcd-chat-raiz .pcd-puntos i:nth-child(2) {
	animation-delay: 0.16s;
}
#pcd-chat-raiz .pcd-puntos i:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes pcd-latir {
	0%,
	70%,
	100% {
		opacity: 0.28;
		transform: translateY(0);
	}
	35% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	#pcd-chat-raiz .pcd-puntos i {
		animation: none;
		opacity: 0.6;
	}
}

/* Boton de salida a WhatsApp dentro del hilo. */
#pcd-chat-raiz .pcd-wa {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--pcd-verde);
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none !important;
}

#pcd-chat-raiz .pcd-wa svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* ── Barra de escritura ────────────────────────────────────────────────── */

#pcd-chat-raiz .pcd-barra {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	flex: none;
	padding: 12px;
	border-top: 1px solid var(--pcd-linea);
	background: var(--pcd-negro);
}

#pcd-chat-raiz .pcd-barra textarea {
	flex: 1;
	min-width: 0;
	width: auto;
	min-height: 42px;
	max-height: 110px;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid var(--pcd-linea);
	border-radius: 12px;
	background: #1c1c1c;
	color: var(--pcd-texto);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	resize: none;
	outline: none;
	box-shadow: none;
}

#pcd-chat-raiz .pcd-barra textarea::placeholder {
	color: #6e6e6e;
}

#pcd-chat-raiz .pcd-barra textarea:focus {
	border-color: var(--pcd-oro);
	background: #1c1c1c;
	color: var(--pcd-texto);
}

#pcd-chat-raiz .pcd-enviar {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 12px;
	background: var(--pcd-oro) !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#pcd-chat-raiz .pcd-enviar:disabled {
	opacity: 0.4;
	cursor: default;
}

#pcd-chat-raiz .pcd-enviar svg {
	width: 19px;
	height: 19px;
	fill: var(--pcd-negro);
}

#pcd-chat-raiz .pcd-pie {
	flex: none;
	margin: 0;
	padding: 0 14px 11px;
	background: var(--pcd-negro);
	color: #6e6e6e;
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}

/* ── Movil ─────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
	#pcd-chat-raiz {
		--pcd-abajo: 16px;
	}
	#pcd-chat-raiz .pcd-burbuja__rotulo {
		display: none;
	}
	#pcd-chat-raiz .pcd-burbuja {
		right: 16px;
	}
	/* A pantalla completa: en un movil un panel de 380px flotando deja una
	 * franja de web viva detras que se toca sin querer al escribir. */
	#pcd-chat-raiz .pcd-panel {
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	/* Si el panel ocupa la pantalla entera, lo que flota por encima de la pagina
	 * tiene que apartarse. Son dos vecinos concretos: el selector de idiomas
	 * flotante (.pcd-idiomas, del mismo sitio, z-index 99998) y el carrito de
	 * Woo (z-index 9999997). Los dos van por encima del panel, y subir el
	 * nuestro por encima de ellos significaria taparle tambien la barra de
	 * administracion a WordPress — que esta en 99999, justo en medio. */
	body.pcd-chat-abierto .pcd-idiomas,
	body.pcd-chat-abierto .xoo-wsc-basket {
		display: none !important;
	}

	/* La barra de administracion solo la ve el administrador, pero si no se
	 * descuenta se come la cabecera del panel y con ella la X de cerrar. */
	body.admin-bar #pcd-chat-raiz .pcd-panel {
		top: 46px;
		height: auto;
		max-height: none;
	}
}

/* Pantallas bajas en horizontal: que el panel no se salga por arriba. */
@media (max-height: 620px) and (min-width: 521px) {
	#pcd-chat-raiz .pcd-panel {
		height: calc(100vh - var(--pcd-abajo) - 20px);
	}
}