/* ==========================================================================
   Lupo — buscador guiado del home (botón flotante + chat de botones).
   Solo se carga en la página de inicio. Usa los colores del tema
   (--azul, --naranja, etc., definidos en style.css).
   z-index 55: por encima del contenido y del header (50), por debajo del
   menú móvil abierto (60).
   ========================================================================== */

.lupo-lanzador,
.lupo-panel,
.lupo-invitacion {
	position: fixed;
	right: 16px;
	font-family: inherit;
	z-index: 55;
}

/* ---- Botón flotante (cerrado) ------------------------------------------ */

.lupo-lanzador {
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	width: 76px;
	height: 76px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: transform .15s ease;
	/* Bug real reportado por Mariano (28/9/2026, iPhone): un elemento
	   `position: fixed` con `filter` (el drop-shadow de abajo) a veces lo
	   pinta mal Safari en el primer frame — se ve como un recuadro sólido
	   hasta que algo fuerza un repaint (como scrollear). Forzar la capa de
	   composición GPU desde el arranque, en vez de dejar que Safari decida
	   cuándo promoverla, evita ese primer frame mal pintado. */
	transform: translateZ(0);
	will-change: transform;
}

/* Pedido de Mariano (25/9/2026): nada de círculo/marco — Lupo flota
   directo sobre la página, como un logo, no como una "foto de perfil".
   `lupo.png` ya viene con el fondo removido (transparencia real, no un
   webp con fondo blanco recortado por CSS); `drop-shadow` sigue el
   contorno del propio dibujo en vez de una sombra cuadrada como daba
   `box-shadow` en un elemento sin fondo. */
.lupo-lanzador img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(31, 41, 55, .35));
}

.lupo-lanzador:hover { transform: translateZ(0) scale(1.06); }
.lupo-lanzador:focus-visible,
.lupo-opcion:focus-visible,
.lupo-cabecera__cerrar:focus-visible,
.lupo-cabecera__wa:focus-visible,
.lupo-pie__reiniciar:focus-visible,
.lupo-invitacion__texto:focus-visible,
.lupo-invitacion__cerrar:focus-visible,
.lupo-lista__items a:focus-visible,
.lupo-form input:focus-visible,
.lupo-form__enviar:focus-visible {
	outline: 3px solid var(--azul);
	outline-offset: 2px;
}

/* ---- Invitación ("¿Te ayudo a buscar?") --------------------------------- */

.lupo-invitacion {
	bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: center;
	gap: 2px;
	max-width: calc(100vw - 32px);
	padding: 4px 4px 4px 4px;
	border-radius: 14px 14px 4px 14px;
	background: #fff;
	border: 1px solid var(--borde);
	box-shadow: 0 6px 18px rgba(31, 41, 55, .2);
	animation: lupo-entrada .25s ease-out;
}

.lupo-invitacion__texto {
	padding: 8px 6px 8px 12px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--azul);
	cursor: pointer;
}

.lupo-invitacion__cerrar {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: var(--texto-suave);
	cursor: pointer;
}

.lupo-invitacion__cerrar:hover { background: var(--fondo-suave); }

/* ---- Panel (abierto) ---------------------------------------------------- */

.lupo-panel {
	bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: min(540px, calc(100vh - 116px));
	height: min(540px, calc(100dvh - 116px));
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 36px rgba(31, 41, 55, .32);
	overflow: hidden;
	animation: lupo-entrada .2s ease-out;
}

.lupo-panel[hidden] { display: none; }
.lupo-panel:focus { outline: none; }

/* Cabecera */
.lupo-cabecera {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--azul);
	color: #fff;
}

.lupo-cabecera__avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	object-fit: cover;
}

.lupo-cabecera__titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lupo-cabecera__titulo strong { font-size: 16px; }
.lupo-cabecera__titulo span { font-size: 12px; opacity: .85; }

.lupo-cabecera__wa,
.lupo-cabecera__cerrar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
}

.lupo-cabecera__wa:hover,
.lupo-cabecera__cerrar:hover { background: rgba(255, 255, 255, .26); text-decoration: none; }
.lupo-cabecera__wa:focus-visible,
.lupo-cabecera__cerrar:focus-visible { outline-color: #fff; }

/* Mensajes */
.lupo-mensajes {
	flex: 1;
	min-height: 0;
	padding: 14px 12px;
	background: var(--fondo-suave);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Sin esto, con mucho contenido la columna aplasta la lista de perfiles hasta
   dejarla invisible: los bloques mantienen su tamaño y el chat scrollea. */
.lupo-mensajes > * { flex-shrink: 0; }

.lupo-msg {
	max-width: 88%;
	padding: 9px 13px;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.lupo-msg--lupo {
	align-self: flex-start;
	border: 1px solid var(--borde);
	border-radius: 14px 14px 14px 4px;
	background: #fff;
	color: var(--texto);
}

.lupo-msg--usuario {
	align-self: flex-end;
	border-radius: 14px 14px 4px 14px;
	background: var(--azul);
	color: #fff;
}

.lupo-msg--escribiendo { display: flex; gap: 4px; padding: 12px 14px; }

.lupo-punto {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--texto-suave);
	animation: lupo-punto 1s infinite ease-in-out;
}

.lupo-punto:nth-child(2) { animation-delay: .15s; }
.lupo-punto:nth-child(3) { animation-delay: .3s; }

/* Opciones (botones) */
.lupo-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 2px;
}

.lupo-opcion {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1.5px solid var(--azul);
	border-radius: 999px;
	background: #fff;
	color: var(--azul);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.lupo-opcion:hover { background: var(--azul); color: #fff; text-decoration: none; }

.lupo-opcion--sec { border-color: var(--borde); color: var(--texto); background: #fff; }
.lupo-opcion--sec:hover { border-color: var(--azul); background: var(--azul); color: #fff; }

.lupo-opcion--atras { border-color: transparent; background: none; color: var(--texto-suave); padding-left: 6px; padding-right: 6px; }
.lupo-opcion--atras:hover { background: none; color: var(--azul); text-decoration: underline; }

.lupo-opcion--wa { border-color: #128c4a; background: #128c4a; color: #fff; }
.lupo-opcion--wa:hover { background: #0d6e39; border-color: #0d6e39; }

/* Lista de perfiles (solo nombre + link) */
.lupo-lista {
	align-self: stretch;
	border: 1px solid var(--borde);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.lupo-lista__items { margin: 0; padding: 0; list-style: none; }
.lupo-lista__items li + li { border-top: 1px solid var(--borde); }

.lupo-lista__items a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--azul);
}

.lupo-lista__items a::after { content: "↗"; flex: none; color: var(--naranja); font-weight: 700; }
.lupo-lista__items a:hover { background: var(--fondo-suave); text-decoration: none; }

/* Escribir lo que busco */
.lupo-form { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.lupo-form__fila { display: flex; gap: 8px; }

.lupo-form input {
	flex: 1;
	min-width: 0;
	min-height: 42px;
	padding: 8px 12px;
	border: 1.5px solid var(--borde);
	border-radius: 999px;
	font: inherit;
	font-size: 16px; /* 16px: evita el zoom automático de iOS al enfocar */
	color: var(--texto);
}

.lupo-form__enviar {
	flex: none;
	min-height: 42px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--azul);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.lupo-form__enviar:hover { background: var(--azul-claro); }
.lupo-form .lupo-opcion--atras { align-self: flex-start; }

/* Pie */
.lupo-pie {
	display: flex;
	justify-content: center;
	padding: 6px 10px 8px;
	border-top: 1px solid var(--borde);
	background: #fff;
}

.lupo-pie__reiniciar {
	padding: 6px 10px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12px;
	color: var(--texto-suave);
	cursor: pointer;
}

.lupo-pie__reiniciar:hover { color: var(--azul); text-decoration: underline; }

/* ---- Celular ------------------------------------------------------------ */

@media (max-width: 560px) {
	.lupo-lanzador { right: 14px; width: 82px; height: 82px; }

	.lupo-panel {
		right: 12px;
		left: 12px;
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-width: none;
		height: min(72vh, calc(100vh - 100px));
		height: min(72dvh, calc(100dvh - 100px));
	}

	.lupo-invitacion { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Animaciones -------------------------------------------------------- */

@keyframes lupo-entrada {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes lupo-punto {
	0%, 80%, 100% { opacity: .3; transform: none; }
	40%           { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
	.lupo-lanzador, .lupo-opcion { transition: none; }
	.lupo-lanzador:hover { transform: translateZ(0); }
	.lupo-panel, .lupo-invitacion, .lupo-punto { animation: none; }
}