/* ==========================================================================
   Asistente de ayuda (chatbot sin IA) — burbuja flotante + panel guionado.
   Todos los colores vienen de las variables --mm-* del sistema de diseño
   (mm-core.css), así que el modo oscuro se resuelve solo, sin reglas
   [data-tema="oscuro"] propias acá — el cambio de tema solo cambia color,
   nunca tamaño ni tipografía, igual que el resto del sitio.
   ========================================================================== */

:root {
	/* Separación entre la burbuja/panel y el borde de la pantalla. En las
	   páginas de oferta (ver .mm-tiene-sticky-cta más abajo) se agranda en
	   mobile para no chocar con la barra fija de "Enviar CV". */
	--mm-chatbot-offset: 1.1rem;
}

#mm-chatbot-root {
	position: relative;
	z-index: 900; /* debajo del modal de match (1000), arriba de todo lo demás */
}

#mm-chatbot-burbuja {
	position: fixed;
	right: var(--mm-chatbot-offset);
	bottom: var(--mm-chatbot-offset);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, var(--mm-ochre-light) 0%, var(--mm-ochre) 55%, var(--mm-ochre-600) 100%);
	box-shadow: var(--mm-shadow-ochre), var(--mm-shadow-md);
	transition: transform var(--mm-ease), box-shadow var(--mm-ease);
}

#mm-chatbot-burbuja:hover {
	transform: translateY(-2px) scale(1.04);
}

#mm-chatbot-burbuja:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--mm-ochre-050), 0 0 0 5px var(--mm-ochre-600);
}

/* WordPress convierte el emoji 💬 en <img class="emoji"> del lado del
   cliente (wp-emoji-release.js — no viene así en el HTML servido, por eso
   no aparecía al grepear el HTML crudo). La causa real medida en vivo: el
   <span> (flex item de #mm-chatbot-burbuja, que sí es display:flex) queda
   con width:auto y, como el contenido es una imagen reemplazada, el
   algoritmo de tamaño mínimo automático de flexbox lo colapsaba a ~3px de
   ancho (mismo problema NO afectaba la altura) — no alcanzaba con fijarle
   tamaño solo a la <img>, había que sacar al <span> mismo de ese cálculo
   con un tamaño explícito. */
.mm-chatbot-burbuja-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	font-size: 1.5rem;
	line-height: 1;
}

.mm-chatbot-burbuja-icono img.emoji {
	width: 26px !important;
	height: 26px !important;
	margin: 0;
}

/* En pantallas chicas, en páginas de oferta con barra de contacto fija
   (.mm-oferta-sticky, ver class-mm-oferta-publica.php / mm-core.css), la
   burbuja y el panel suben para no quedar tapados por esa barra. */
@media (max-width: 779.98px) {
	body.mm-tiene-sticky-cta {
		--mm-chatbot-offset: 5.6rem;
	}
}

#mm-chatbot-panel {
	position: fixed;
	right: var(--mm-chatbot-offset);
	bottom: calc(var(--mm-chatbot-offset) + 68px);
	width: min(340px, calc(100vw - 2.2rem));
	max-height: min(480px, calc(100vh - 140px));
	display: flex;
	flex-direction: column;
	background: var(--mm-bg-elevado);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius-lg);
	box-shadow: var(--mm-shadow-lg);
	overflow: hidden;
}

/* El "display: flex" de arriba le gana al [hidden] nativo del navegador
   (un ID siempre gana contra el selector de atributo [hidden]) — el botón
   "cerrar" SÍ ponía panel.hidden=true correctamente, pero visualmente no
   pasaba nada. Mismo bug ya visto antes con el modal de "match". */
#mm-chatbot-panel[hidden] {
	display: none;
}

.mm-chatbot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.9rem 1rem;
	background: linear-gradient(180deg, var(--mm-ochre-light) 0%, var(--mm-ochre) 100%);
	color: var(--mm-texto-sobre-dorado, var(--mm-dark));
	flex: 0 0 auto;
}

.mm-chatbot-titulo {
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1.25;
}

.mm-chatbot-cerrar,
.mm-chatbot-nudge-cerrar {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	color: inherit;
	cursor: pointer;
	font-size: 0.9rem;
}

.mm-chatbot-cuerpo {
	padding: 1rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.mm-chatbot-linea {
	margin: 0;
	color: var(--mm-body);
	font-size: 0.92rem;
	line-height: 1.5;
}

.mm-chatbot-ayuda-mas {
	margin: 0.2rem 0 0;
	color: var(--mm-muted);
	font-size: 0.85rem;
	font-style: italic;
}

.mm-chatbot-opciones {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.2rem;
}

.mm-chatbot-opcion {
	text-align: left;
	padding: 0.65rem 0.85rem;
	min-height: 44px;
	border: 1px solid var(--mm-ochre-border);
	border-radius: var(--mm-radius);
	background: var(--mm-ochre-050);
	color: var(--mm-ochre-ink);
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background-color var(--mm-ease), transform var(--mm-ease);
}

.mm-chatbot-opcion:hover {
	background: var(--mm-ochre-border);
	transform: translateX(2px);
}

.mm-chatbot-cta {
	align-self: flex-start;
	min-height: 44px;
	font-size: 0.9rem;
}

.mm-chatbot-nav {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--mm-line);
	flex: 0 0 auto;
}

.mm-chatbot-nav-btn {
	flex: 1 1 auto;
	min-height: 40px;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--mm-line-strong);
	border-radius: var(--mm-radius);
	background: var(--mm-surface-2);
	color: var(--mm-body);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.mm-chatbot-nav-btn:hover {
	background: var(--mm-ochre-050);
}

/* ---------- Fase 3: burbujita de aviso proactivo (perfil incompleto) ---------- */
#mm-chatbot-nudge {
	position: fixed;
	right: var(--mm-chatbot-offset);
	bottom: calc(var(--mm-chatbot-offset) + 68px);
	width: min(280px, calc(100vw - 2.2rem));
	padding: 0.85rem 0.9rem;
	background: var(--mm-bg-elevado);
	border: 1px solid var(--mm-ochre-border);
	border-radius: var(--mm-radius-lg);
	box-shadow: var(--mm-shadow-lg);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

#mm-chatbot-nudge p {
	margin: 0;
	padding-right: 1.5rem;
	color: var(--mm-body);
	font-size: 0.85rem;
	line-height: 1.45;
}

#mm-chatbot-nudge .mm-chatbot-nudge-cerrar {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: var(--mm-surface-2);
	color: var(--mm-body);
}

#mm-chatbot-nudge .mm-chatbot-cta {
	font-size: 0.85rem;
	padding: 0.6rem 1rem;
}