/* ===========================================================
   Alacon WhatsApp Chat — estilos del widget frontend
   =========================================================== */

#awc-widget {
	position: fixed;
	bottom: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
#awc-widget *,
#awc-widget *::before,
#awc-widget *::after { box-sizing: border-box; }

/* Reset para que el tema del sitio no "pinte" los botones del widget */
#awc-widget button {
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	margin: 0;
	min-height: 0;
	min-width: 0;
	width: auto;
}

#awc-widget.awc-pos-left  { left: 20px; }
#awc-widget.awc-pos-right { right: 20px; }

/* ----------------- Botón flotante (solo el logo) ----------------- */
.awc-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--awc-color, #25D366);
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	line-height: 0;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.awc-toggle:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32); }

/* Icono de marca (tu logo) rellena el botón */
.awc-toggle-brand {
	background: transparent !important;
	border-radius: 16px;
	overflow: visible;
}
.awc-toggle-brand .awc-icon-brand {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
}

/* Icono personalizado (subido por el usuario) centrado sobre círculo de color */
.awc-toggle .awc-icon-img {
	width: 34px;
	height: 34px;
	display: block;
	object-fit: contain;
}

/* ----------------- Ventana del chat ----------------- */
.awc-chat {
	position: absolute;
	bottom: 78px;
	width: 340px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.98);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#awc-widget.awc-pos-left  .awc-chat { left: 0; transform-origin: bottom left; }
#awc-widget.awc-pos-right .awc-chat { right: 0; transform-origin: bottom right; }

#awc-widget.awc-open .awc-chat {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* Cabecera */
.awc-header {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--awc-color, #25D366);
	color: #fff;
	padding: 14px 16px;
}
.awc-avatar {
	width: 44px; height: 44px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.awc-header-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.awc-header-text strong { font-size: 15px; }
.awc-header-text span { font-size: 12px; opacity: 0.9; }

.awc-close {
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	box-shadow: none !important;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.85;
	flex-shrink: 0;
}
.awc-close:hover { opacity: 1; }

/* Cuerpo con burbujas */
.awc-body {
	padding: 18px 16px;
	background: #e5ddd5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='%23e5ddd5'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23d9cfc4'/%3E%3C/svg%3E");
	min-height: 90px;
	max-height: 220px;
	overflow-y: auto;
}
.awc-bubble {
	max-width: 85%;
	padding: 10px 13px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: #303030;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	word-wrap: break-word;
}
.awc-bubble-in { background: #fff; border-top-left-radius: 2px; }

/* Pie con inputs */
.awc-footer {
	padding: 12px;
	background: #f7f7f7;
	border-top: 1px solid #ececec;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.awc-input,
.awc-textarea {
	width: 100%;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 14px;
	outline: none;
	background: #fff;
	font-family: inherit;
	color: #303030;
}
.awc-textarea {
	resize: none;
	max-height: 96px;
	line-height: 1.4;
}
.awc-input:focus,
.awc-textarea:focus { border-color: var(--awc-color, #25D366); }

/* Botón ENVIAR */
.awc-send {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--awc-color, #25D366) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 24px;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
	transition: filter .15s ease, transform .1s ease;
}
.awc-send:hover { filter: brightness(0.93); }
.awc-send:active { transform: scale(0.98); }
.awc-send svg { width: 18px; height: 18px; display: block; }

/* ----------------- Móvil ----------------- */
@media (max-width: 480px) {
	#awc-widget { bottom: 16px; }
	#awc-widget.awc-pos-left  { left: 16px; }
	#awc-widget.awc-pos-right { right: 16px; }

	.awc-toggle { width: 56px; height: 56px; }
	.awc-toggle .awc-icon-img { width: 30px; height: 30px; }

	.awc-chat {
		width: calc(100vw - 32px);
		bottom: 72px;
	}
}