/*! BaseBlue — BlueCore. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   BLUECORE

   El lanzador es un círculo de 44 px (el objetivo táctil mínimo, nada más)
   pegado a la esquina: no reserva sitio a ninguna maqueta ni tapa texto. En
   reposo solo enseña el isotipo; al llegar, alterna un par de veces con un
   globo de chat para decir qué es, y luego se queda quieto. Con ratón o con
   el teclado se abre hacia la izquierda y aparece su nombre. Sin azul de
   marca: tinta sobre papel y papel sobre tinta, como la cabecera.

   El panel sigue siendo la hoja blanca del Figma (nodo 397:207), sin filetes
   ni marcos, separada de la página solo por su tono y una sombra muy suave
   (flota sobre el contenido, así que aquí la sombra sí dice algo). Se abre
   encima del lanzador, que mientras tanto hace de botón de cerrar.

   No hay servicio detrás: las respuestas son guion y el pie lo dice. Sin JS
   el widget no se monta (`hidden` en el marcado), porque un chat que no
   responde sería una promesa falsa.
   ========================================================================== */

.bluecore {
	--bc-h: 4.4rem;
	--bc-gap: 1.2rem;
	--bc-kb: 0px;
	/* Subida extra cuando la esquina de abajo a la derecha tiene algo que
	   decir (`data-bc-clear`, lo mide el JS): el lanzador nunca lo tapa. */
	--bc-lift: 0px;
	/* 24 px de los cantos, más la zona segura del aparato. */
	--bc-right: calc(2.4rem + env(safe-area-inset-right, 0px));
	--bc-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px));

	/* Tintas del lanzador. Cambian con la superficie que tiene debajo
	   (`data-on`, lo escribe el JS). Por defecto, sobre oscuro: círculo de
	   papel e icono en tinta. */
	--bc-bg: var(--bb-paper);
	--bc-fg: var(--bb-navy);

	position: fixed;
	right: var(--bc-right);
	bottom: calc(var(--bc-bottom) + var(--bc-kb) + var(--bc-lift));
	transition: bottom 0.3s var(--ease-out);
	/* Por debajo del menú (50) y de la cabecera (60): si se abre el menú, su
	   velo cubre también al widget. */
	z-index: 40;
	width: 0;
	height: 0;
	font-family: "Outfit", system-ui, sans-serif;
}
.bluecore[hidden] { display: none; }
/* Sobre papel se invierte: círculo en tinta, icono en papel. Tinta marino,
   la misma que usa la cabecera sobre las secciones claras. */
.bluecore[data-on="paper"] {
	--bc-bg: var(--bb-navy);
	--bc-fg: var(--bb-paper);
}

/* ================================================================ Lanzador */

.bluecore__launcher {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	/* El contenedor mide cero: sin `max-content` el botón se encogería al
	   mínimo y el nombre no llegaría a abrirse nunca. */
	width: max-content;
	min-width: var(--bc-h);
	height: var(--bc-h);
	padding: 0;
	border-radius: calc(var(--bc-h) / 2);
	background: var(--bc-bg);
	color: var(--bc-fg);
	white-space: nowrap;
	/* Escondido durante la primera pantalla (en su esquina está el rótulo
	   del hero) y en la última (la del pie, con su propia petición). Aparece
	   con un fundido corto y sin desplazarse: es un control, no un anuncio.
	   Escondido solo a la vista: sigue en el orden del tabulador, que llega a
	   él justo después del pie, y al recibir el foco se deja ver. */
	opacity: 0;
	pointer-events: none;
	transform: scale(0.86);
	transition:
		opacity var(--dur-2) var(--ease-out),
		transform var(--dur-3) var(--ease-out),
		background-color var(--dur-2) var(--ease-out),
		color var(--dur-2) var(--ease-out);
}
.bluecore.is-shown .bluecore__launcher,
.bluecore__launcher:focus-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
/* El anillo del foco toma el color del círculo: contrasta con la superficie
   igual que él. */
.bluecore__launcher:focus-visible { outline: 2px solid var(--bc-bg); outline-offset: 3px; }

/* Retirada en vertical mientras se hace scroll hacia abajo (HOME-V3 §8.1):
   no compite con la lectura ni con el pulgar. */
.bluecore.is-retreat .bluecore__launcher {
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.8rem);
	transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

/* Punto de «sin leer»: el equipo respondió con el panel cerrado. */
.bluecore__dot {
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--bb-flood);
	box-shadow: 0 0 0 2px var(--bc-bg);
}

/* El nombre, plegado a cero: al abrirse la columna el círculo crece hacia la
   izquierda y el icono no se mueve de su sitio. `grid-template-columns` se
   interpola de 0fr a 1fr, así el ancho sale del texto y no de una cifra. */
.bluecore__reveal {
	display: grid;
	grid-template-columns: 0fr;
	height: 100%;
	transition: grid-template-columns 0.32s var(--ease-out);
}
/* La columna recorta; el texto, dentro, lleva su propio aire: así la
   columna plegada mide cero de verdad y el círculo sigue siendo un círculo. */
.bluecore__label {
	display: flex;
	align-items: center;
	min-width: 0;
	overflow: hidden;
}
.bluecore__label > span {
	padding-left: 1.7rem;
	font-size: var(--t-small);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	opacity: 0;
	transform: translateX(0.8rem);
	transition: opacity 0.2s var(--ease-out), transform 0.32s var(--ease-out);
}

.bluecore__mark {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: var(--bc-h);
	height: var(--bc-h);
}
/* Los tres iconos ocupan la misma celda y se funden entre sí. */
.bluecore__mark svg {
	grid-area: 1 / 1;
	display: block;
	overflow: visible;
	transition: opacity 0.9s var(--ease-io), transform 0.9s var(--ease-io);
}
/* El isotipo a 18 px de alto; el globo, de su misma masa óptica. */
.bluecore__iso { width: auto; height: 1.8rem; }
.bluecore__glyph { width: 2rem; height: 2rem; opacity: 0; transform: scale(0.9); }
.bluecore__x { width: 1.6rem; height: 1.6rem; opacity: 0; transform: rotate(-45deg) scale(0.8); }
.bluecore__iso path { transition: transform 0.6s var(--ease-out); }

/* Ciclo de reposo (lo marca el JS): el isotipo cede el sitio al globo. */
.bluecore__launcher.is-chat .bluecore__iso { opacity: 0; transform: scale(0.9); }
.bluecore__launcher.is-chat .bluecore__glyph { opacity: 1; transform: none; }

/* Abierto: el lanzador se queda como un cierre callado bajo el panel. */
.bluecore.is-on .bluecore__iso,
.bluecore.is-on .bluecore__glyph { opacity: 0; transform: scale(0.8); transition-duration: 0.35s; }
.bluecore.is-on .bluecore__x { opacity: 1; transform: none; transition-duration: 0.5s; transition-timing-function: var(--ease-out); }

/* El nombre aparece con el puntero (solo si hay puntero de verdad) o con el
   foco del teclado; nunca con el panel abierto. */
@media (hover: hover) and (pointer: fine) {
	.bluecore:not(.is-on) .bluecore__launcher:hover .bluecore__reveal { grid-template-columns: 1fr; }
	.bluecore:not(.is-on) .bluecore__launcher:hover .bluecore__label > span { opacity: 1; transform: none; transition-duration: 0.32s; transition-delay: 0.04s, 0s; }
	/* Los dos trazos del isotipo se separan un punto: el gesto de una carga
	   que se cierra, no un rebote. */
	.bluecore__launcher:hover .bluecore__iso path:first-child { transform: translate(-1.1px, -1.1px); }
	.bluecore__launcher:hover .bluecore__iso path:last-child { transform: translate(1.1px, 1.1px); }
}
/* En táctil, solo el círculo: ni siquiera el foco abre el nombre. */
@media (hover: hover) {
	.bluecore:not(.is-on) .bluecore__launcher:focus-visible .bluecore__reveal { grid-template-columns: 1fr; }
	.bluecore:not(.is-on) .bluecore__launcher:focus-visible .bluecore__label > span { opacity: 1; transform: none; transition-duration: 0.32s; }
}

/* =================================================================== Panel */

.bluecore__panel {
	/* La hoja blanca del Figma y sus grises (los del propio archivo: #7C8794
	   es el de la cruz y el del chip). */
	--bc-text: #2b3036;
	--bc-head: #3d434a;
	--bc-grey: #7c8794;
	--bc-note: #6b7480;
	--bc-hint: #8a929c;
	--bc-line: #d5dae0;
	--bc-bubble: #eef1f4;
	--bc-rp: 1.2rem;
	--bc-in: 2.4rem;
	--muted: var(--bc-note);
	--rule: var(--bc-line);
	--accent: var(--bb-flood);

	position: absolute;
	right: 0;
	/* Encima del lanzador, que queda debajo como cierre. */
	bottom: calc(var(--bc-h) + var(--bc-gap));
	/* 438 × 538 del Figma sobre 1728, con suelo para que el chat no se
	   estreche en un portátil y techo para el monitor grande. */
	width: min(clamp(38rem, calc(var(--w) * 0.2535), 48rem), calc(100vw - 2 * var(--bc-right)));
	/* Nunca invade la franja de la cabecera: ahí están la marca y el botón
	   del menú. Se descuenta todo lo que hay debajo del panel. */
	height: min(
		clamp(48rem, calc(var(--w) * 0.3113), 60rem),
		calc(100svh - var(--header-h) - var(--bc-bottom) - var(--bc-kb) - var(--bc-h) - var(--bc-gap) - 1.2rem)
	);
	display: flex;
	flex-direction: column;
	padding: 1.8rem var(--bc-in) 1.4rem;
	border-radius: var(--bc-rp);
	background: #fff;
	color: var(--bc-text);
	box-shadow:
		0 0.2rem 0.6rem rgba(10, 27, 43, 0.06),
		0 1.8rem 4.8rem -0.8rem rgba(10, 27, 43, 0.22);
	visibility: hidden;
	/* El recorte lo lleva el JS; este es solo el estado de reposo. */
	clip-path: inset(100% 0 0 100% round var(--bc-rp));
	overflow: hidden;
}
/* El panel solo recibe el foco para anunciarse al abrir (en táctil): es el
   contenedor del diálogo, no un control, así que no se le dibuja anillo. */
.bluecore__panel:focus, .bluecore__panel:focus-visible { outline: none; }

/* La piel: al abrir, el panel arranca con el color del lanzador y se aclara
   mientras crece desde su esquina, así el objeto sale del círculo en lugar
   de aparecer de la nada. */
.bluecore__skin {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--bc-bg);
	opacity: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------- Cabecera */

.bluecore__head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	min-height: 4.4rem;
}
.bluecore__chip {
	flex: none;
	display: grid;
	place-items: center;
	width: 4.8rem;
	height: 3rem;
	border-radius: 0.8rem;
	background: var(--bc-grey);
	color: #fff;
}
.bluecore__chip svg { width: 1.1rem; height: auto; }
.bluecore__name {
	/* 26 px sobre 1728. */
	font-size: clamp(2.2rem, calc(var(--w) * 0.015), 2.8rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--bc-head);
}
/* El tipo, como cualquier rótulo de la casa: en minúscula de frase, sin
   espaciado y apagado. */
.bluecore__kind {
	flex: 1;
	min-width: 0;
	padding-top: 0.2em;
	font-size: var(--t-eyebrow);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--bc-note);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* «Talk to the team»: la intención global del punto 9, siempre a mano
   mientras responde el bot. Al unirse una persona cede el sitio a su
   nombre (`.bluecore__kind`). */
.bluecore__talk {
	flex: none;
	margin-left: auto;
	padding: 0.6rem 0;
	font-size: var(--t-eyebrow);
	font-weight: 400;
	color: var(--bb-flood);
	transition: color 0.3s var(--ease-out);
}
.bluecore__talk:focus-visible { outline: 2px solid var(--bb-flood); outline-offset: 2px; }
@media (hover: hover) { .bluecore__talk:hover { color: var(--bb-navy); } }
/* La cruz se alinea por su trazo, no por su caja táctil: el margen negativo
   lleva el dibujo al mismo canto derecho que el campo de abajo. */
.bluecore__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 4.4rem;
	height: 4.4rem;
	margin-right: -1.3rem;
	border-radius: 50%;
	color: var(--bc-grey);
	transition: color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.bluecore__close svg { width: 1.8rem; height: 1.8rem; transition: transform 0.6s var(--ease-out); }
.bluecore__close:focus-visible { outline: 2px solid var(--bb-flood); outline-offset: -2px; color: var(--bc-text); }
@media (hover: hover) {
	.bluecore__close:hover { color: var(--bc-text); background: var(--bc-bubble); }
	.bluecore__close:hover svg { transform: rotate(90deg); }
}

/* ------------------------------------------------------------ El hilo */
/* Texto sobre el blanco, sin globos para BlueCore: se lee como una
   conversación, no como una interfaz. El hilo ocupa el ancho entero del
   panel (su barra va pegada al canto) y devuelve el margen por dentro, así
   el texto cae en la misma vertical que el chip. Arriba se desvanece: lo que
   sube no se corta contra una línea. `data-lenis-prevent` deja que la rueda
   lo recorra sin arrastrar la página. */

.bluecore__log {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	margin: 0 calc(-1 * var(--bc-in));
	padding: 2.8rem var(--bc-in) 1.6rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.4rem);
	mask-image: linear-gradient(to bottom, transparent 0, #000 2.4rem);
	scrollbar-width: thin;
	scrollbar-color: var(--bc-line) transparent;
}
.bluecore__log:focus { outline: none; }
.bluecore__log:focus-visible { outline: 2px solid var(--bb-flood); outline-offset: -2px; }
.bluecore__msg {
	font-size: var(--t-body);
	font-weight: 300;
	line-height: 1.45;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}
.bluecore__msg p { margin: 0; }
.bluecore__msg--bot {
	align-self: stretch;
	max-width: 34em;
	color: var(--bc-text);
}
/* Las opciones y la captura quieren el ancho entero del hilo, no el de un
   párrafo de lectura. */
.bluecore__msg--bot:has(.bluecore__options, .bluecore__capture) { max-width: none; }
.bluecore__msg--user {
	align-self: flex-end;
	max-width: 82%;
	padding: 1rem 1.5rem 1.1rem;
	border-radius: 1.4rem;
	background: var(--bc-bubble);
	color: var(--bc-text);
}
.bluecore__msg--agent .bluecore__from {
	margin-bottom: 0.3rem;
	font-size: var(--t-eyebrow);
	font-weight: 400;
	color: var(--muted);
}
.bluecore__msg .bluecore__act { margin-top: 1.4rem; }
.bluecore__act .btn { --btn-hover: var(--bb-sky); padding: 0.85em 1.2em 0.85em 1.4em; border-radius: 0.6rem; font-weight: 300; }
.bluecore__act .btn:hover, .bluecore__act .btn:focus-visible { color: var(--bb-navy); }
.bluecore__act .link-arrow { color: var(--bb-flood); }
.bluecore__act a:focus-visible { outline: 2px solid var(--bb-flood); outline-offset: 3px; }

/* Una línea centrada para lo que no dice ni el bot ni el visitante (aviso de
   traspaso, error de red): ni burbuja ni alineación de conversación. */
.bluecore__status {
	align-self: center;
	max-width: 90%;
	margin: 0;
	padding: 0.2rem 0;
	font-size: var(--t-eyebrow);
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	color: var(--bc-note);
}
.bluecore__retry {
	padding: 0.8rem 0.4rem;
	margin-block: -0.8rem;
	font-weight: 400;
	color: var(--bc-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.bluecore__retry:active, .bluecore__opt:active { opacity: 0.6; }

.bluecore__typing {
	display: inline-flex;
	align-self: flex-start;
	gap: 0.6rem;
	padding: 0.8rem 0;
}
.bluecore__typing i {
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--bc-grey);
	opacity: 0.25;
	animation: bc-dot 1.05s var(--ease-io) infinite;
}
.bluecore__typing i:nth-child(2) { animation-delay: 0.15s; }
.bluecore__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bc-dot {
	0%, 100% { opacity: 0.25; }
	40% { opacity: 1; }
}

/* --------------------------------------------------------------- Opciones */
/* Una lista vertical a todo el ancho, con un filete de 1 px y una flecha:
   no son píldoras (HOME-V3 §8.2). Como mucho 4 a la vista; el resto entra
   bajo «More options», que se funde con la fila siguiente al desplegarse. */

.bluecore__options {
	display: flex;
	flex-direction: column;
	margin-top: 1rem;
}
.bluecore__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	width: 100%;
	min-height: 4.8rem;
	padding: 1rem 0.2rem;
	border-top: 1px solid var(--bc-line);
	color: var(--bc-text);
	font-size: var(--t-small);
	font-weight: 300;
	line-height: 1.35;
	text-align: left;
	transition: color 0.3s var(--ease-out);
}
.bluecore__options .bluecore__opt:last-child { border-bottom: 1px solid var(--bc-line); }
.bluecore__opt svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--bc-grey); transition: transform 0.3s var(--ease-out); }
.bluecore__opt--more { color: var(--bb-flood); }
.bluecore__opt:focus-visible { outline: 2px solid var(--bb-flood); outline-offset: -2px; }
@media (hover: hover) {
	.bluecore__opt:not(:disabled):hover { color: var(--bb-flood); }
	.bluecore__opt:not(:disabled):hover svg { transform: translateX(0.2rem); color: var(--bb-flood); }
}
/* Opciones ya respondidas: se quedan como registro, sin acción; la elegida sigue marcada. */
.bluecore__opt:disabled { color: var(--bc-grey); cursor: default; }
.bluecore__opt:disabled svg { opacity: 0; }
.bluecore__opt.is-picked { color: var(--bc-text); }

/* ------------------------------------------------------------- Captura */
/* Nombre, email y empresa con etiqueta visible, no marcadores de posición
   (HOME-V3 §8.2): sigue leyéndose como conversación, no como un formulario
   de sitio suelto dentro del chat. */

.bluecore__capture {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.4rem;
}
.bluecore__capture label { font-size: var(--t-eyebrow); font-weight: 400; color: var(--bc-note); }
.bluecore__capture input[type="text"], .bluecore__capture input[type="email"] {
	height: 4.4rem;
	padding: 0 1.2rem;
	margin-top: 0.4rem;
	border: 0;
	border-radius: 0.6rem;
	background: var(--bc-bubble);
	color: var(--bc-text);
	font: inherit;
	font-size: var(--t-small);
}
.bluecore__capture input:focus { outline: 2px solid var(--bb-flood); outline-offset: 1px; }
.bluecore__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	font-size: var(--t-eyebrow);
	color: var(--bc-note);
}
.bluecore__consent input { flex: none; width: 1.6rem; height: 1.6rem; margin-top: 0.1rem; accent-color: var(--bb-flood); }
.bluecore__capture .btn { align-self: flex-start; --btn-hover: var(--bb-sky); padding: 0.85em 1.2em 0.85em 1.4em; border-radius: 0.6rem; font-weight: 300; }
.bluecore__capture button:disabled { opacity: 0.5; }

.bluecore__form {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	height: 4.8rem;
	margin-top: 1.2rem;
	padding: 0.5rem 0.5rem 0.5rem 1.6rem;
	border-radius: 1rem;
	background: #fff;
	/* El único trazo del panel: un campo tiene que leerse como campo. */
	box-shadow: inset 0 0 0 1px var(--bc-line);
	transition: box-shadow 0.4s var(--ease-out);
}
/* El foco se dibuja en la caja entera, no en el campo: es la caja lo que se
   lee como campo. */
.bluecore__form:focus-within { box-shadow: inset 0 0 0 1px var(--bb-flood); }
.bluecore__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bc-text);
	font: inherit;
	font-size: var(--t-small);
	font-weight: 300;
	letter-spacing: 0;
	caret-color: var(--bb-flood);
}
.bluecore__input::placeholder { color: var(--bc-hint); opacity: 1; }
.bluecore__input:focus { outline: none; }

.bluecore__send {
	flex: none;
	display: grid;
	place-items: center;
	width: 4.4rem;
	height: 100%;
	border-radius: 0.6rem;
	background: var(--bc-grey);
	color: #fff;
	transition: background-color 0.4s var(--ease-out);
}
.bluecore__send svg { width: 1.6rem; height: 1.6rem; transition: transform 0.6s var(--ease-out); }
/* Con algo escrito, el envío toma el azul de los atajos. */
.bluecore__send:not(:disabled) { background: var(--bb-flood); }
.bluecore__send:disabled { cursor: default; }
.bluecore__send:focus-visible { outline: 2px solid var(--bb-flood); outline-offset: 2px; }
@media (hover: hover) {
	.bluecore__send:not(:disabled):hover svg { transform: translateX(0.2rem); }
}

/* El pie honesto: pequeño y centrado, pero a tinta legible (4.7:1 sobre el
   blanco), no como letra de contrato. */
.bluecore__note {
	flex: none;
	margin-top: 1.2rem;
	font-size: var(--t-eyebrow);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-align: center;
	color: var(--bc-note);
	text-wrap: balance;
}

/* ================================================================ Aparatos */

/* Táctil: los objetivos suben a 44 px y el campo a 16 px como mínimo, que
   es lo que evita que iOS amplíe la página al enfocarlo. */
@media (hover: none) {
	.bluecore__opt { min-height: 4.8rem; }
	.bluecore__form { height: 5.2rem; }
	.bluecore__input { font-size: max(1.6rem, var(--t-small)); }
}

/* Teléfono en vertical: el lanzador es el mismo círculo y el panel pasa a
   hoja inferior, de canto a canto, con las esquinas de arriba redondeadas.
   La hoja tapa la esquina del lanzador, así que ahí cierra su propia cruz y
   el lanzador se apaga mientras está abierta. */
@media (orientation: portrait) and (max-width: 699px) {
	.bluecore.is-open .bluecore__launcher { opacity: 0; visibility: hidden; transition-delay: 0s; }
	.bluecore__panel {
		--bc-rp: 1.8rem;
		--bc-in: 2rem;
		/* Fijo dentro de un fijo: se ancla a la ventana, no al lanzador. */
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--bc-kb);
		width: auto;
		height: min(78svh, calc(100svh - var(--header-h) - var(--bc-kb) - 1.2rem));
		padding: 1.6rem var(--bc-in) calc(1.2rem + env(safe-area-inset-bottom, 0px));
		border-radius: var(--bc-rp) var(--bc-rp) 0 0;
		box-shadow: 0 -1rem 4rem rgba(10, 27, 43, 0.18);
	}
}

/* Teléfono girado: la altura manda. El panel se pone al lado del lanzador y
   no encima (así gana su alto entero) y se recogen los márgenes internos
   para que el hilo conserve sitio. */
@media (orientation: landscape) and (max-height: 520px) {
	.bluecore__panel {
		right: calc(var(--bc-h) + var(--bc-gap));
		bottom: 0;
		height: min(
			clamp(48rem, calc(var(--w) * 0.3113), 60rem),
			calc(100svh - var(--header-h) - var(--bc-bottom) - var(--bc-kb) - 1.2rem)
		);
		padding: 1rem 1.8rem 0.8rem;
		--bc-in: 1.8rem;
	}
	.bluecore__head { min-height: 3.6rem; }
	.bluecore__log { padding-top: 1.6rem; padding-bottom: 1rem; gap: 1.2rem; }
	.bluecore__form { margin-top: 0.8rem; }
	.bluecore__note { margin-top: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bluecore__launcher { transform: none; transition: opacity 0.3s linear, background-color 0.3s linear, color 0.3s linear; }
	.bluecore.is-shown .bluecore__launcher { transform: none; }
	/* El nombre y los iconos cambian sin desplazarse: solo un fundido corto. */
	.bluecore__reveal { transition: none; }
	.bluecore__label > span, .bluecore__mark svg { transform: none !important; transition: opacity 0.2s linear; }
	.bluecore__iso path, .bluecore__opt svg,
	.bluecore__close svg, .bluecore__send svg { transition: none; }
	.bluecore__typing i { animation: none; opacity: 0.6; }
	.bluecore.is-retreat .bluecore__launcher { transform: none; }
}