/* Buscador conversacional Biottek.
   Estetica del mockup aprobado: glassmorphism, bordes muy redondeados,
   paleta teal #248C92 + gris #E2E2E2 confirmada por el cliente. */

/* Tipografia: Plus Jakarta Sans, ya instalada en Elementor. Al venir del tema
   tiene todos los pesos, asi que la jerarquia (300/500/600/700) si funciona
   —a diferencia de ABC Oracle, de la que solo se recibio el peso Light. */

/* Las reglas del Kit de Elementor resuelven la fuente desde SUS variables, y
   sus selectores llegan a (0,3,1) por los :not() encadenados — imposible de
   ganar con clases sin caer en !important. Redefinir la variable dentro de
   nuestros componentes hace que sus propias reglas rindan la fuente correcta,
   sin pelear la cascada y sin tocar la tipografía del resto del sitio. */
.bkss-chat,
.bkss-hero,
.bkss-perfiles {
	--e-global-typography-primary-font-family: 'Plus Jakarta Sans';
	--e-global-typography-secondary-font-family: 'Plus Jakarta Sans';
	--e-global-typography-text-font-family: 'Plus Jakarta Sans';
	--e-global-typography-accent-font-family: 'Plus Jakarta Sans';
}

/* El Kit del tema pinta el :hover de todo <button> en rosa. Ninguno de nuestros
   controles lo declara, así que lo heredaban: los chips del hero se ponían
   rosas al pasar el cursor, fuera de la paleta aprobada. Se fija el hover de
   todos los interactivos del asistente en teal, con dos clases para ganarle al
   selector del Kit sin recurrir a !important. */
.bkss-chat .bkss-chip:hover,
.bkss-chat .bkss-icono:hover,
.bkss-chat .bkss-icono-caja:hover,
.bkss-chat .bkss-enviar:hover:not(:disabled),
.bkss-chat .bkss-accion:hover,
.bkss-chat .bkss-enlace:hover,
.bkss-chat .bkss-ver-mas:hover,
.bkss-chat .bkss-confirmar-btns button:hover,
.bkss-chat .bkss-opciones-archivo button:hover,
.bkss-perfiles .bkss-flecha:hover:not(:disabled),
.bkss-burbuja:hover {
	border-color: rgba(36, 140, 146, 0.35);
}

.bkss-chat .bkss-chip:hover,
.bkss-chat .bkss-enlace:hover,
.bkss-chat .bkss-ver-mas:hover,
.bkss-chat .bkss-confirmar-btns [data-conf="no"]:hover,
.bkss-chat .bkss-opciones-archivo button:hover {
	color: var(--bkss-teal-600, #1B6E73);
	background: rgba(36, 140, 146, 0.1);
}

.bkss-chat .bkss-enviar:hover:not(:disabled),
.bkss-chat .bkss-accion:hover,
.bkss-chat .bkss-confirmar-btns [data-conf="si"]:hover,
.bkss-burbuja:hover {
	background: var(--bkss-teal-600, #1B6E73);
	color: #fff;
}

.bkss-chat .bkss-icono:hover,
.bkss-chat .bkss-icono-caja:hover,
.bkss-perfiles .bkss-flecha:hover:not(:disabled) {
	background: rgba(36, 140, 146, 0.14);
	color: var(--bkss-teal-600, #1B6E73);
}

/* Mismo motivo en :focus — varios temas usan ahí el color de acento. El anillo
   se conserva: quitarlo dejaría sin rastro visible a quien navega con teclado. */
.bkss-chat button:focus-visible,
.bkss-chat a:focus-visible,
.bkss-perfiles .bkss-flecha:focus-visible,
.bkss-burbuja:focus-visible {
	outline: 2px solid var(--bkss-teal, #248C92);
	outline-offset: 2px;
}

.bkss-chat {
	--bkss-teal: #248C92;
	--bkss-teal-600: #1B6E73;
	--bkss-teal-800: #123F42;
	--bkss-gris: #E2E2E2;
	--bkss-texto: #1C2426;
	--bkss-suave: #5D6668;

	max-width: 780px;
	margin: 0 auto;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--bkss-texto);
}

/* ══════════════════════════════════════════════════════════
   Portada del mockup aprobado
   Minimalismo, blobs difuminados de fondo, buscador de vidrio
   centrado y bordes muy redondeados. Todo va dentro de .bkss-hero
   para no filtrarse al resto del sitio.
   ══════════════════════════════════════════════════════════ */

.bkss-hero {
	--bkss-teal: #248C92;
	--bkss-teal-600: #1B6E73;
	--bkss-teal-700: #155459;
	--bkss-teal-800: #123F42;
	--bkss-gris: #E2E2E2;
	--bkss-texto: #1C2426;
	--bkss-suave: #5D6668;

	position: relative;
	/* z-index e isolation crean un contexto de apilamiento propio: los z-index
	   de dentro (blobs en 0, contenido en 2) compiten solo entre ellos y no
	   contra el resto de la página. Sin esto, el contenido del hero salía por
	   encima del desplegable del buscador del sitio —que declara 9999 pero vive
	   dentro de un contenedor de Elementor con z-index 1, así que su 9999 solo
	   vale dentro de esa caja. Subir números aquí habría empeorado la carrera;
	   lo correcto es acotar el alcance. */
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	background: #F6F8F8;
	padding: clamp(48px, 7vw, 88px) clamp(20px, 4.5vw, 64px) clamp(40px, 5vw, 56px);
	text-align: center;
	color: var(--bkss-texto);
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* La familia se declara en CADA elemento, no solo en el contenedor: Elementor
   da a los h1/h2 su propia font-family, y una regla directa siempre le gana a
   lo heredado por mucha especificidad que tenga el padre.
   El peso va en 300 porque es el unico archivo disponible; pedir 600 haria que
   el navegador engrosara el Light por su cuenta y se veria emborronado. */
/* La familia se declara en CADA elemento, no solo en el contenedor: Elementor
   da a los h1/h2 su propia font-family y una regla directa gana a lo heredado.
   Ahora sí hay jerarquía de pesos: 600 en títulos, 500 en apoyos, 400 en cuerpo,
   como pedía el brief. */
.bkss-hero,
.bkss-hero .bkss-titulo-hero,
.bkss-hero .bkss-sub,
.bkss-hero .bkss-kicker,
.bkss-perfiles .bkss-perfiles-head h2,
.bkss-perfiles .bkss-perfiles-head p,
.bkss-perfil .bkss-perfil-nombre,
.bkss-perfil .bkss-perfil-conteo {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-weight: 400;
}

.bkss-hero .bkss-titulo-hero,
.bkss-perfiles .bkss-perfiles-head h2 { font-weight: 600; }

.bkss-hero .bkss-kicker,
.bkss-perfil .bkss-perfil-nombre { font-weight: 500; }

/* Absolute y no fixed como en el mockup: ahí ocupaban la página entera,
   aquí conviven con la cabecera y el pie reales del sitio. */
.bkss-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
	z-index: 0;
}

.bkss-blob--1 {
	top: -220px; left: -180px; width: 520px; height: 520px;
	background: radial-gradient(circle, rgba(36, 140, 146, 0.35), transparent 70%);
}

.bkss-blob--2 {
	top: -160px; right: -200px; width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(150, 215, 210, 0.45), transparent 70%);
}

.bkss-blob--3 {
	bottom: -260px; left: 18%; width: 640px; height: 640px;
	background: radial-gradient(circle, rgba(226, 226, 226, 0.55), transparent 70%);
}

.bkss-hero-contenido { position: relative; z-index: 2; }

.bkss-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bkss-teal-700);
	background: rgba(36, 140, 146, 0.1);
	border: 1px solid rgba(36, 140, 146, 0.18);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 22px;
}

.bkss-hero .bkss-titulo-hero {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin: 0 0 14px;
	color: var(--bkss-texto);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

.bkss-hero .bkss-sub {
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 400;
	color: var(--bkss-suave);
	margin: 0 auto 34px;
	max-width: 640px;
}

/* En la portada el buscador manda: más ancho y sin el hilo encima. */
.bkss-hero .bkss-chat { max-width: 760px; }
.bkss-hero .bkss-chat .bkss-hilo { display: none; }
.bkss-hero .bkss-caja { box-shadow: 0 16px 48px rgba(20, 60, 60, 0.14); }
.bkss-hero .bkss-chips { justify-content: center; margin-top: 22px; }
.bkss-hero .bkss-aviso { margin-top: 18px; }

@media (max-width: 640px) {
	.bkss-hero { padding: 44px 20px 36px; }
	.bkss-hero .bkss-chips { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   Explora por perfil
   Carrusel horizontal con scroll tactil, como el mockup. Sin
   flechas en movil: ahi el gesto natural es deslizar.
   ══════════════════════════════════════════════════════════ */

.bkss-perfiles {
	--bkss-teal: #248C92;
	--bkss-teal-600: #1B6E73;
	--bkss-teal-800: #123F42;
	--bkss-texto: #1C2426;
	--bkss-suave: #5D6668;

	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--bkss-texto);
	padding: clamp(40px, 5vw, 64px) 0 0;
}

.bkss-perfiles-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.bkss-perfiles-flechas { display: flex; gap: 8px; flex-shrink: 0; }
.bkss-perfiles-flechas[hidden] { display: none; }

.bkss-perfiles .bkss-flecha {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.05);
	color: #4A4A4A;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, opacity .15s ease;
}

.bkss-perfiles .bkss-flecha:hover:not(:disabled) { background: rgba(36, 140, 146, 0.14); }

/* Al llegar a un extremo la flecha se apaga en vez de desaparecer: si cambia
   de sitio, el usuario pierde el punto donde estaba haciendo clic. */
.bkss-perfiles .bkss-flecha:disabled { opacity: .3; cursor: default; }

.bkss-perfiles-head h2 {
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 600;
	letter-spacing: -0.5px;
	margin: 0;
	color: var(--bkss-texto);
}

.bkss-perfiles-head p {
	font-size: 13.5px;
	color: var(--bkss-suave);
	margin: 6px 0 0;
	font-weight: 400;
}

.bkss-perfiles-fila {
	--bkss-cols: 4;
	--bkss-gap: 16px;

	display: flex;
	gap: var(--bkss-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* NADA de scroll-behavior:smooth aquí. Comprobado en este sitio: con smooth
	   declarado en CSS, asignar scrollLeft acaba en 0 —la animación se cancela—
	   y las flechas no movían nada. El deslizamiento suave se pide desde el JS,
	   en la llamada a scrollBy. Es la misma trampa que ya apareció en el hilo
	   del chat. */
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	scrollbar-width: none;
}

.bkss-perfiles-fila::-webkit-scrollbar { display: none; }

.bkss-perfil {
	position: relative;
	/* El ancho sale de repartir el espacio entre las columnas visibles, así
	   nunca queda una tarjeta cortada por la mitad al borde del contenedor. */
	flex: 0 0 calc(
		(100% - (var(--bkss-cols) - 1) * var(--bkss-gap)) / var(--bkss-cols)
	);
	height: 330px;
	border-radius: 24px;
	overflow: hidden;
	scroll-snap-align: start;
	text-decoration: none;
	display: block;
	/* Sin foto real, degradado de marca: mejor eso que stock que promete
	   instalaciones que no son de Biottek. Los dos extremos son variables para
	   que el widget de Elementor los cambie sin reescribir la regla. */
	--bkss-grad-a: #248C92;
	--bkss-grad-b: #123F42;
	background: linear-gradient(160deg, var(--bkss-grad-a) 0%, var(--bkss-grad-b) 100%);
}

.bkss-perfil img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bkss-perfil-tinte {
	position: absolute;
	inset: 0;
	background: var(--bkss-teal-600);
	mix-blend-mode: multiply;
	opacity: .38;
}

.bkss-perfil-sombra {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 38%, rgba(4, 14, 14, 0.78) 100%);
}

.bkss-perfil-texto {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px;
	color: #fff;
}

.bkss-perfil-tag {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	opacity: .85;
	margin-bottom: 4px;
	font-weight: 600;
}

.bkss-perfil-nombre { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; }

.bkss-perfil-conteo {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	opacity: .82;
	font-weight: 400;
}

.bkss-perfil-ir {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--bkss-teal-800);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.bkss-vacio {
	padding: 14px 16px;
	background: rgba(255, 248, 225, 0.9);
	border-left: 3px solid #996800;
	border-radius: 8px;
	font-size: 13px;
	color: #6b5b12;
}

@media (max-width: 900px) {
	.bkss-perfiles-fila { --bkss-cols: 2; }
	/* En táctil el gesto natural es deslizar; las flechas estorban. */
	.bkss-perfiles-flechas { display: none !important; }
}

@media (max-width: 640px) {
	.bkss-perfil { height: 270px; }
	.bkss-perfiles-head h2 { font-size: 22px; }
}

/* ── Caja de entrada ────────────────────────────────────── */
.bkss-caja {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 16px 48px rgba(20, 60, 60, 0.14);
	border-radius: 28px;
	padding: 8px 10px 8px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Dos clases: los campos NO heredan la fuente, y ademas el tema declara
   `.elementor-kit-… input` con la misma especificidad que `.bkss-caja input`,
   asi que empataban y ganaba por orden de carga. */
.bkss-chat .bkss-caja input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-weight: 400;
	font-size: 15.5px;
	color: var(--bkss-texto);
	padding: 12px 0;
	min-width: 0;
}

.bkss-caja input::placeholder { color: #8B9294; }

/* Adjuntar la orden: discreto junto al campo, no compite con enviar. */
.bkss-icono-caja {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--bkss-suave);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .15s ease, color .15s ease;
}

.bkss-icono-caja:hover { background: rgba(0, 0, 0, 0.06); color: var(--bkss-teal); }

/* Camara o archivo: en movil hay que elegir, porque `capture` fuerza la camara
   y entonces ya no se puede escoger un PDF. */
.bkss-opciones-archivo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
}

.bkss-opciones-archivo button {
	background: rgba(36, 140, 146, 0.1);
	border: 1px solid rgba(36, 140, 146, 0.25);
	color: var(--bkss-teal-800);
	border-radius: 14px;
	padding: 12px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.bkss-opciones-archivo button:hover { background: rgba(36, 140, 146, 0.18); }

/* Botones de accion que ofrece el asistente. */
.bkss-acciones-bot {
	margin: 12px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bkss-accion {
	background: var(--bkss-teal);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 9px 18px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background .15s ease;
}

.bkss-accion:hover { background: var(--bkss-teal-600); color: #fff; }

.bkss-enviar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--bkss-teal);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, opacity .15s ease;
}

.bkss-enviar:hover:not(:disabled) { background: var(--bkss-teal-600); }
.bkss-enviar:disabled { opacity: .45; cursor: default; }

/* ── Sugerencias ────────────────────────────────────────── */
.bkss-chips {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Dos clases: el Kit de Elementor pone uppercase a todo <button> y una sola
   clase pierde por especificidad. Las sugerencias son frases de paciente
   ("Llevo días con reflujo"), no etiquetas: en mayúsculas se leen como gritos. */
.bkss-chat .bkss-chip {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bkss-teal-600);
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(36, 140, 146, 0.2);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease;
}

.bkss-chip:hover { background: rgba(36, 140, 146, 0.1); }

/* ── Conversacion ───────────────────────────────────────── */
/* El hilo va ARRIBA del campo y tiene scroll propio. Al reves, cada respuesta
   empujaba el campo de texto fuera de la vista y el paciente tenia que
   perseguirlo con el scroll de la pagina. */
.bkss-hilo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;   /* no arrastra el scroll de la pagina */

	/* NADA de scroll-behavior:smooth aqui. Comprobado: con smooth, asignar
	   scrollTop justo despues de insertar la respuesta acaba en 0 —la animacion
	   se cancela con el reflow— y el salto al inicio de la respuesta no ocurria.
	   Con auto funciona, y ademas para ir al principio de un texto que se acaba
	   de recibir el salto instantaneo se lee mejor que el deslizamiento. */
	scroll-behavior: auto;
}

.bkss-hilo:empty { display: none; }

/* Inline (hero): crece hasta un tope y luego hace scroll. */
.bkss-chat[data-modo="inline"] .bkss-hilo { max-height: 52vh; }

.bkss-msg { border-radius: 20px; padding: 14px 18px; font-size: 14.5px; line-height: 1.55; }
.bkss-msg strong { font-weight: 600; }

.bkss-msg--yo {
	align-self: flex-end;
	max-width: 80%;
	background: var(--bkss-teal);
	color: #fff;
	border-bottom-right-radius: 6px;
}

.bkss-msg--bot {
	align-self: flex-start;
	max-width: 92%;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-bottom-left-radius: 6px;
}

/* ── Tarjetas de estudio ────────────────────────────────── */
/* Un estudio se cuenta, no se tabula. Las tarjetas obligaban a leer nombre,
   SKU, precio y dos botones por cada uno: tres de esas y la respuesta dejaba
   de parecer una recomendacion y parecia un catalogo. */
.bkss-estudios { margin-top: 12px; }
.bkss-estudios[hidden] { display: none; }

.bkss-estudio {
	padding: 14px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bkss-estudio:first-child { border-top: none; padding-top: 4px; }

.bkss-frase,
.bkss-compra { margin: 0; font-size: 14px; line-height: 1.6; }

.bkss-frase { color: var(--bkss-texto); }

/* El nombre del estudio tiene que saltar a la vista al escanear la respuesta.
   Plus Jakarta Sans trae el peso 700 real, así que ya no hace falta el color de
   refuerzo que se usaba con ABC Oracle Light. */
.bkss-frase strong { font-weight: 700; }

/* Tiempo de entrega y preparacion: dato duro, no argumento de venta. */
.bkss-datos {
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bkss-teal-600);
}

.bkss-compra { margin-top: 6px; color: var(--bkss-suave); font-size: 13.5px; }
.bkss-compra strong { color: var(--bkss-teal-600); font-weight: 700; }

/* Sin sucursal elegida el precio es orientativo: decirlo evita que el paciente
   tome como definitivo un importe que puede variar hasta 25% entre zonas. */
.bkss-referencia { font-size: 12px; font-style: italic; opacity: .85; }

.bkss-pide-sucursal {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: rgba(36, 140, 146, 0.08);
	border-left: 3px solid var(--bkss-teal);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bkss-texto);
}

.bkss-pide-sucursal[hidden] { display: none; }

/* Las acciones son enlaces dentro del texto, no botones que compiten con el. */
/* Dos clases en el selector a proposito: el Kit de Elementor estiliza
   `.elementor-kit-1767 button` (0,1,1) y una sola clase (0,1,0) pierde. Por eso
   los enlaces <a> salian bien y los <button> salian en MAYUSCULAS — a media
   oracion eso se lee como un grito. */
.bkss-chat .bkss-enlace {
	display: inline;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bkss-teal);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	white-space: nowrap;
}

.bkss-chat .bkss-enlace:hover { color: var(--bkss-teal-600); background: none; }
.bkss-chat .bkss-enlace[disabled] { opacity: .6; cursor: default; text-decoration: none; }
.bkss-chat .bkss-enlace::before { content: '\203A\00a0'; }

/* Ofrecimiento de afinar: va tras los estudios, cuando el paciente ya los leyo
   y la pregunta le sirve para decidir. */
.bkss-seguimiento {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 14px;
	line-height: 1.6;
	color: var(--bkss-texto);
}

.bkss-ofrecer {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bkss-texto);
}

/* Sin seguimiento, el bloque de opciones adicionales necesita su propia
   separacion del ultimo estudio. */
.bkss-estudios + .bkss-ofrecer {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bkss-otros { margin-top: 0; }

/* ── El paquete que conviene más ─────────────────────────── */
/* Se distingue del resto porque es una recomendación, no una opción entre
   varias: si se ve igual que las demás tarjetas, el paciente lo lee como el
   primero de una lista y no como «esto te sale mejor». */
.bkss-recomendado {
	margin: 12px 0 0;
	padding: 12px 14px 4px;
	background: rgba(36, 140, 146, 0.08);
	border: 1px solid rgba(36, 140, 146, 0.24);
	border-radius: 16px;
}

.bkss-recomendado-titulo {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bkss-teal-600);
}

/* La tarjeta de dentro no necesita su propia línea divisoria. */
.bkss-recomendado .bkss-estudio { border-top: none; padding-top: 0; }

.bkss-ahorro {
	margin: 2px 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bkss-teal-600);
}

/* Encabezado de los estudios sueltos, cuando hay recomendación arriba. */
.bkss-separado {
	margin: 16px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--bkss-suave);
}

/* Aviso de que un camino ya no hace falta porque se tomó el otro. */
.bkss-excluido {
	margin: 8px 0 0;
	padding: 8px 10px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bkss-suave);
}

/* ── Llevarse la orden completa ──────────────────────────── */
/* Va arriba de la lista: una orden médica trae hasta veinte estudios y un
   botón al final obligaría a recorrerlos todos para llegar a él. */
.bkss-lote {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 12px 0 0;
}

/* Sin esto no se oculta: hay un display de autor en la regla de arriba y el
   atributo `hidden` pierde. En este proyecto ya pasó tres veces. */
.bkss-lote[hidden] { display: none; }

/* Dos clases a propósito: el Kit de Elementor estiliza
   `.elementor-kit-1767 button` (0,1,1) y le impone MAYÚSCULAS a todo botón.
   Una sola clase (0,1,0) pierde; con `.bkss-chat` delante (0,2,0) gana. */
.bkss-chat .bkss-lote-btn {
	background: var(--bkss-teal);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 9px 18px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background .15s ease;
}

.bkss-chat .bkss-lote-btn:hover:not(:disabled) {
	background: var(--bkss-teal-600);
	color: #fff;
}

.bkss-chat .bkss-lote-btn:disabled { opacity: .65; cursor: default; }

/* Los estudios que no entran al lote se explican aquí: si el paciente cuenta
   los renglones de su hoja y el botón ofrece menos, la diferencia tiene que
   estar dicha. */
.bkss-lote-nota {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bkss-suave);
}

/* ── Aviso medico: siempre visible, nunca decorativo ────── */
/* Paso a caja: aparece al agregar el primer estudio y se queda a la vista sin
   sacar al paciente de la conversacion. */
.bkss-paso {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	padding: 10px 12px;
	background: rgba(36, 140, 146, 0.1);
	border-radius: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bkss-teal-800);
}

.bkss-paso-btn {
	flex-shrink: 0;
	background: var(--bkss-teal);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	padding: 8px 16px;
	white-space: nowrap;
}

.bkss-paso-btn:hover { background: var(--bkss-teal-600); color: #fff; }

/* Fijo bajo el campo, no dentro de cada respuesta: presente sin estorbar.
   Un solo renglón, y si el ancho no da se encoge en vez de partirse — pero
   con un mínimo de 9.5px: por debajo de eso un aviso médico deja de leerse
   y entonces ya no cumple su función. */
.bkss-aviso {
	margin: 10px 0 0;
	font-size: clamp(9.5px, 2.6vw, 10.5px);
	line-height: 1.4;
	color: var(--bkss-suave);
	text-align: center;
	opacity: .85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* En escritorio el hero tiene ancho de sobra y se lee cómodo. En móvil NO se
   le fija el tamaño: debe encogerse como el del panel, porque con un tamaño
   fijo se recortaba con puntos suspensivos — y un aviso médico truncado es
   peor que uno pequeño. */
@media (min-width: 641px) {
	.bkss-hero .bkss-aviso { font-size: 11.5px; }
}

.bkss-aviso a { color: var(--bkss-teal-600); text-decoration: underline; }

/* ── Burbuja para reabrir el panel ──────────────────────────
   Sin esto, cerrar el modal dejaba la conversacion sin forma de volver. */
/* El tema fuerza display:block en los <button>, y eso descentra el icono.
   Con dos clases el selector gana sin recurrir a !important. */
.bkss-burbuja.bkss-burbuja { display: flex; }
.bkss-burbuja[hidden] { display: none; }

.bkss-burbuja {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	background: var(--bkss-teal, #248C92);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(20, 60, 60, 0.32);
	transition: transform .15s ease, background .15s ease;
	padding: 0;
}

.bkss-burbuja:hover { background: var(--bkss-teal-600, #1B6E73); transform: translateY(-2px); }
.bkss-burbuja[hidden] { display: none; }

@media (max-width: 640px) {
	.bkss-burbuja { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* ── Escribiendo ────────────────────────────────────────── */
.bkss-pensando { display: flex; gap: 5px; padding: 4px 2px; }
.bkss-pensando span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--bkss-teal);
	opacity: .35;
	animation: bkss-latido 1.3s infinite ease-in-out;
}
.bkss-pensando span:nth-child(2) { animation-delay: .18s; }
.bkss-pensando span:nth-child(3) { animation-delay: .36s; }

@keyframes bkss-latido {
	0%, 80%, 100% { opacity: .25; transform: translateY(0); }
	40%           { opacity: .9;  transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.bkss-pensando span { animation: none; opacity: .5; }
}

/* ══════════════════════════════════════════════════════════
   Panel acoplado
   Al iniciar la conversacion el widget se despega del hero y se
   vuelve panel flotante, para poder seguir navegando el sitio sin
   perder lo que se lleva escrito.
   ══════════════════════════════════════════════════════════ */

/* Dos atributos en el selector a proposito: el `hidden` solo aplica
   display:none desde la hoja del navegador, y el display:flex de mas abajo le
   gana. Sin esta regla el boton de cerrar no hacia nada visible — el panel
   seguia en pantalla con la burbuja encima. Misma trampa que ya habia caido
   con las listas de estudios. */
.bkss-chat[data-modo="acoplado"][hidden] { display: none; }

.bkss-chat[data-modo="acoplado"] {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;   /* por encima del header sticky de Elementor */
	width: 400px;
	max-width: calc(100vw - 40px);
	max-height: min(680px, calc(100vh - 40px));
	margin: 0;
	display: flex;
	flex-direction: column;

	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	backdrop-filter: blur(28px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(20, 60, 60, 0.22);
	padding: 0 16px 16px;

	animation: bkss-entrar .22s ease-out;
}

@keyframes bkss-entrar {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.bkss-chat[data-modo="acoplado"] { animation: none; }
}

.bkss-cabecera {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 14px 2px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	margin-bottom: 12px;
}

.bkss-chat[data-modo="acoplado"] .bkss-cabecera { display: flex; }

.bkss-titulo {
	flex: 1;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bkss-teal-800);
}

.bkss-icono {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.05);
	color: var(--bkss-suave);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bkss-icono:hover { background: rgba(0, 0, 0, 0.1); }

/* Confirmación de reinicio: dentro del panel, no con el diálogo del navegador
   —que rompe la estética y algunos navegadores bloquean. */
.bkss-confirmar {
	margin-bottom: 10px;
	padding: 12px 14px;
	background: rgba(36, 140, 146, 0.09);
	border: 1px solid rgba(36, 140, 146, 0.22);
	border-radius: 16px;
}

.bkss-confirmar p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }

/* Vaciar el carrito se ofrece aparte y desmarcado: «empezar de nuevo» es una
   acción sobre la conversación, y llevarse de paso lo que el paciente juntó
   navegando la tienda sería borrar algo que nadie pidió borrar. */
.bkss-tambien {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--bkss-texto);
	cursor: pointer;
}

/* El display de arriba le gana al atributo si no se declara. Tercera vez. */
.bkss-tambien[hidden] { display: none; }

.bkss-tambien input {
	width: auto;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--bkss-teal);
}

.bkss-confirmar-btns { display: flex; gap: 8px; }

/* Con .bkss-chat delante gana por especificidad (0,2,1) al `.elementor-kit-… button`
   del tema (0,1,1), que si no impone MAYUSCULAS por orden de carga. */
.bkss-chat .bkss-confirmar-btns button {
	flex: 1;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 999px;
	padding: 9px 0;
	cursor: pointer;
	border: 1px solid rgba(36, 140, 146, 0.3);
	background: transparent;
	color: var(--bkss-teal-600);
}

.bkss-chat .bkss-confirmar-btns [data-conf="si"] {
	background: var(--bkss-teal);
	border-color: var(--bkss-teal);
	color: #fff;
}

/* En panel, el hilo se lleva todo el alto disponible y el campo queda fijo
   abajo: escribir siempre esta a la mano. */
.bkss-chat[data-modo="acoplado"] .bkss-hilo {
	flex: 1;
	min-height: 0;
	max-height: none;
}

.bkss-chat[data-modo="acoplado"] .bkss-caja { border-radius: 22px; }
.bkss-chat[data-modo="acoplado"] .bkss-msg--yo { max-width: 85%; }

/* Minimizado: queda solo la cabecera, como una pestaña. */
.bkss-chat.bkss-min {
	max-height: none;
	padding-bottom: 0;
	cursor: pointer;
}

.bkss-chat.bkss-min .bkss-hilo,
.bkss-chat.bkss-min .bkss-caja,
.bkss-chat.bkss-min .bkss-chips { display: none; }

.bkss-chat.bkss-min .bkss-cabecera { border-bottom: none; margin-bottom: 0; padding-bottom: 14px; }

/* ── Movil ──────────────────────────────────────────────── */
@media (max-width: 640px) {
	.bkss-caja { padding: 6px 6px 6px 14px; }
	.bkss-caja input { font-size: 16px; }   /* 16px evita el zoom automatico de iOS */
	.bkss-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
	.bkss-chips::-webkit-scrollbar { display: none; }
	.bkss-chip { flex-shrink: 0; }
	.bkss-msg--yo { max-width: 88%; }

	/* Un panel flotante a la derecha no cabe en un celular: se vuelve hoja
	   completa anclada abajo, que es el patron esperado en tactil. */
	.bkss-chat[data-modo="acoplado"] {
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 88vh;
		max-height: 88vh;
		border-radius: 22px 22px 0 0;
		padding: 0 14px 14px;
	}

	.bkss-chat.bkss-min { height: auto; }
}