/**
 * Asesor de Sonum. Usa las variables del tema (negro, amarillo, radio, sombra)
 * para que no parezca un widget pegado de otro sitio. Sin flechas decorativas
 * ni circulos: decision de Luca del 08/08/2026 sobre la estetica de Sonum.
 */

.sonum-asesor--flotante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.sonum-asesor__lanzador {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ink, #111418);
	color: var(--white, #fff);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--shadow, 0 16px 40px rgba(17, 20, 24, 0.1));
	transition: background 0.2s ease, color 0.2s ease;
}

.sonum-asesor__lanzador:hover,
.sonum-asesor__lanzador:focus-visible {
	background: var(--yellow, #ffd43b);
	color: var(--ink, #111418);
}

.sonum-asesor--flotante .sonum-asesor__panel {
	width: min(380px, calc(100vw - 32px));
	max-height: min(560px, calc(100vh - 120px));
	box-shadow: var(--shadow, 0 16px 40px rgba(17, 20, 24, 0.1));
}

.sonum-asesor__panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line, #e3e5e7);
	border-radius: var(--radius, 8px);
	background: var(--white, #fff);
}

.sonum-asesor__panel[hidden] {
	display: none;
}

.sonum-asesor__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--ink, #111418);
	color: var(--white, #fff);
}

.sonum-asesor__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.sonum-asesor__bajada {
	margin: 3px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
}

.sonum-asesor__cerrar {
	border: 0;
	background: none;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
}

.sonum-asesor__conversacion {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	overflow-y: auto;
	flex: 1;
}

.sonum-asesor__burbuja {
	max-width: 88%;
	padding: 11px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
}

.sonum-asesor__burbuja p {
	margin: 0;
}

.sonum-asesor__burbuja--sonum {
	align-self: flex-start;
	background: var(--soft, #f6f6f4);
	color: var(--ink, #111418);
	border-bottom-left-radius: 4px;
}

.sonum-asesor__burbuja--cliente {
	align-self: flex-end;
	background: var(--yellow-soft, #fff7d1);
	color: var(--yellow-ink, #765900);
	font-weight: 600;
	border-bottom-right-radius: 4px;
}

.sonum-asesor__ayuda {
	margin: -4px 0 2px;
	font-size: 12.5px;
	color: var(--muted, #62686e);
}

.sonum-asesor__opciones {
	display: grid;
	gap: 8px;
}

.sonum-asesor__opcion {
	display: grid;
	gap: 2px;
	width: 100%;
	padding: 12px 14px;
	text-align: left;
	border: 1px solid var(--line, #e3e5e7);
	border-radius: var(--radius, 8px);
	background: var(--white, #fff);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sonum-asesor__opcion:hover,
.sonum-asesor__opcion:focus-visible {
	border-color: var(--yellow-strong, #d7a800);
	background: var(--yellow-soft, #fff7d1);
}

.sonum-asesor__opcion-titulo {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink, #111418);
}

.sonum-asesor__opcion-detalle {
	font-size: 12.5px;
	color: var(--muted, #62686e);
}

.sonum-asesor__aviso {
	margin: 0;
	padding: 11px 13px;
	border-left: 3px solid var(--yellow-strong, #d7a800);
	background: var(--yellow-soft, #fff7d1);
	color: var(--yellow-ink, #765900);
	font-size: 13.5px;
	line-height: 1.45;
}

.sonum-asesor__productos {
	display: grid;
	gap: 10px;
}

.sonum-asesor__producto {
	display: flex;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--line, #e3e5e7);
	border-radius: var(--radius, 8px);
	background: var(--white, #fff);
}

.sonum-asesor__producto-foto {
	flex: 0 0 68px;
}

.sonum-asesor__producto-foto img {
	width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--soft, #f6f6f4);
}

.sonum-asesor__producto-cuerpo {
	display: grid;
	gap: 3px;
	align-content: start;
}

.sonum-asesor__producto-cuerpo h4 {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--ink, #111418);
}

.sonum-asesor__precio {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink, #111418);
}

.sonum-asesor__motivo {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted, #62686e);
}

.sonum-asesor__ultimos {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--yellow-ink, #765900);
}

.sonum-asesor__ver {
	justify-self: start;
	margin-top: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink, #111418);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sonum-asesor__ver:hover {
	color: var(--yellow-strong, #d7a800);
}

.sonum-asesor__complemento {
	display: grid;
	gap: 8px;
	padding: 13px;
	border: 1px dashed var(--line, #e3e5e7);
	border-radius: var(--radius, 8px);
	background: var(--soft, #f6f6f4);
	font-size: 13.5px;
	line-height: 1.45;
}

.sonum-asesor__complemento p {
	margin: 0;
}

.sonum-asesor__complemento-titulo {
	font-weight: 700;
	color: var(--ink, #111418);
}

.sonum-asesor__cierre {
	display: grid;
	gap: 6px;
	padding-top: 4px;
	font-size: 13.5px;
	color: var(--muted, #62686e);
}

.sonum-asesor__cierre p {
	margin: 0;
}

.sonum-asesor__canal {
	justify-self: start;
	font-weight: 600;
	color: var(--ink, #111418);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sonum-asesor__pie {
	display: flex;
	gap: 14px;
	padding: 12px 18px;
	border-top: 1px solid var(--line, #e3e5e7);
	background: var(--white, #fff);
}

.sonum-asesor__pie:empty {
	display: none;
}

.sonum-asesor__texto {
	border: 0;
	background: none;
	padding: 0;
	font-size: 13px;
	color: var(--muted, #62686e);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sonum-asesor__texto:hover {
	color: var(--ink, #111418);
}

/* Empotrado en una pagina (shortcode): ocupa el ancho del contenido y no flota.
   Va con doble clase a proposito: dentro de `.sonum-contact` el tema aplica
   `display:flex` a los div hijos y le ganaba a una sola clase. */
.sonum-asesor.sonum-asesor--fijo {
	display: block;
	width: 100%;
	margin: 28px 0;
}

.sonum-asesor--fijo .sonum-asesor__panel {
	max-width: 620px;
}

.sonum-asesor--fijo .sonum-asesor__conversacion {
	min-height: 320px;
	max-height: 560px;
}

@media (max-width: 620px) {
	.sonum-asesor--flotante {
		right: 12px;
		bottom: 12px;
		left: 12px;
		align-items: stretch;
	}

	.sonum-asesor--flotante .sonum-asesor__panel {
		width: 100%;
		max-height: 78vh;
	}

	.sonum-asesor__lanzador {
		align-self: flex-end;
	}

	.sonum-asesor.is-abierto .sonum-asesor__lanzador {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sonum-asesor__lanzador,
	.sonum-asesor__opcion {
		transition: none;
	}
}