/* Chat Bubble (burbuja de chat configurable desde wp-admin).
   left/bottom (no right) a propósito: el widget "globo-fixed" del tema
   (functions.php, .globo-fixed) ya ocupa bottom-right. Si algún día ambos
   quedan activos a la vez, no se superponen.

   NOTA DE PALETA: este tema no tiene un color "gris neutro" en main.css —
   --quaternary-color, --quinary-color, etc. son todos tonos de AZUL fuerte
   (ver :root en main.css). La primera versión de este archivo asumió que
   --quaternary-color era un gris claro y lo usó de fondo con texto oscuro
   encima -> texto casi invisible (bug reportado). Acá se usa azul/dorado
   real del tema, siempre con texto blanco sobre fondos de color y texto
   oscuro solo sobre fondo blanco. */
.chat-bubble {
	position: fixed;
	left: 30px;
	bottom: 30px;
	z-index: 999;
	/* Explícito (no solo heredado de body) para que el widget se vea igual
	   aunque algún día quede embebido en un contexto con otra tipografía. */
	font-family: var(--primary-font, 'PP Neue Machina', sans-serif);
}

.chat-bubble__icon {
	width: 60px;
	height: 60px;
	border-radius: 100%;
	border: none;
	background: var(--octonary-color, #027bff);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

/* Los 2 íconos (abrir/cerrar) se dibujan siempre los dos en el DOM y se
   alternan solo con CSS según la clase .active que pone chat-bubble.js —
   evita re-renderizar el botón con JS cada click, más simple y liviano. */
.chat-bubble__icon-close {
	display: none;
}

.chat-bubble.active .chat-bubble__icon-open {
	display: none;
}

.chat-bubble.active .chat-bubble__icon-close {
	display: block;
}

/* Panel queda SIEMPRE en el DOM (nunca display:none) y se anima con
   transform/opacity + pointer-events:none cuando está cerrado. Se eligió
   así (en vez de display:none/block) para poder animar la apertura con
   transition — display no es animable. */
.chat-bubble__panel {
	position: absolute;
	left: 0;
	bottom: 75px;
	width: 300px;
	max-width: calc(100vw - 60px);
	max-height: 60vh;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: translateY(20px) scale(0.95);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.25s, opacity 0.25s;
}

.chat-bubble.active .chat-bubble__panel {
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.chat-bubble__header {
	background: var(--octonary-color, #027bff);
	color: #fff;
	padding: 14px 16px;
	font-weight: 600;
	flex-shrink: 0;
}

.chat-bubble__body {
	padding: 10px;
	overflow-y: auto;
}

/* Item raíz (pregunta / enlace / formulario): fondo azul del tema, texto
   SIEMPRE blanco — es la corrección del bug de contraste (antes: texto
   #222 sobre este mismo azul, casi ilegible). */
.chat-bubble__item {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--quaternary-color, #0047ab);
	border: none;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.chat-bubble__item:hover,
.chat-bubble__item:focus {
	background: var(--tertiary-color, #0047ab);
	color: #fff;
}

/* Bug reportado: el item tipo "enlace" (el único <a> del widget) se veía
   azul pálido en vez de blanco. Causa: main.css define "a:visited { color:
   initial }" (línea ~82), y la especificidad de un selector
   elemento+pseudo-clase (0,1,1) le gana a nuestra única clase (0,1,0) en
   cuanto el link ya fue visitado en el navegador. Se sube la especificidad
   acá (clase+pseudo-clase = 0,2,0) para que el blanco siempre gane. */
.chat-bubble__item:visited,
.chat-bubble__item:link {
	color: #fff;
}

.chat-bubble__item--link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* Oculto por defecto: chat-bubble.js le agrega .branch-open al contenedor
   raíz (#dlcChatBubble) apenas hay alguna pregunta/sub-pregunta abierta, y
   se lo quita cuando todo vuelve a estar cerrado. Así el botón "Volver al
   menú" solo aparece cuando realmente sirve para algo. Color primary
   (azul) en vez de octonary (dorado): dorado sobre blanco da muy poco
   contraste para texto pequeño. */
.chat-bubble__volver {
	display: none;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--primary-color, #005bea);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 6px 10px;
	cursor: pointer;
}

.chat-bubble.branch-open .chat-bubble__volver {
	display: flex;
}

/* BUG reportado ("no conserva el espaciado, se ve sobrepuesto"): el margen
   que separaba una pregunta de la siguiente vivía en el BOTÓN interno
   (.chat-bubble__item margin-bottom:8px), pero .chat-bubble__qa (el <div>
   que envuelve botón + opciones) nunca tuvo margen propio. Esta misma
   regla además ponía ese margen del botón en 0, dejando el wrapper con
   CERO espacio real hacia el siguiente elemento. En las preguntas
   anidadas (.chat-bubble__opcion-qa) pasaba lo mismo y encima el margen
   del último hijo podía "colapsar" a través del wrapper (ningún padding/
   border lo detenía), agravando el solape.
   Fix: el margen de separación vive en el WRAPPER (no en el botón), y
   'display:flow-root' evita que el margen de los hijos se escape/colapse
   a través del wrapper — así el espacio es siempre el mismo, esté la
   pregunta abierta o cerrada. */
.chat-bubble__qa {
	display: flow-root;
	margin-bottom: 8px;
}

.chat-bubble__qa .chat-bubble__question {
	margin-bottom: 0;
}

/* Lista de "opciones de respuesta" (ej: Sí / No) de una pregunta. Oculta por
   defecto y se revela con clase .open (puesta por chat-bubble.js al hacer
   clic en la pregunta) — sin AJAX, todas las ramas ya están en el HTML. */
.chat-bubble__opciones {
	display: none;
	padding-left: 10px;
	border-left: 2px solid var(--quaternary-color, #0047ab);
	margin: 4px 0 0;
}

/* Mismo reveal que arriba, pero cuando la lista de opciones cuelga de una
   sub-pregunta (nivel 3) en vez de la pregunta raíz — .chat-bubble__opcion-qa
   es el wrapper que usa el caso "pregunta" dentro de una opción. */
.chat-bubble__qa.open .chat-bubble__opciones,
.chat-bubble__opcion-qa.open > .chat-bubble__opciones {
	display: block;
}

/* Opción anidada (Sí / No / sub-pregunta): fondo blanco + borde azul +
   texto azul oscuro — a diferencia del item raíz, acá el fondo SIEMPRE es
   blanco, por eso el texto oscuro sí tiene contraste real. */
.chat-bubble__opcion {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1px solid var(--quaternary-color, #0047ab);
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 6px;
	font-size: 13px;
	font-family: inherit;
	color: var(--tertiary-color, #0047ab);
	text-decoration: none;
	cursor: pointer;
}

.chat-bubble__opcion:hover,
.chat-bubble__opcion:focus {
	background: var(--quaternary-color, #0047ab);
	color: #fff;
}

/* Mismo fix de especificidad que .chat-bubble__item:visited de arriba,
   para cuando la opción anidada (Sí/No) es tipo "enlace". */
.chat-bubble__opcion:visited,
.chat-bubble__opcion:link {
	color: var(--tertiary-color, #0047ab);
}

/* Opción tipo "texto": la respuesta anida un segundo nivel de toggle
   (misma idea que .chat-bubble__qa, pero un nivel más adentro) — es el caso
   "si responde Sí, mostrar este texto" sin necesidad de enlace ni form.
   Fondo blanco (no el azul del tema) + borde: mismo error de contraste que
   .chat-bubble__item tenía antes de la corrección, evitado acá desde el
   inicio. */
.chat-bubble__opcion-respuesta {
	display: none;
	background: #fff;
	border: 1px solid var(--quaternary-color, #0047ab);
	color: #222;
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 0;
	font-size: 12px;
}

/* Mismo patrón que .chat-bubble__qa de arriba: el margen de separación
   hacia el siguiente elemento vive en el wrapper (no en el botón toggle),
   con flow-root para que no colapse con el margen del último hijo. */
.chat-bubble__opcion-qa {
	display: flow-root;
	margin-bottom: 6px;
}

.chat-bubble__opcion-qa .chat-bubble__opcion-toggle {
	margin-bottom: 0;
}

.chat-bubble__opcion-qa.open .chat-bubble__opcion-respuesta {
	display: block;
}

/* .modal / .modal-dialog / .modal-content son clases de Bootstrap 5 (ya
   cargado por el tema); acá solo se ajusta el padding interno del form CF7. */
.chat-bubble__modal .modal-body {
	padding: 20px;
}

.chat-bubble__modal .modal-title {
	font-family: inherit;
	color: var(--tertiary-color, #0047ab);
}

@media (max-width: 576px) {
	.chat-bubble {
		left: 15px;
		bottom: 15px;
	}
}