/* MDPD Quick Contacts — botón flotante.
   Medidas y colores llegan como variables desde el plugin; el estilo y la esquina, como clases.
   La vista previa del admin usa este mismo archivo. */

.mdpd-qc {
	--qc-tam: 56px;
	--qc-ico: 55%;
	--qc-mx: 20px;
	--qc-my: 20px;
	--qc-item: var(--qc-tam);
	--qc-sombra: 0 4px 14px rgba(0, 0, 0, .22);
	--qc-sombra-hover: 0 8px 22px rgba(0, 0, 0, .28);

	position: fixed;
	z-index: 99998;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: inherit;
	line-height: 1.2;
	pointer-events: none;
}
.mdpd-qc *, .mdpd-qc *::before, .mdpd-qc *::after { box-sizing: border-box; }
.mdpd-qc--agrupado { --qc-item: calc(var(--qc-tam) * .84); }

/* ─── Esquinas ───────────────────────────────────────────────────── */

.mdpd-qc--abajo-derecha    { bottom: var(--qc-my); right: var(--qc-mx); align-items: flex-end; }
.mdpd-qc--abajo-izquierda  { bottom: var(--qc-my); left: var(--qc-mx);  align-items: flex-start; }
.mdpd-qc--arriba-derecha   { top: var(--qc-my);    right: var(--qc-mx); align-items: flex-end;   flex-direction: column-reverse; }
.mdpd-qc--arriba-izquierda { top: var(--qc-my);    left: var(--qc-mx);  align-items: flex-start; flex-direction: column-reverse; }

/* Con la barra de admin de WordPress, arriba se corre para no taparla. */
.admin-bar .mdpd-qc--arriba-derecha,
.admin-bar .mdpd-qc--arriba-izquierda { top: calc(var(--qc-my) + 32px); }
@media (max-width: 782px) {
	.admin-bar .mdpd-qc--arriba-derecha,
	.admin-bar .mdpd-qc--arriba-izquierda { top: calc(var(--qc-my) + 46px); }
}

/* El primer canal queda pegado al botón: abajo la lista crece hacia arriba. */
.mdpd-qc__lista {
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	align-items: inherit;
}
.mdpd-qc--arriba-derecha .mdpd-qc__lista,
.mdpd-qc--arriba-izquierda .mdpd-qc__lista { flex-direction: column; }

/* Agrupados, los círculos más chicos quedan centrados sobre el botón. */
.mdpd-qc--agrupado .mdpd-qc__lista { padding-inline: calc((var(--qc-tam) - var(--qc-item)) / 2); }

/* ─── Canal ──────────────────────────────────────────────────────── */

.mdpd-qc__item {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
.mdpd-qc--abajo-izquierda .mdpd-qc__item,
.mdpd-qc--arriba-izquierda .mdpd-qc__item { flex-direction: row-reverse; }

.mdpd-qc__circulo,
.mdpd-qc__boton {
	--qc-bg: var(--qc-marca-fondo, #25D366);
	--qc-fg: #fff;
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--qc-bg);
	color: var(--qc-fg);
	box-shadow: var(--qc-sombra);
	transition: transform .18s ease, box-shadow .18s ease;
}
.mdpd-qc__circulo {
	width: var(--qc-item);
	height: var(--qc-item);
}
.mdpd-qc__item:hover .mdpd-qc__circulo,
.mdpd-qc__item:focus-visible .mdpd-qc__circulo {
	transform: scale(1.08);
	box-shadow: var(--qc-sombra-hover);
}
.mdpd-qc__item:focus-visible { outline: none; }
.mdpd-qc__item:focus-visible .mdpd-qc__circulo { outline: 3px solid rgba(0, 0, 0, .35); outline-offset: 3px; }

.mdpd-qc__svg {
	display: block;
	width: var(--qc-ico);
	height: var(--qc-ico);
}

/* ─── Etiquetas ──────────────────────────────────────────────────── */

.mdpd-qc__etiqueta,
.mdpd-qc__invitacion {
	padding: 7px 13px;
	border-radius: 999px;
	background: #fff;
	color: #2b2b2b;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	pointer-events: none;
}
.mdpd-qc--etiquetas-nunca .mdpd-qc__etiqueta { display: none; }
.mdpd-qc--etiquetas-hover .mdpd-qc__etiqueta {
	opacity: 0;
	transform: translateX(6px);
	transition: opacity .18s ease, transform .18s ease;
}
.mdpd-qc--abajo-izquierda.mdpd-qc--etiquetas-hover .mdpd-qc__etiqueta,
.mdpd-qc--arriba-izquierda.mdpd-qc--etiquetas-hover .mdpd-qc__etiqueta { transform: translateX(-6px); }
.mdpd-qc--etiquetas-hover .mdpd-qc__item:hover .mdpd-qc__etiqueta,
.mdpd-qc--etiquetas-hover .mdpd-qc__item:focus-visible .mdpd-qc__etiqueta {
	opacity: 1;
	transform: none;
}
/* En el celular no hay hover: abierto el grupo, se leen los nombres. */
@media (hover: none) {
	.mdpd-qc--agrupado.mdpd-qc--etiquetas-hover.is-abierto .mdpd-qc__etiqueta { opacity: 1; transform: none; }
}

/* ─── Botón de contacto (modo agrupado) ──────────────────────────── */

.mdpd-qc__base {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mdpd-qc--abajo-izquierda .mdpd-qc__base,
.mdpd-qc--arriba-izquierda .mdpd-qc__base { flex-direction: row-reverse; }

.mdpd-qc__boton {
	--qc-bg: var(--qc-boton, #25D366);
	--qc-fg: var(--qc-boton-ico, #fff);
	width: var(--qc-tam);
	height: var(--qc-tam);
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
.mdpd-qc__boton:hover,
.mdpd-qc__boton:focus-visible {
	transform: scale(1.06);
	box-shadow: var(--qc-sombra-hover);
	background: var(--qc-bg);
	color: var(--qc-fg);
}
.mdpd-qc__boton:focus-visible { outline: 3px solid rgba(0, 0, 0, .35); outline-offset: 3px; }

.mdpd-qc__boton .mdpd-qc__svg {
	position: absolute;
	transition: opacity .2s ease, transform .25s ease;
}
.mdpd-qc__svg--cerrar { opacity: 0; transform: rotate(-90deg) scale(.6); }
.mdpd-qc.is-abierto .mdpd-qc__svg--abrir { opacity: 0; transform: rotate(90deg) scale(.6); }
.mdpd-qc.is-abierto .mdpd-qc__svg--cerrar { opacity: 1; transform: none; }

.mdpd-qc__invitacion { transition: opacity .18s ease; }
.mdpd-qc.is-abierto .mdpd-qc__invitacion { opacity: 0; }

/* Cerrado, la lista no se ve ni se toca; se abre en cascada desde el botón. */
.mdpd-qc--agrupado .mdpd-qc__item {
	transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1), visibility 0s linear .25s;
	transition-delay: calc(var(--i, 0) * 35ms), calc(var(--i, 0) * 35ms), .25s;
}
.mdpd-qc--agrupado:not(.is-abierto) .mdpd-qc__item {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(14px) scale(.6);
	transition-delay: 0s, 0s, .25s;
}
.mdpd-qc--agrupado.mdpd-qc--arriba-derecha:not(.is-abierto) .mdpd-qc__item,
.mdpd-qc--agrupado.mdpd-qc--arriba-izquierda:not(.is-abierto) .mdpd-qc__item { transform: translateY(-14px) scale(.6); }
.mdpd-qc--agrupado.is-abierto .mdpd-qc__item { visibility: visible; transition-delay: calc(var(--i, 0) * 35ms), calc(var(--i, 0) * 35ms), 0s; }

/* ─── Estilos de color ───────────────────────────────────────────── */

/* Marca: círculo del color de cada marca, ícono blanco (es el valor de base). */

/* Blanco: círculo blanco, ícono del color de la marca. */
.mdpd-qc--estilo-blanco .mdpd-qc__circulo { --qc-bg: #fff; --qc-fg: var(--qc-marca, #25D366); }
.mdpd-qc--estilo-blanco .mdpd-qc__boton   { --qc-bg: #fff; --qc-fg: var(--qc-boton, #25D366); }

/* Color del sitio: todos del color del sitio, ícono de color fijo. */
.mdpd-qc--estilo-sitio .mdpd-qc__circulo,
.mdpd-qc--estilo-sitio .mdpd-qc__boton { --qc-bg: var(--qc-sitio); --qc-fg: var(--qc-sitio-ico, #fff); }

/* A medida: un color elegido y el ícono que contrasta, calculado por el plugin. */
.mdpd-qc--estilo-medida .mdpd-qc__circulo,
.mdpd-qc--estilo-medida .mdpd-qc__boton { --qc-bg: var(--qc-medida); --qc-fg: var(--qc-medida-ico, #fff); }

/* ─── Pulso para llamar la atención ──────────────────────────────── */

.mdpd-qc--anima .mdpd-qc__boton::after,
.mdpd-qc--anima.mdpd-qc--desplegado .mdpd-qc__item:first-child .mdpd-qc__circulo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	--qc-pulso: var(--qc-bg);
	opacity: .55;
	animation: mdpd-qc-pulso 3.2s ease-out 1.5s infinite;
	pointer-events: none;
}
.mdpd-qc--anima.mdpd-qc--estilo-blanco .mdpd-qc__boton::after,
.mdpd-qc--anima.mdpd-qc--estilo-blanco .mdpd-qc__circulo::after { --qc-pulso: var(--qc-fg); }
.mdpd-qc.is-abierto .mdpd-qc__boton::after { animation: none; opacity: 0; }

@keyframes mdpd-qc-pulso {
	0%   { box-shadow: 0 0 0 0 var(--qc-pulso); opacity: .55; }
	45%  { box-shadow: 0 0 0 16px var(--qc-pulso); opacity: 0; }
	100% { box-shadow: 0 0 0 16px var(--qc-pulso); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mdpd-qc *, .mdpd-qc *::after { animation: none !important; transition: none !important; }
}

/* ─── Escritorio / celular ───────────────────────────────────────── */

@media (min-width: 769px) { .mdpd-qc--sin-escritorio { display: none !important; } }
@media (max-width: 768px) {
	.mdpd-qc--sin-movil { display: none !important; }
	.mdpd-qc__etiqueta, .mdpd-qc__invitacion { font-size: 13px; padding: 6px 11px; }
}