/**
 * AV · Generador de enlaces de WhatsApp
 *
 * Criterio de estilos: heredar todo lo que se pueda del theme y del kit de
 * Elementor. Las tipografías se toman con `inherit` (incluidos los campos de
 * formulario, que por defecto NO heredan) y los colores salen de las variables
 * globales de Elementor, con fallback por si el kit no está definido.
 */

.avwa {
	/* Colores: se enganchan al kit de Elementor; si no existe, usan el fallback. */
	--avwa-accent: var(--e-global-color-accent, #128c7e);
	--avwa-heading: var(--e-global-color-primary, currentColor);
	--avwa-text: var(--e-global-color-text, currentColor);

	/* Tonos derivados del color de texto, así funciona en fondo claro y oscuro. */
	--avwa-border: color-mix(in srgb, currentColor 16%, transparent);
	--avwa-border-strong: color-mix(in srgb, currentColor 30%, transparent);
	--avwa-surface: color-mix(in srgb, currentColor 3%, transparent);
	--avwa-muted: color-mix(in srgb, currentColor 62%, transparent);

	--avwa-radius: 10px;
	--avwa-gap: 22px;

	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: var(--avwa-text);
	box-sizing: border-box;
}

.avwa *,
.avwa *::before,
.avwa *::after {
	box-sizing: inherit;
}

/* Navegadores sin color-mix: colores planos de respaldo. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.avwa {
		--avwa-border: rgba(128, 128, 128, 0.28);
		--avwa-border-strong: rgba(128, 128, 128, 0.5);
		--avwa-surface: rgba(128, 128, 128, 0.05);
		--avwa-muted: rgba(128, 128, 128, 0.95);
	}
}

/* ------------------------------------------------------------------ *
 * Layout
 * ------------------------------------------------------------------ */

.avwa__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 48px;
	align-items: start;
}

.avwa__panel {
	min-width: 0;
}

.avwa__panel--preview {
	display: flex;
	justify-content: center;
}

/* El resultado ocupa una fila propia, a lo ancho de las dos columnas. */
.avwa__result {
	grid-column: 1 / -1;
}

@media (max-width: 880px) {
	.avwa__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* En mobile la vista previa va al final, justo antes de las FAQ. */
	.avwa__panel--form {
		order: 1;
	}

	.avwa__result {
		order: 2;
	}

	.avwa__panel--preview {
		order: 3;
	}
}

/* ------------------------------------------------------------------ *
 * Formulario
 * ------------------------------------------------------------------ */

.avwa__form {
	margin: 0;
}

.avwa__field {
	margin-bottom: var(--avwa-gap);
}

.avwa__label {
	display: block;
	margin-bottom: 7px;
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9em;
	letter-spacing: 0.01em;
	color: var(--avwa-heading);
}

/* Los controles de formulario no heredan tipografía por defecto: se fuerza. */
.avwa__input,
.avwa__select {
	width: 100%;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.45;
	color: inherit;
	background-color: transparent;
	border: 1px solid var(--avwa-border-strong);
	border-radius: var(--avwa-radius);
	padding: 13px 15px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.avwa__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 42px;
	cursor: pointer;
}

.avwa__input:focus,
.avwa__select:focus {
	outline: none;
	border-color: var(--avwa-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--avwa-accent) 22%, transparent);
}

.avwa__input::placeholder {
	color: var(--avwa-muted);
	opacity: 0.65;
}

.avwa__textarea {
	resize: vertical;
	min-height: 92px;
}

/* Campo de teléfono con prefijo de país adosado */
.avwa__phone {
	display: flex;
	align-items: stretch;
}

.avwa__prefix {
	display: flex;
	align-items: center;
	padding: 0 14px;
	font-family: inherit;
	font-weight: 600;
	font-size: 1em;
	white-space: nowrap;
	color: var(--avwa-heading);
	background: var(--avwa-surface);
	border: 1px solid var(--avwa-border-strong);
	border-right: 0;
	border-radius: var(--avwa-radius) 0 0 var(--avwa-radius);
}

.avwa__input--phone {
	border-radius: 0 var(--avwa-radius) var(--avwa-radius) 0;
}

.avwa__help {
	display: block;
	margin-top: 7px;
	font-family: inherit;
	font-size: 0.8em;
	line-height: 1.5;
	color: var(--avwa-muted);
}

.avwa__help--counter {
	text-align: right;
}

.avwa__error {
	display: none;
	margin-bottom: 16px;
	padding: 11px 14px;
	font-size: 0.85em;
	border-radius: var(--avwa-radius);
	color: #b42318;
	background: rgba(217, 45, 32, 0.09);
	border: 1px solid rgba(217, 45, 32, 0.28);
}

.avwa__error.is-visible {
	display: block;
}

/* ------------------------------------------------------------------ *
 * Botones
 * ------------------------------------------------------------------ */

.avwa__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: var(--avwa-radius);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
}

.avwa__btn:active {
	transform: translateY(1px);
}

.avwa__btn:focus-visible {
	outline: 2px solid var(--avwa-accent);
	outline-offset: 2px;
}

.avwa__btn--primary {
	width: 100%;
	color: #fff;
	background: var(--avwa-accent);
}

.avwa__btn--primary:hover {
	background: color-mix(in srgb, var(--avwa-accent) 82%, #000);
	color: #fff;
}

.avwa__btn--copy {
	flex: 0 0 auto;
	color: #fff;
	background: var(--avwa-accent);
}

.avwa__btn--copy:hover {
	background: color-mix(in srgb, var(--avwa-accent) 82%, #000);
	color: #fff;
}

.avwa__btn--copy.is-done {
	background: #1a7f37;
}

/* Contorno simple: mismo radio base que el resto y sin negrita. */
.avwa .avwa__btn--ghost {
	flex: 0 1 auto;
	color: var(--avwa-accent);
	background-color: transparent;
	background-image: none;
	border: 1px solid var(--avwa-border-strong);
	border-radius: var(--avwa-radius);
	padding: 11px 18px;
	font-size: 0.9em;
	font-weight: 400;
}

.avwa .avwa__btn--ghost:hover {
	border-color: var(--avwa-accent);
	background-color: color-mix(in srgb, var(--avwa-accent) 8%, transparent);
	color: var(--avwa-accent);
}

/* ------------------------------------------------------------------ *
 * Resultado
 * ------------------------------------------------------------------ */

/**
 * Bloque de resultado: texto y botones a la izquierda, QR a la derecha
 * con ancho automático. Si el QR está oculto, la columna colapsa sola.
 */
.avwa__result {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px 28px;
	align-items: start;
	padding: 22px;
	border: 1px solid var(--avwa-border);
	border-radius: calc(var(--avwa-radius) + 4px);
	background: var(--avwa-surface);
}

.avwa__result[hidden] {
	display: none;
}

.avwa__result-main {
	min-width: 0;
}

.avwa__result-label {
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--avwa-accent);
}

.avwa__link-row {
	display: flex;
	gap: 8px;
}

.avwa__link {
	font-size: 0.88em;
	text-overflow: ellipsis;
	color: inherit;
}

.avwa__actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.avwa__qr {
	display: none;
	line-height: 0;
}

.avwa__qr.is-visible {
	display: block;
}

.avwa__qr canvas {
	display: block;
	width: 132px;
	height: 132px;
	max-width: 100%;
	border-radius: 8px;
	border: 1px solid var(--avwa-border);
	background: #fff;
	image-rendering: pixelated;
}

.avwa__cta {
	display: block;
	grid-column: 1 / -1;
	padding: 14px 20px;
	font-family: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--avwa-heading);
	border-radius: var(--avwa-radius);
	transition: opacity 0.18s ease;
}

@media (max-width: 620px) {
	.avwa__result {
		grid-template-columns: minmax(0, 1fr);
	}

	.avwa__qr.is-visible {
		display: flex;
		justify-content: center;
	}

	.avwa__link-row,
	.avwa__actions {
		flex-direction: column;
	}
}

.avwa__cta:hover {
	opacity: 0.88;
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Mockup del teléfono (100% CSS + SVG inline, sin imágenes)
 * ------------------------------------------------------------------ */

.avwa__phone-mockup {
	position: relative;
	width: 100%;
	max-width: 290px;
	padding: 12px;
	border-radius: 34px;
	background: #1f2c34;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 24px rgba(16, 24, 40, 0.1),
		0 32px 64px rgba(16, 24, 40, 0.14);
}

.avwa__mockup-notch {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 74px;
	height: 5px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.22);
	z-index: 2;
}

.avwa__mockup-screen {
	display: flex;
	flex-direction: column;
	min-height: 430px;
	border-radius: 24px;
	overflow: hidden;
	background-color: #e5ddd5;
	/* Textura del chat, generada con gradientes en vez de un PNG. */
	background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px),
		radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.035) 0 3px, transparent 3px),
		radial-gradient(circle at 45% 85%, rgba(255, 255, 255, 0.4) 0 2px, transparent 2px);
	background-size: 46px 46px, 62px 62px, 54px 54px;
}

.avwa__mockup-topbar {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 30px 12px 11px;
	color: #fff;
	background: #075e54;
}

.avwa__mockup-avatar {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
}

.avwa__mockup-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.avwa__mockup-who strong {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avwa__mockup-who span {
	font-size: 10.5px;
	opacity: 0.75;
}

.avwa__mockup-body {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	padding: 16px 12px;
}

.avwa__bubble {
	position: relative;
	max-width: 88%;
	margin-left: auto;
	padding: 8px 10px 6px;
	font-size: 13.5px;
	line-height: 1.42;
	color: #111b21;
	background: #d9fdd3;
	border-radius: 9px 0 9px 9px;
	box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
}

/**
 * `pre-wrap` va solo en el texto del usuario, nunca en el contenedor:
 * si está en el contenedor, los saltos de línea y la indentación del
 * propio HTML se renderizan como líneas reales y el globo crece de más.
 */
.avwa__bubble-text {
	display: block;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.avwa__bubble-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 2px;
	font-size: 10.5px;
	color: rgba(17, 27, 33, 0.5);
	white-space: nowrap;
}

.avwa__mockup-input {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px 14px;
	background: transparent;
}

.avwa__mockup-input > span {
	flex: 1 1 auto;
	padding: 9px 14px;
	font-size: 12.5px;
	color: #8696a0;
	background: #fff;
	border-radius: 20px;
}

.avwa__mockup-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
	color: #fff;
	background: #00a884;
}

/* ------------------------------------------------------------------ *
 * FAQ
 * ------------------------------------------------------------------ */

.avwa__faq {
	margin-top: 56px;
}

/* Se deja sin font-size/family: hereda los estilos de H2 del theme. */
.avwa__faq-title {
	margin-top: 0;
	margin-bottom: 18px;
}

.avwa__faq-item {
	border-bottom: 1px solid var(--avwa-border);
}

.avwa__faq-q {
	position: relative;
	display: block;
	padding: 16px 34px 16px 0;
	font-family: inherit;
	font-weight: 600;
	color: var(--avwa-heading);
	cursor: pointer;
	list-style: none;
}

.avwa__faq-q::-webkit-details-marker {
	display: none;
}

.avwa__faq-q::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.5;
	transition: transform 0.2s ease;
}

.avwa__faq-item[open] .avwa__faq-q::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.avwa__faq-a {
	padding: 0 0 18px;
	color: var(--avwa-muted);
}

.avwa__faq-a p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.avwa * {
		transition: none !important;
	}
}