/**
 * MiRed Contacto Flotante — estilos del widget.
 * Namespaced con .mired-ctf. Botón circular fijo abajo a la derecha + panel
 * de contacto (encabezado azul MiRed, filas gris claro y tarjeta CTA).
 */

/* El widget es de posición fija: no debe ocupar espacio en el flujo. */
.elementor-widget-mired-contacto-flotante {
	width: 0;
	height: 0;
	flex: 0 0 auto;
}

.mired-ctf {
	--mired-ctf-navy: #3d5f7d;
	--mired-ctf-navy-dark: #1e3a52;
	--mired-ctf-surface: #f9fafb;
	--mired-ctf-icon-bg: #e6eaee;
	--mired-ctf-icon: #3d5f7d;
	--mired-ctf-muted: #8a9aa8;
	--mired-ctf-border: #e4e9ee;
	--mired-ctf-fab: #3d5f7d;
	--mired-ctf-fab-open: #1e2226;
	--mired-ctf-dot: #2ecc71;
	--mired-ctf-gap: 24px;

	position: fixed;
	right: var(--mired-ctf-gap);
	bottom: var(--mired-ctf-gap);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.mired-ctf *,
.mired-ctf *::before,
.mired-ctf *::after {
	box-sizing: border-box;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
.mired-ctf .mired-ctf__panel {
	width: 460px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(16, 42, 67, 0.22);
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.mired-ctf .mired-ctf__panel[hidden] {
	display: none;
}

.mired-ctf.is-open .mired-ctf__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.mired-ctf .mired-ctf__panel {
		transition: none;
	}
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */
.mired-ctf .mired-ctf__header {
	position: relative;
	padding: 20px 64px 20px 28px;
	background: var(--mired-ctf-navy);
	border-radius: 20px 20px 0 0;
	color: #fff;
}

.mired-ctf .mired-ctf__eyebrow {
	margin: 0 0 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.mired-ctf .mired-ctf__title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.mired-ctf .mired-ctf__subtitle {
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.74);
}

.mired-ctf .mired-ctf__close {
	position: absolute;
	top: 16px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease;
}

.mired-ctf .mired-ctf__close:focus {
	background: rgba(255, 255, 255, 0.16);
}

.mired-ctf .mired-ctf__close:hover,
.mired-ctf .mired-ctf__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.mired-ctf .mired-ctf__close svg {
	width: 15px;
	height: 15px;
}

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */
.mired-ctf .mired-ctf__body {
	padding: 24px;
}

.mired-ctf .mired-ctf__list-title {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--mired-ctf-navy-dark);
}

.mired-ctf .mired-ctf__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mired-ctf .mired-ctf__row + .mired-ctf__row {
	margin-top: 12px;
}

.mired-ctf .mired-ctf__item,
.mired-ctf .mired-ctf__cta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--mired-ctf-surface);
	color: var(--mired-ctf-navy-dark);
	text-decoration: none;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

.mired-ctf a.mired-ctf__item:hover,
.mired-ctf a.mired-ctf__item:focus-visible {
	background: #f1f4f8;
}

.mired-ctf .mired-ctf__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mired-ctf-icon-bg);
	color: var(--mired-ctf-icon);
}

.mired-ctf .mired-ctf__icon svg {
	width: 19px;
	height: 19px;
}

.mired-ctf .mired-ctf__text {
	min-width: 0;
	flex: 1 1 auto;
}

.mired-ctf .mired-ctf__label {
	display: block;
	margin-bottom: 4px;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mired-ctf-muted);
}

.mired-ctf .mired-ctf__value {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mired-ctf-navy-dark);
	word-break: break-word;
}

/* ── Tarjeta CTA (centro de atención) ───────────────────────────────────── */
.mired-ctf .mired-ctf__cta {
	margin-top: 12px;
	background: #fff;
	border: 1px solid var(--mired-ctf-border);
}

.mired-ctf a.mired-ctf__cta:hover,
.mired-ctf a.mired-ctf__cta:focus-visible {
	background: #fafbfc;
	box-shadow: 0 6px 18px rgba(30, 58, 82, 0.08);
}

.mired-ctf .mired-ctf__cta-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mired-ctf-navy-dark);
}

.mired-ctf .mired-ctf__cta-desc {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mired-ctf-muted);
}

.mired-ctf .mired-ctf__chevron {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--mired-ctf-muted);
}

.mired-ctf .mired-ctf__chevron svg {
	width: 16px;
	height: 16px;
}

/* ── Botón flotante ─────────────────────────────────────────────────────── */
.mired-ctf .mired-ctf__fab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mired-ctf-fab);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(30, 58, 82, 0.28);
	transition: background 0.2s ease, transform 0.2s ease;
}

/* El Kit de Elementor redondea `button` a 8px en varios estados (:hover, :focus).
   !important sobre esta única propiedad mantiene el círculo en todos los estados,
   incluidos los que el Kit pueda añadir más adelante. */
.mired-ctf .mired-ctf__fab,
.mired-ctf .mired-ctf__close {
	border-radius: 50% !important;
}

.mired-ctf .mired-ctf__fab:hover,
.mired-ctf .mired-ctf__fab:focus {
	background: var(--mired-ctf-fab);
	color: #fff;
}

.mired-ctf .mired-ctf__fab:hover {
	transform: translateY(-2px);
}

.mired-ctf.is-open .mired-ctf__fab,
.mired-ctf.is-open .mired-ctf__fab:hover,
.mired-ctf.is-open .mired-ctf__fab:focus {
	background: var(--mired-ctf-fab-open);
}

.mired-ctf .mired-ctf__fab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mired-ctf .mired-ctf__fab-icon svg {
	width: 26px;
	height: 26px;
}

.mired-ctf .mired-ctf__dot {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 16px;
	height: 16px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--mired-ctf-dot);
}

.mired-ctf.is-open .mired-ctf__dot {
	display: none;
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.mired-ctf {
		--mired-ctf-gap: 16px;
		/* Safari iOS: que el botón no quede bajo la barra inferior. */
		bottom: calc(var(--mired-ctf-gap) + env(safe-area-inset-bottom, 0px));
	}

	/* Fondo oscurecido al abrir: se ve que es un panel y tocar fuera lo cierra. */
	.mired-ctf.is-open::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgba(16, 42, 67, 0.45);
	}

	/* Bloquea el scroll de la página mientras el panel está abierto. */
	html.mired-ctf-open {
		overflow: hidden;
	}

	.mired-ctf .mired-ctf__panel {
		max-height: calc(100vh - 140px);
		max-height: calc(100dvh - 140px); /* barras dinámicas del navegador móvil */
	}

	/* El encabezado (con la X) se queda fijo al hacer scroll dentro del panel. */
	.mired-ctf .mired-ctf__header {
		position: sticky;
		top: 0;
		z-index: 1;
		padding: 18px 66px 18px 22px;
	}

	/* X de cerrar con área táctil de 44px. */
	.mired-ctf .mired-ctf__close {
		top: 10px;
		right: 10px;
		width: 44px;
		height: 44px;
	}

	.mired-ctf .mired-ctf__close svg {
		width: 18px;
		height: 18px;
	}

	.mired-ctf .mired-ctf__title {
		font-size: 21px;
	}

	.mired-ctf .mired-ctf__body {
		padding: 20px;
	}

	.mired-ctf .mired-ctf__value {
		font-size: 16px;
	}
}

/* En el editor de Elementor el widget se muestra en flujo para poder editarlo. */
.elementor-editor-active .mired-ctf,
.elementor-editor-preview .mired-ctf {
	z-index: 998;
}