/* Bukets Chat — widget del chat en vivo (frontend). */

/* Los valores salen de la tienda, no de una paleta inventada: se midieron sobre bukets.ec.
   El botón "VER MÁS" de la portada es #141212 con 10px de radio y texto en mayúsculas; el texto
   corrido es #868686 en Raleway; los títulos y enlaces van en Bellota Text; los bordes suaves son
   #e6e6e6. El tema ya carga las dos familias en todo el sitio, así que el widget no descarga
   ninguna fuente: las usa si están y cae a la del sistema si no. */
#bukets-livechat-root {
	/* El color configurable en Ajustes lo pisa livechat.js con setProperty sobre este mismo
	   elemento, así que todo lo que lo use cambia de una. */
	--bkt-livechat-color: #582e6a;
	/* Los pisa livechat.js según la luminancia del color configurado. */
	--bkt-livechat-on-color: #fff;
	--bkt-livechat-on-color-soft: rgba(255, 255, 255, 0.75);
	--bkt-livechat-ink: #222;
	/* La tienda usa #868686 para el texto corrido, pero sobre blanco eso da 3,6:1 y el mínimo
	   accesible para texto normal es 4,5:1. Se oscurece lo justo para pasar (5,3:1) sin salirse
	   de la escala de grises del sitio. */
	--bkt-livechat-muted: #6b6b6b;
	--bkt-livechat-line: #e6e6e6;
	--bkt-livechat-surface: #faf9f9;
	--bkt-livechat-radius: 10px;
	--bkt-livechat-font: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--bkt-livechat-display: "Bellota Text", Georgia, serif;
	position: fixed;
	bottom: 16px;
	z-index: 99999;
	font-family: var(--bkt-livechat-font);
	line-height: 1.5;
	color: var(--bkt-livechat-ink);
}

#bukets-livechat-root[data-position="right"] {
	right: 16px;
}

#bukets-livechat-root[data-position="left"] {
	left: 16px;
}

/* El botón de WhatsApp mide 56px + 24px de margen inferior = 80px ocupados en la misma
   esquina. Cuando el chat en vivo comparte esa esquina, se apila arriba (is-stacked, lo
   agrega livechat.js al montarse) en vez de superponerse. Las burbujas de invitación van
   al costado de cada botón (no arriba de él), así que este apilado solo afecta a los
   toggles, no genera conflicto con ninguna burbuja. */
#bukets-livechat-root.is-stacked {
	bottom: 84px;
}

/* El botón "subir arriba" de la mayoría de temas (incl. este) es fixed en la misma esquina.
   Cuando aparece (al hacer scroll), el botón de WhatsApp sube (ver front.css,
   body:has(.back-top.button-show) .bkt-chat) -- y si el chat en vivo está apilado arriba de
   él (is-stacked), tiene que subir la MISMA distancia para no quedar a la misma altura que el
   de WhatsApp: confirmado en vivo que sin esto, los 2 widgets terminan con la misma
   posición y uno tapa al otro por completo (ver front.css para el detalle del cálculo). */
body:has(.back-top.button-show) #bukets-livechat-root[data-position="right"].is-stacked {
	bottom: 164px;
	transition: bottom 0.2s ease;
}
/* Solo a la DERECHA (donde está el botón "subir" del tema); a la izquierda se queda quieto al hacer scroll. */

/* La ventana abierta de WhatsApp es mucho más alta que ese hueco de 92px, así que igual lo
   taparía; livechat.js agrega esta clase mientras WhatsApp está abierto (y cierra la ventana
   propia si estuviera abierta, para no dejar las 2 superpuestas -- ver el docblock de
   syncYielding() en livechat.js). Antes esto ocultaba el botón por completo (opacity: 0): se
   veía como si el botón hubiera desaparecido/roto. Ahora se queda visible pero inerte, igual
   que un botón deshabilitado cualquiera. */
#bukets-livechat-root.is-yielding .bukets-livechat-toggle {
	opacity: 0.45;
	pointer-events: none;
	cursor: not-allowed;
	transition: opacity 0.15s ease;
}

#bukets-livechat-root.is-yielding .bukets-livechat-teaser {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.bukets-livechat-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	background: var(--bkt-livechat-color);
	color: #fff;
	font-size: 26px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bukets-livechat-toggle:hover {
	transform: scale(1.05);
}

/* Mismo hover-expand que ya tiene el botón de WhatsApp (front.js/front.css): en vez de
   overflow:hidden en el botón entero (chocaría con el badge de no leídos, que sobresale del
   círculo a propósito), el sign se angosta y la etiqueta se revela con su propio
   width:0 -> auto + overflow:hidden (pedido explícito, 25-sep-2026). */
.bukets-livechat-toggle-sign {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bukets-livechat-toggle-sign img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Icono de línea (mismo trazo que los de la cabecera de la tienda): hereda el color del botón. */
.bukets-livechat-toggle-sign svg {
	width: 26px;
	height: 26px;
	display: block;
}

.bukets-livechat-toggle-label {
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--bkt-livechat-font);
	transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.bukets-livechat-toggle {
		transition: width 0.3s ease, border-radius 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease;
	}

	.bukets-livechat-toggle:hover,
	.bukets-livechat-toggle:focus-visible {
		width: 150px;
		border-radius: 40px;
		justify-content: flex-start;
	}

	.bukets-livechat-toggle:hover .bukets-livechat-toggle-sign,
	.bukets-livechat-toggle:focus-visible .bukets-livechat-toggle-sign {
		width: 30%;
		padding-left: 10px;
	}

	.bukets-livechat-toggle:hover .bukets-livechat-toggle-label,
	.bukets-livechat-toggle:focus-visible .bukets-livechat-toggle-label {
		opacity: 1;
		width: 70%;
		padding-right: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bukets-livechat-toggle,
	.bukets-livechat-toggle-sign,
	.bukets-livechat-toggle-label {
		transition: none;
	}
}

/* Badge de mensajes del vendedor sin leer, mientras el widget está cerrado. Rojo y no el color
   de marca a propósito: tiene que distinguirse del botón para leerse como notificación, igual
   que en cualquier app de mensajería. */
.bukets-livechat-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	border: 2px solid #fff;
	background: #e53935;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	font-family: var(--bkt-livechat-font);
	animation: bkt-livechat-badge-pulse 1.6s ease-in-out infinite;
}

.bukets-livechat-badge[hidden] {
	display: none;
}

@keyframes bkt-livechat-badge-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bukets-livechat-badge {
		animation: none;
	}
}

/* Absolute dentro de #bukets-livechat-root (fixed) y al costado del toggle (no arriba): con el
   toggle apilado (is-stacked) o no, "bottom: 0" siempre la deja a la misma altura que el botón,
   sin cálculos aparte -- y al abrir hacia el costado nunca puede llegar a tapar otro widget que
   comparta esquina (a diferencia de abrir hacia arriba, que si la ventana es alta se mete en la
   zona de un botón apilado arriba). Mismo criterio que la burbuja de invitación: se abre hacia
   el centro de la pantalla, nunca hacia el borde donde está pegado el toggle. */
.bukets-livechat-window {
	display: none;
	position: absolute;
	bottom: 0;
	width: 340px;
	max-width: min(340px, calc(100vw - 116px));
	background: #fff;
	border-radius: var(--bkt-livechat-radius);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
	overflow: hidden;
	flex-direction: column;
}

#bukets-livechat-root[data-position="right"] .bukets-livechat-window {
	right: calc(100% + 12px);
	left: auto;
}

#bukets-livechat-root[data-position="left"] .bukets-livechat-window {
	left: calc(100% + 12px);
	right: auto;
}

#bukets-livechat-root.is-open .bukets-livechat-window {
	display: flex;
}

.bukets-livechat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--bkt-livechat-color);
	color: #fff;
}

.bukets-livechat-header-title {
	font-family: var(--bkt-livechat-display);
	font-weight: 400;
	font-size: 16px;
}

/* 32px de objetivo táctil (el mínimo de WCAG en web son 24) con márgenes negativos para que el
   encabezado no crezca: antes era un caracter × suelto, imposible de acertar en un celular. */
.bukets-livechat-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -6px -8px -6px 0;
	background: none;
	border: none;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.bukets-livechat-close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.bukets-livechat-body {
	height: 260px;
	overflow-y: auto;
	background: var(--bkt-livechat-surface);
	padding: 12px;
}

.bukets-livechat-messages {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Para que la pista del hilo vacío quede centrada en vez de pegada arriba. */
	min-height: 100%;
}

/* Separador entre mensajes de distinto día (lo arma appendMessage() en livechat.js): línea a
   cada lado con la fecha en el medio, mismo criterio visual que cualquier chat. */
.bukets-livechat-date-divider {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bkt-livechat-muted);
}

.bukets-livechat-date-divider::before,
.bukets-livechat-date-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--bkt-livechat-line);
}

.bukets-livechat-msg {
	max-width: 80%;
	padding: 8px 12px;
	border-radius: 18px;
	font-size: 14px;
	word-wrap: break-word;
}

/* La burbuja del cliente iba en el verde de WhatsApp, que no tiene nada que ver con esta tienda:
   ahora es el color de marca, y la del vendedor blanca con borde, como las tarjetas del sitio. */
.bukets-livechat-msg-visitor {
	align-self: flex-end;
	background: var(--bkt-livechat-color);
	/* El texto lo decide livechat.js según la luminancia del color configurado: con un tono claro
	   el blanco fijo dejaba los mensajes del propio cliente ilegibles. */
	color: var(--bkt-livechat-on-color, #fff);
}

.bukets-livechat-msg-seller {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--bkt-livechat-line);
}

/* Envuelve avatar + burbuja del vendedor. El propio mensaje no lleva fila: ya se distingue por
   estar alineado a la derecha, y con un solo participante del lado del cliente un avatar ahí no
   suma nada. */
.bukets-livechat-msg-row {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	align-self: flex-start;
	max-width: 88%;
}

.bukets-livechat-msg-row .bukets-livechat-msg {
	align-self: auto;
	max-width: 100%;
}

.bukets-livechat-avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bkt-livechat-color);
	color: var(--bkt-livechat-on-color, #fff);
	font-family: var(--bkt-livechat-font);
	font-size: 11px;
	font-weight: 600;
}

/* Burbuja de "esperando respuesta": 3 puntos en cascada, con el mismo aspecto que una burbuja
   del vendedor para no meter un componente visual nuevo en el hilo. */
.bukets-livechat-msg-dots {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
}

.bukets-livechat-msg-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bkt-livechat-muted);
	animation: bkt-livechat-dot 1.2s ease-in-out infinite;
}

.bukets-livechat-msg-dots span:nth-child(2) {
	animation-delay: 0.15s;
}

.bukets-livechat-msg-dots span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes bkt-livechat-dot {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.5;
	}

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

@media (prefers-reduced-motion: reduce) {
	.bukets-livechat-msg-dots span {
		animation: none;
	}
}

.bukets-livechat-msg-body {
	word-wrap: break-word;
}

.bukets-livechat-msg-time {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	line-height: 1;
	color: var(--bkt-livechat-muted);
	text-align: right;
}

/* Sobre la burbuja del cliente, que ahora va en el color de marca, un gris no se lee: la hora
   pasa a blanco translúcido. */
.bukets-livechat-msg-visitor .bukets-livechat-msg-time {
	color: var(--bkt-livechat-on-color-soft, rgba(255, 255, 255, 0.75));
}

/* Los enlaces dentro de la burbuja tampoco pueden ir en el azul de siempre. */
.bukets-livechat-msg-visitor .bukets-livechat-msg-body a {
	color: var(--bkt-livechat-on-color, #fff);
}

/* Links del propio dominio (linkificados en JS): los de otros dominios quedan como texto plano. */
.bukets-livechat-msg-body a {
	color: #1a73e8;
	text-decoration: underline;
	word-break: break-all;
}

/* Mini-ficha de producto debajo del mensaje: imagen a la izquierda, nombre + precio a la
   derecha, borde sutil y hover discreto, consistente con el acento rosa del widget. */
.bukets-livechat-product-previews {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.bukets-livechat-product-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--bkt-livechat-line);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bukets-livechat-product-preview:hover {
	border-color: var(--bkt-livechat-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bukets-livechat-product-preview img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.bukets-livechat-product-preview-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bukets-livechat-product-preview-name {
	font-size: 13px;
	color: #1d2327;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bukets-livechat-product-preview-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--bkt-livechat-color);
}

.bukets-livechat-intro,
.bukets-livechat-composer {
	padding: 12px;
	background: #f0f0f0;
	border-top: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Mini-wizard: el bloque de nombre + consentimiento se muestra solo la primera vez; el
   composer (mensajes + textarea simple) aparece una vez creada la conversación. */
.bukets-livechat-intro {
	display: flex;
}

.bukets-livechat-composer {
	display: none;
}

.bukets-livechat-composer.is-active {
	display: flex;
}

/* Tarjeta con checkbox propio (en vez del cuadradito nativo del navegador, sin relación visual
   con la marca): checkmark propio dibujado con clip-path, negro de marca al marcar. Se usa igual
   en el paso 1 (nombre + consentimiento) y en el formulario "fuera de horario". */
.bukets-livechat-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--bkt-livechat-surface);
	border: 1px solid var(--bkt-livechat-line);
	font-size: 12px;
	line-height: 1.55;
	color: var(--bkt-livechat-muted);
}

.bukets-livechat-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	margin-top: 1px;
	border-radius: 6px;
	border: 1.5px solid currentColor;
	opacity: 0.55;
	background: transparent;
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.bukets-livechat-consent input[type="checkbox"]::before {
	content: '';
	width: 11px;
	height: 11px;
	transform: scale(0);
	transition: transform 0.12s ease;
	background-color: #fff;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.bukets-livechat-consent input[type="checkbox"]:checked {
	background: var(--bkt-livechat-color);
	border-color: var(--bkt-livechat-color);
	opacity: 1;
}

.bukets-livechat-consent input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.bukets-livechat-intro textarea,
.bukets-livechat-composer textarea {
	width: 100%;
	font-family: var(--bkt-livechat-font);
	border: 1px solid var(--bkt-livechat-line);
	border-radius: var(--bkt-livechat-radius);
	padding: 8px;
	/* 16px y no 14: por debajo de 16, Safari en iPhone hace zoom al enfocar y descuadra la
	   ventana. Da igual arreglarlo en el paso 1 si el paso 2 lo vuelve a disparar. */
	font-size: 16px;
	resize: vertical;
	box-sizing: border-box;
}

/* Mismo gesto que los CTA de la tienda: mayúsculas, algo de tracking y 10px de radio. */
.bukets-livechat-send,
.bukets-livechat-offline-send,
.bukets-livechat-restart {
	background: var(--bkt-livechat-color);
	color: #fff;
	border: none;
	border-radius: var(--bkt-livechat-radius);
	padding: 10px 18px;
	cursor: pointer;
	font-family: var(--bkt-livechat-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: opacity 0.15s ease;
}

.bukets-livechat-send:hover,
.bukets-livechat-offline-send:hover,
.bukets-livechat-restart:hover {
	opacity: 0.85;
}

.bukets-livechat-send {
	align-self: flex-end;
}

/* Botón de enviar del composer como círculo con ícono, en vez de la píldora de texto: el texto
   real (Enviar/Enviando…, lo sigue escribiendo setEnviando() en livechat.js) queda oculto a la
   vista con color transparente, pero sigue ahí para el lector de pantalla -- no se toca nada
   del JS existente, es puramente visual. NO va en la clase base .bukets-livechat-send porque
   "Empezar a chatear" y "Empezar otra conversación" comparten esa clase y sí necesitan su
   texto visible. */
.bukets-livechat-send-icon {
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	color: transparent;
	overflow: hidden;
	flex-shrink: 0;
}

.bukets-livechat-send-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* "Eliminar mis datos": link discreto de revocación de consentimiento (LOPDP), sin competir
   visualmente con el botón "Enviar". */
.bukets-livechat-delete {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	color: var(--bkt-livechat-muted);
	font-size: 11px;
	text-decoration: underline;
	cursor: pointer;
	line-height: 1;
}

.bukets-livechat-delete:hover {
	color: #c62828;
}

/* Aviso del tope de duración (los minutos configurados en Ajustes): texto chico y gris, sin competir con los mensajes. Al
   último minuto (.is-ending) pasa a rojo para que se note el aviso. */
.bukets-livechat-duration-note {
	margin: 0;
	font-size: 11px;
	color: var(--bkt-livechat-muted);
	text-align: center;
}

.bukets-livechat-duration-note.is-ending {
	color: #c62828;
	font-weight: 600;
}

/* Nombre del vendedor que atiende, debajo del header -- se actualiza solo en cada sondeo. */
.bukets-livechat-agent-note {
	margin: 0;
	padding: 6px 16px;
	font-size: 12px;
	color: var(--bkt-livechat-muted);
	background: #f7f7f7;
	border-bottom: 1px solid #eee;
}

/* Aviso de error inline (reemplaza al alert() nativo): aparece debajo del composer/intro, con
   una transición simple, y se quita solo o al próximo envío exitoso. */
.bukets-livechat-error {
	margin: 0;
	padding: 0 10px;
	max-height: 0;
	overflow: hidden;
	background: #fdecea;
	border: 1px solid #f5c6cb;
	color: #c62828;
	font-size: 12px;
	border-radius: 8px;
	opacity: 0;
	transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

.bukets-livechat-error.is-visible {
	opacity: 1;
	max-height: 64px;
	padding: 8px 10px;
}

/* Confirmación inline de "Eliminar mis datos" (reemplaza al window.confirm()): dos botones
   chiquitos que reemplazan momentáneamente al botón original, sin overlay ni modal. */
.bukets-livechat-delete-confirm {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: #c62828;
}

.bukets-livechat-delete-confirm button {
	border: 1px solid var(--bkt-livechat-line);
	border-radius: 4px;
	padding: 3px 10px;
	font-size: 11px;
	cursor: pointer;
	line-height: 1.4;
}

/* "Cancelar": el fondo va acá (no en la regla genérica de arriba) para que no le gane por
   especificidad CSS al fondo rojo de "Sí, eliminar" -- las 2 clases quedan al mismo nivel. */
.bukets-livechat-delete-confirm-no {
	background: #fff;
	color: #c62828;
}

.bukets-livechat-delete-confirm-yes {
	background: #c62828;
	border-color: #c62828;
	color: #fff;
	font-weight: 600;
}

.bukets-livechat-delete-confirm-yes:hover {
	background: #b02323;
}

.bukets-livechat-delete-confirm button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ------------------------------------------------------------------
   Paso 1 del asistente: nombre + consentimiento.
   ------------------------------------------------------------------ */

/* Mientras dura el paso 1 se esconde el área de mensajes: abrir el widget con un recuadro vacío
   de 260px encima del formulario era lo que desorientaba. La clase OCULTA en vez de mostrar, a
   propósito: sin ella se ve todo, que es el comportamiento de siempre. */
.bukets-livechat-window.is-intro .bukets-livechat-body {
	display: none;
}

.bukets-livechat-intro[hidden] {
	display: none;
}

/* Barra de progreso de 2 segmentos en vez de texto "Paso X de 2": se entiende que hay una
   etapa siguiente sin necesitar la palabra "paso" (pedido explícito, 25-sep-2026). El texto
   sigue existiendo como aria-label del contenedor, para lectores de pantalla. */
.bukets-livechat-step-dots {
	display: flex;
	gap: 5px;
	margin: 0 0 2px;
}

.bukets-livechat-step-dot {
	height: 3px;
	flex: 1;
	border-radius: 2px;
	background: var(--bkt-livechat-line);
}

.bukets-livechat-step-dot.is-active {
	background: var(--bkt-livechat-color);
}

/* El aviso legal lo escribe el administrador y puede ser largo: este bloque scrollea con tope de
   alto para que el botón de continuar nunca quede fuera de la ventana. Antes no había tope y un
   texto largo empujaba el botón fuera del `overflow: hidden` de la ventana: el cliente no tenía
   forma de seguir. */
.bukets-livechat-intro-scroll {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 44vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Con overflow-y distinto de visible el navegador también recorta en horizontal, y el anillo
	   de foco del campo de nombre (que ocupa todo el ancho) quedaba cortado a los lados. El
	   padding le da aire y el margen negativo lo compensa para no mover el diseño. */
	padding: 4px;
	margin: -4px;
}

.bukets-livechat-intro-title {
	margin: 0;
	font-family: var(--bkt-livechat-display);
	font-size: 19px;
	font-weight: 400;
	color: #000;
}

.bukets-livechat-intro-lead {
	margin: 0;
	font-size: 13px;
	color: var(--bkt-livechat-muted);
}

/* Agrupa nombre+email en una sola tarjeta (mismo lenguaje visual que la tarjeta de
   consentimiento de más abajo): antes el gap de .bukets-livechat-intro-scroll era el mismo
   entre una etiqueta y su propio campo que entre un campo y la SIGUIENTE etiqueta, así que
   nada se leía "emparejado" (pedido explícito, 25-sep-2026). Ahora el par etiqueta+campo va
   apretado adentro (bukets-livechat-data-field) y los dos pares entre sí quedan separados por
   el gap del contenedor. */
.bukets-livechat-data-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f4f4f6;
	border-radius: var(--bkt-livechat-radius);
	padding: 10px;
}

.bukets-livechat-data-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bukets-livechat-field-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.bukets-livechat-field-optional {
	font-size: 11px;
	font-weight: 400;
	color: var(--bkt-livechat-muted);
}

/* Mismo tratamiento que "Opcional" del nombre, pero para lo que sí hace falta: sin esto, "Tu
   email" no decía nada y se leía tan opcional como "Tu nombre" aunque el servidor lo exige
   (IniciarConversacion::validarEmail) -- el cliente solo se enteraba al fallar el envío. */
.bukets-livechat-field-required {
	font-size: 11px;
	font-weight: 400;
	color: #a02222;
}

/* 16px y no 14: por debajo de 16, Safari en iPhone hace zoom al enfocar el campo y descuadra la
   ventana entera. */
.bukets-livechat-name-input,
.bukets-livechat-email-input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--bkt-livechat-font);
	border: 1px solid var(--bkt-livechat-line);
	border-radius: var(--bkt-livechat-radius);
	padding: 10px;
	font-size: 16px;
}

.bukets-livechat-email-input[aria-invalid='true'] {
	border-color: #d63638;
}

.bukets-livechat-consent-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-radius: 8px;
	padding: 10px;
	background: #f4f4f6;
}

.bukets-livechat-consent-block.is-invalid {
	background: #fdecea;
	box-shadow: inset 3px 0 0 #c62828;
}

/* El texto completo del aviso, fuera de la etiqueta de la casilla: así el lector de pantalla no
   recita el aviso entero cada vez que el foco cae en la casilla, y tocar el texto en el celular
   para leerlo no marca el consentimiento sin querer. */
.bukets-livechat-consent-text {
	max-height: 92px;
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: 11px;
	line-height: 1.5;
	color: var(--bkt-livechat-muted);
}

.bukets-livechat-intro-actions {
	display: flex;
}

.bukets-livechat-continue {
	width: 100%;
	align-self: stretch;
	padding: 12px 18px;
	font-weight: 600;
}

/* Pista del paso 2: el hilo recién estrenado también está vacío, y sin esto el cliente aterriza
   en el mismo recuadro gris que le acabamos de sacar del paso 1. */
/* Antes centrado verticalmente (margin: auto 0) en la caja de 260px: con SOLO una línea de
   texto se veía bien, pero al sumarle los chips de tema debajo quedaba un vacío enorme arriba y
   otro abajo, y el conjunto se leía desproporcionado/flotando en el medio de la nada (pedido
   explícito, 25-sep-2026). Ahora arranca cerca del encabezado, como el inicio real de un hilo. */
.bukets-livechat-hint {
	margin: 20px 0 4px;
	text-align: center;
	font-size: 13px;
	color: var(--bkt-livechat-muted);
}

/* Chips de tema que precompletan el textarea (no lo envían solos, el visitante puede editar
   antes de tocar Enviar) -- viven junto a la pista del hilo vacío, no en el paso 1 de datos,
   que es donde estaban en un intento anterior y generaban confusión sobre qué había que hacer
   primero (pedido explícito, 25-sep-2026). */
.bukets-livechat-quick-replies {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 8px 0;
}

.bukets-livechat-quick-reply {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	padding: 7px 14px;
	border-radius: 20px;
	background: #fff;
	color: var(--bkt-livechat-color);
	font-size: 12.5px;
	font-weight: 600;
}

.bukets-livechat-quick-reply:hover {
	background: var(--bkt-livechat-line);
}

/* Hasta que la conversación existe, "Eliminar mis datos" no hace nada (su handler sale sin
   conversationId) y el aviso de duración hablaría de algo que no arrancó.
   La clase la agrega el JS para OCULTAR, no al revés: con `:not(.is-started)` bastaba con que
   llegara esta hoja junto al JS viejo cacheado --que nunca escribe esa clase-- para que el botón
   de borrar los datos, que es el de derechos LOPDP, desapareciera de la pantalla para siempre. */
.bukets-livechat-composer.is-pending .bukets-livechat-delete,
.bukets-livechat-composer.is-pending .bukets-livechat-duration-note {
	display: none;
}

.bukets-livechat-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   Foco visible. El widget no tenía NI UNA regla :focus: quien navega con teclado no sabía nunca
   dónde estaba parado. El anillo es de dos tonos a propósito -- el color de acento lo configura
   el administrador y podría ser oscuro, con lo que un anillo oscuro solo desaparecería.
   ------------------------------------------------------------------ */
/* Sin border-radius acá: el selector lleva un id, así que le gana a cualquier regla de
   componente, y le cuadraba las esquinas al botón flotante circular justo al enfocarlo. El
   outline ya sigue el contorno real del elemento. */
#bukets-livechat-root :focus-visible {
	outline: 2px solid #1d2327;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff;
}

.bukets-livechat-header :focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
}

.bukets-livechat-send:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Scrollear el chat no arrastra la página de la tienda detrás. */
.bukets-livechat-body {
	overscroll-behavior: contain;
}

/* Conversación cerrada: el hilo queda visible con la despedida del vendedor y el composer se
   bloquea. Se oculta solo lo de escribir y el contador -- "Eliminar mis datos" sigue a la vista,
   porque revocar el consentimiento (LOPDP) tiene que poder hacerse también sobre una conversación
   ya cerrada. */
.bukets-livechat-composer.is-closed textarea,
.bukets-livechat-composer.is-closed .bukets-livechat-send,
.bukets-livechat-composer.is-closed .bukets-livechat-duration-note {
	display: none;
}

.bukets-livechat-closed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.bukets-livechat-closed-text {
	margin: 0;
	font-size: 13px;
	color: var(--bkt-livechat-muted);
}

/* Misma forma que el botón "Enviar" al que reemplaza en el lugar: es la única acción que le
   queda al visitante, no un enlace discreto. */

.bukets-livechat-offline {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bukets-livechat-offline p {
	margin: 0;
	font-size: 14px;
	color: #333;
}

.bukets-livechat-offline-next {
	font-weight: 600;
	color: var(--bkt-livechat-color);
}

.bukets-livechat-offline label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: #444;
}

.bukets-livechat-offline input,
.bukets-livechat-offline textarea {
	border: 1px solid var(--bkt-livechat-line);
	border-radius: 8px;
	padding: 8px;
	font-size: 14px;
	box-sizing: border-box;
	width: 100%;
}



.bukets-livechat-offline-result {
	font-size: 13px;
}

.bukets-livechat-offline-result.is-success {
	color: #2e7d32;
}

.bukets-livechat-offline-result.is-error {
	color: #c62828;
}

/* Burbuja de invitación a chatear: aparece sola tras unos segundos y se puede cerrar con la ×.
   Va al costado del botón (no arriba), centrada verticalmente con él, hacia el centro de la
   pantalla — nunca hacia el borde donde está pegado el botón, para que no se salga de la
   ventana. Al ser absolute dentro de #bukets-livechat-root (fixed), esto funciona igual esté
   el widget apilado (is-stacked) o no, sin cálculos aparte. */
.bukets-livechat-teaser {
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: min(240px, calc(100vw - 116px));
	background: #fff;
	border: 1px solid #d7c6e6;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 10px 12px;
	font-size: 13px;
	color: #1d2327;
	opacity: 0;
	transform: translateY(calc(-50% + 8px));
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

#bukets-livechat-root[data-position="right"] .bukets-livechat-teaser {
	right: calc(100% + 12px);
	left: auto;
}

#bukets-livechat-root[data-position="left"] .bukets-livechat-teaser {
	left: calc(100% + 12px);
	right: auto;
}

.bukets-livechat-teaser.is-visible {
	opacity: 1;
	transform: translateY(-50%);
	pointer-events: auto;
}

.bukets-livechat-teaser.is-hiding {
	opacity: 0;
	transform: translateY(calc(-50% + 8px));
	pointer-events: none;
}

.bukets-livechat-teaser-text {
	flex: 1;
}

.bukets-livechat-teaser-close {
	background: none;
	border: none;
	font-size: 16px;
	line-height: 1;
	color: #50575e;
	cursor: pointer;
	padding: 0 2px;
}

@media (max-width: 600px) {
	/* En móvil la ventana deja de colgarse al costado del botón y pasa a ser una hoja anclada
	   abajo, casi a todo el ancho. Antes heredaba el layout de escritorio: una columna de 259 px
	   pegada al borde (max-width: 100vw - 116px) con el cuerpo fijo en 260 px de alto, o sea la
	   conversación metida en una sexta parte de la pantalla mientras el resto quedaba vacío. */
	#bukets-livechat-root[data-position="right"] .bukets-livechat-window,
	#bukets-livechat-root[data-position="left"] .bukets-livechat-window {
		position: fixed;
		right: 12px;
		left: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 24px);
		/* dvh sigue a la barra del navegador del celular, que aparece y desaparece al hacer
		   scroll; con vh sola la hoja se pasaba de alto y el composer quedaba debajo del borde.
		   La línea de vh queda arriba como respaldo para los navegadores sin dvh. */
		max-height: calc(100dvh - 24px);
	}

	/* El alto sigue al viewport en vez de quedarse en 260 px fijos, con un techo para que el
	   composer y el encabezado siempre entren. */
	.bukets-livechat-body {
		height: min(58vh, 420px);
	}


	.bukets-livechat-teaser {
		max-width: min(200px, calc(100vw - 100px));
		padding: 8px 10px;
		font-size: 12px;
	}

	#bukets-livechat-root[data-position="right"] .bukets-livechat-teaser {
		right: calc(100% + 8px);
	}

	#bukets-livechat-root[data-position="left"] .bukets-livechat-teaser {
		left: calc(100% + 8px);
	}
}

/* La barra fija inferior de la tienda (41 px) se ve hasta 991 px: los botones suben esa altura. */
@media (max-width: 991px) {
	body:has(.header-mobile-fixed) {
		--bkt-bar: 41px;
	}

	#bukets-livechat-root {
		bottom: calc(16px + var(--bkt-bar, 0px));
	}

	#bukets-livechat-root.is-stacked {
		bottom: calc(84px + var(--bkt-bar, 0px));
	}
}

/* Escribiendo en el checkout en celular: los botones se ocultan para no tapar el campo ni el teclado. */
@media (max-width: 767px) {
	body:has(form.checkout:focus-within) .bkt-chat,
	body:has(form.checkout:focus-within) #bukets-livechat-root,
	body:has(form.checkout:focus-within) #bukets-consent-reopen,
	body:has(form.checkout:focus-within) .bcs-reopen-trigger {
		opacity: 0;
		pointer-events: none;
	}
}
}