/* ====================================================================
   Asistente Gemini WP — Frontend widget (v2.7)
   Botón flotante + panel conversacional + acciones visibles.

   BLINDAJE CONTRA EL TEMA (A1): el widget vive dentro del DOM del sitio y
   los temas (tipografías script, botones amarillos, etc.) pisaban sus
   estilos. Todo lo crítico va con especificidad #agwp-root + !important:
   el widget se ve SIEMPRE igual, sin importar el tema.
   ==================================================================== */
#agwp-root {
	--agwp-primary: #0d1b7a;
	--agwp-secondary: #0fb8b8;
	--agwp-bg: #0d0f14;
	--agwp-text: #e8eaf0;
	--agwp-muted: #8a93a5;
	--agwp-line: rgba(255,255,255,.08);
	--agwp-bubble-user: rgba(15,184,184,.14);
	--agwp-bubble-assistant: rgba(255,255,255,.05);
	--agwp-btn-color: #25D366;
	--agwp-btn-size: 68px;
	--agwp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
	font-family: var(--agwp-font) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--agwp-text);
}

/* Tema CLARO del panel (elegible en el admin). */
#agwp-root.agwp-theme-claro {
	--agwp-bg: #ffffff;
	--agwp-text: #1c2430;
	--agwp-muted: #5c6774;
	--agwp-line: rgba(10,20,40,.10);
	--agwp-bubble-user: rgba(15,184,184,.12);
	--agwp-bubble-assistant: rgba(10,20,40,.05);
}

/* Modo tipografía "sitio": hereda a propósito la fuente del tema. */
#agwp-root.agwp-font-sitio { --agwp-font: inherit; }

/* Reset duro de lo que los temas suelen pisar (A1): tipografía, cajas,
   sombras de texto y decoraciones en TODO el árbol del widget. */
#agwp-root *,
#agwp-root *::before,
#agwp-root *::after { box-sizing: border-box; }
#agwp-root h2, #agwp-root h3, #agwp-root p, #agwp-root span, #agwp-root div,
#agwp-root button, #agwp-root .agwp-btn, #agwp-root .agwp-badge,
#agwp-root .agwp-brand-name, #agwp-root .agwp-brand-sub, #agwp-root .agwp-chip {
	font-family: var(--agwp-font) !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	text-transform: none !important;
}
#agwp-root h2, #agwp-root h3, #agwp-root p { margin: 0; padding: 0; }
#agwp-root button {
	-webkit-appearance: none !important;
	appearance: none !important;
	text-decoration: none !important;
	box-shadow: none;
	outline: none;
	touch-action: manipulation; /* E1: sin el retardo táctil de 300 ms */
}
#agwp-root .material-symbols-rounded {
	font-family: 'Material Symbols Rounded' !important;
	font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
	line-height: 1 !important;
}

/* ---- Botón flotante (FAB) tipo WhatsApp (A4): verde vibrante por
   defecto, tamaño y color editables desde el panel ---- */
#agwp-fab {
	position: fixed; z-index: 2147483000;
	bottom: var(--agwp-off-y, 22px); right: var(--agwp-off-x, 22px);
	width: var(--agwp-btn-size, 68px); height: var(--agwp-btn-size, 68px);
	min-width: 48px; min-height: 48px;
	border-radius: 50% !important; border: none !important; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	padding: 0 !important; margin: 0 !important;
	background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--agwp-btn-color) 78%, #ffffff), var(--agwp-btn-color) 74%) !important;
	color: #fff !important;
	box-shadow: 0 14px 36px color-mix(in srgb, var(--agwp-btn-color) 45%, transparent), inset 0 1px 2px rgba(255,255,255,.35) !important;
	transition: transform .18s ease, box-shadow .18s ease;
}
/* Respaldo para navegadores sin color-mix. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	#agwp-fab { background: var(--agwp-btn-color) !important; box-shadow: 0 14px 36px rgba(0,0,0,.35) !important; }
}
.agwp-pos-bottom-left #agwp-fab { right: auto; left: var(--agwp-off-x, 22px); }
#agwp-fab:hover { transform: translateY(-2px) scale(1.05); }
#agwp-fab .material-symbols-rounded { font-size: calc(var(--agwp-btn-size, 68px) * .44); color: #fff !important; }
#agwp-fab .agwp-fab-emoji { font-size: calc(var(--agwp-btn-size, 68px) * .48); line-height: 1; }
#agwp-root.agwp-open #agwp-fab { transform: scale(.9); opacity: .85; }

/* Onda expansiva permanente (todas las animaciones la llevan, menos "ninguna"). */
.agwp-fab-pulse {
	position: absolute; inset: 0; border-radius: 50%;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--agwp-btn-color) 55%, transparent);
	animation: agwpPulse 2s infinite;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.agwp-fab-pulse { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
}
@keyframes agwpPulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agwp-btn-color) 55%, transparent); }
	70% { box-shadow: 0 0 0 18px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Animaciones del botón (A4): saludo (balanceo tipo "mano"), pulso
   (latido marcado), rebote y ninguna. Elegibles desde el panel. */
.agwp-anim-saludo #agwp-fab #agwp-fab-icon { animation: agwpWave 2.6s ease-in-out infinite; transform-origin: 70% 80%; display: inline-block; }
@keyframes agwpWave {
	0%, 55%, 100% { transform: rotate(0deg); }
	60% { transform: rotate(-14deg); }
	68% { transform: rotate(12deg); }
	76% { transform: rotate(-10deg); }
	84% { transform: rotate(8deg); }
	92% { transform: rotate(0deg); }
}
.agwp-anim-pulso #agwp-fab { animation: agwpBeat 1.6s ease-in-out infinite; }
@keyframes agwpBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.09); } 24% { transform: scale(1); } 36% { transform: scale(1.07); } 48% { transform: scale(1); } }
.agwp-anim-rebote #agwp-fab { animation: agwpBounce 2.4s cubic-bezier(.28,.84,.42,1) infinite; }
@keyframes agwpBounce { 0%, 40%, 100% { transform: translateY(0); } 12% { transform: translateY(-12px); } 24% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
.agwp-anim-ninguna #agwp-fab #agwp-fab-icon { animation: none; }
.agwp-anim-ninguna .agwp-fab-pulse { animation: none; box-shadow: none; }
/* Al abrir el panel el botón se calma (nada rebotando de fondo). */
#agwp-root.agwp-open #agwp-fab, #agwp-root.agwp-open #agwp-fab #agwp-fab-icon { animation: none; }

/* ---- Estado "en vivo" del botón flotante (visible aun minimizado) ---- */
#agwp-fab.agwp-live { box-shadow: 0 0 0 3px rgba(74,222,128,.55), 0 14px 36px rgba(0,0,0,.35) !important; }
#agwp-fab.agwp-live::before {
	content: ''; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px;
	border-radius: 50%; background: #4ade80; border: 2px solid #fff;
	box-shadow: 0 0 10px rgba(74,222,128,.9); animation: agwpLiveDot 1.4s ease infinite;
}
@keyframes agwpLiveDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }
#agwp-fab.agwp-live .agwp-fab-pulse { animation: agwpLivePulse 1.6s infinite; }
@keyframes agwpLivePulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow: 0 0 0 14px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
#agwp-fab.agwp-speaking { animation: agwpSpeak 1.1s ease infinite; }

/* ---- Panel (A3): moderno, limpio y consistente en cualquier tema ---- */
#agwp-panel {
	position: fixed; z-index: 2147483001; right: 22px; bottom: calc(var(--agwp-off-y, 22px) + var(--agwp-btn-size, 68px) + 14px);
	width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 130px));
	background: var(--agwp-bg) !important; color: var(--agwp-text) !important;
	border-radius: 20px; border: 1px solid var(--agwp-line);
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
	display: flex; flex-direction: column; overflow: hidden;
	opacity: 0; transform: translateY(20px) scale(.98); pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
	text-align: left;
}
.agwp-pos-bottom-left #agwp-panel { right: auto; left: 22px; }
#agwp-root.agwp-open #agwp-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.agwp-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--agwp-line); background: transparent !important; }
.agwp-brand { display: flex; align-items: center; gap: 10px; }
.agwp-orb-mini { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--agwp-secondary), var(--agwp-primary)); box-shadow: 0 0 14px rgba(15,184,184,.4); animation: agwpOrbGlow 3s ease-in-out infinite; }
@keyframes agwpOrbGlow { 0%,100% { box-shadow: 0 0 10px rgba(15,184,184,.35); } 50% { box-shadow: 0 0 18px rgba(15,184,184,.65); } }
#agwp-root .agwp-brand-name { font-weight: 700 !important; font-size: 15px !important; color: var(--agwp-text) !important; }
#agwp-root .agwp-brand-sub { font-size: 10px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--agwp-muted) !important; }
.agwp-head-actions { display: flex; gap: 6px; }

/* Botones de icono NEUTROS (A3): nada de amarillos del tema. */
#agwp-root .agwp-icon-btn {
	background: rgba(127,127,127,.10) !important;
	border: 1px solid var(--agwp-line) !important;
	color: var(--agwp-muted) !important;
	width: 34px; height: 34px; min-width: 34px;
	border-radius: 10px !important;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: .15s;
	padding: 0 !important; margin: 0 !important;
	line-height: 1 !important;
}
#agwp-root .agwp-icon-btn:hover { color: var(--agwp-text) !important; background: rgba(127,127,127,.22) !important; }
#agwp-root .agwp-icon-btn .material-symbols-rounded { font-size: 18px; }

/* ---- Semáforo ÚNICO de conexión (A5): verde/ámbar/rojo ---- */
.agwp-status { display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--agwp-line); flex-wrap: wrap; align-items: center; }
#agwp-root .agwp-badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
	border-radius: 99px !important; font-size: 10px !important; letter-spacing: .05em !important;
	text-transform: uppercase !important; border: 1px solid var(--agwp-line) !important;
	color: var(--agwp-muted) !important; background: rgba(127,127,127,.05) !important;
	font-weight: 600 !important;
}
.agwp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--agwp-muted); flex: none; }
/* El semáforo principal es más notorio. */
#agwp-root .agwp-badge-main { font-size: 11px !important; padding: 5px 12px; }
#agwp-root .agwp-badge-main .agwp-dot { width: 10px; height: 10px; }
#agwp-root .agwp-badge.ok { color: #22c55e !important; border-color: rgba(34,197,94,.35) !important; background: rgba(34,197,94,.08) !important; }
#agwp-root .agwp-badge.ok .agwp-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.8); }
#agwp-root .agwp-badge.err { color: #f87171 !important; border-color: rgba(248,113,113,.35) !important; background: rgba(248,113,113,.08) !important; }
#agwp-root .agwp-badge.err .agwp-dot { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,.7); }
#agwp-root .agwp-badge.warn { color: #fbbf24 !important; border-color: rgba(251,191,36,.35) !important; background: rgba(251,191,36,.08) !important; }
#agwp-root .agwp-badge.warn .agwp-dot { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.7); animation: agwpLiveDot 1.2s ease infinite; }

.agwp-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px; }
.agwp-hidden { display: none !important; }

/* ---- Pantalla de inicio (A3): orbe decorativo propio, nada heredado ---- */
.agwp-welcome { text-align: center; margin: auto 0 16px; }
.agwp-welcome-orb {
	display: block; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--agwp-secondary), var(--agwp-primary) 85%);
	box-shadow: 0 0 30px rgba(15,184,184,.35);
	animation: agwpOrbGlow 3s ease-in-out infinite;
}
#agwp-root .agwp-welcome h2 {
	font-size: 22px !important; font-weight: 700 !important;
	margin: 0 0 8px !important; color: var(--agwp-text) !important;
	font-family: var(--agwp-font) !important;
}
#agwp-root .agwp-welcome p { color: var(--agwp-muted) !important; font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; }
.agwp-hint { font-size: 11px; color: var(--agwp-muted); text-align: center; margin-top: 10px; min-height: 14px; }

/* ---- Sugerencias rápidas (C3): chips configurables desde el panel ---- */
.agwp-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 12px; }
#agwp-root .agwp-chip {
	background: rgba(15,184,184,.10) !important;
	border: 1px solid rgba(15,184,184,.35) !important;
	color: var(--agwp-text) !important;
	font-size: 12.5px !important; font-weight: 600 !important;
	padding: 9px 14px !important; min-height: 38px;
	border-radius: 99px !important; cursor: pointer; transition: .15s;
	line-height: 1.2 !important;
}
#agwp-root .agwp-chip:hover { background: rgba(15,184,184,.22) !important; transform: translateY(-1px); }

/* ---- Botones (blindados contra el tema) ---- */
#agwp-root .agwp-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 13px 18px; min-height: 46px;
	border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important;
	cursor: pointer; border: none !important; margin: 8px 0 0 !important; transition: .15s;
	font-family: var(--agwp-font) !important; line-height: 1.2 !important;
}
#agwp-root .agwp-btn .material-symbols-rounded { font-size: 18px; }
#agwp-root .agwp-btn-primary { background: linear-gradient(135deg, var(--agwp-primary), var(--agwp-secondary)) !important; color: #fff !important; }
#agwp-root .agwp-btn-primary:hover { filter: brightness(1.08); }
#agwp-root .agwp-btn-ghost { background: rgba(127,127,127,.08) !important; color: var(--agwp-text) !important; border: 1px solid var(--agwp-line) !important; }
#agwp-root .agwp-btn-ghost:hover { background: rgba(127,127,127,.16) !important; }

/* ---- Conversación (A3): burbujas con mejor contraste ---- */
.agwp-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding-right: 4px; }
.agwp-log::-webkit-scrollbar { width: 5px; } .agwp-log::-webkit-scrollbar-thumb { background: rgba(127,127,127,.25); border-radius: 3px; }
#agwp-root .agwp-msg {
	max-width: 88%; padding: 10px 13px; border-radius: 14px;
	font-size: 13.5px !important; line-height: 1.5 !important;
	animation: agwpFade .2s ease; color: var(--agwp-text) !important;
	font-family: var(--agwp-font) !important;
}
@keyframes agwpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
#agwp-root .agwp-msg.user { align-self: flex-end; background: var(--agwp-bubble-user) !important; border: 1px solid rgba(15,184,184,.25); border-bottom-right-radius: 4px; }
#agwp-root .agwp-msg.assistant { align-self: flex-start; background: var(--agwp-bubble-assistant) !important; border: 1px solid var(--agwp-line); border-bottom-left-radius: 4px; }
#agwp-root .agwp-msg.sys { align-self: center; font-size: 10.5px !important; color: var(--agwp-muted) !important; background: none !important; border: 1px dashed var(--agwp-line); border-radius: 99px; padding: 3px 10px; }
.agwp-caption { text-align: center; color: var(--agwp-muted); font-size: 13px; min-height: 18px; margin: 8px 0; font-style: italic; }

.agwp-orb-wrap { position: relative; width: 84px; height: 84px; margin: 6px auto; }
.agwp-orb { width: 76px; height: 76px; min-width: 44px; min-height: 44px; border-radius: 50% !important; border: none !important; cursor: pointer; position: absolute; inset: 4px; background: radial-gradient(circle at 38% 32%, rgba(127,168,212,.7), rgba(20,28,42,.2)) !important; box-shadow: 0 8px 32px rgba(127,168,212,.18); transition: .3s; padding: 0 !important; }
.agwp-orb.listening { background: radial-gradient(circle at 38% 32%, var(--agwp-secondary), rgba(30,50,80,.3)) !important; box-shadow: 0 0 40px rgba(15,184,184,.5); }
.agwp-orb.speaking { background: radial-gradient(circle at 38% 32%, #e9cf92, #d4b87a 60%) !important; box-shadow: 0 0 50px rgba(212,184,122,.5); animation: agwpSpeak 1.2s ease infinite; }
@keyframes agwpSpeak { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.agwp-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent; }
.agwp-orb-wrap.listening .agwp-ring { border-color: rgba(15,184,184,.3); animation: agwpRing 1.6s ease infinite; }
@keyframes agwpRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }

.agwp-controls { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
#agwp-root .agwp-ctrl {
	width: 46px; height: 46px; min-width: 44px; min-height: 44px;
	border-radius: 14px !important;
	background: rgba(127,127,127,.08) !important; color: var(--agwp-muted) !important;
	border: 1px solid var(--agwp-line) !important;
	display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s;
	padding: 0 !important;
}
#agwp-root .agwp-ctrl:hover { color: var(--agwp-text) !important; background: rgba(127,127,127,.18) !important; }
#agwp-root .agwp-ctrl.on { color: var(--agwp-secondary) !important; border-color: rgba(15,184,184,.4) !important; background: rgba(15,184,184,.12) !important; }
#agwp-root .agwp-ctrl-danger { color: #f87171 !important; }
#agwp-root .agwp-ctrl-danger:hover { background: rgba(248,113,113,.12) !important; }
#agwp-root .agwp-ctrl .material-symbols-rounded { font-size: 20px; }

/* ---- Modal de confirmación ---- */
.agwp-confirm { position: fixed; inset: 0; z-index: 2147483002; background: rgba(3,4,7,.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; }
.agwp-confirm.open { display: flex; animation: agwpFade .2s; }
.agwp-confirm-box { background: var(--agwp-bg) !important; border: 1px solid var(--agwp-line); border-radius: 20px; padding: 24px; max-width: 360px; width: 100%; text-align: center; color: var(--agwp-text) !important; }
.agwp-confirm-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: rgba(15,184,184,.15); display: flex; align-items: center; justify-content: center; color: var(--agwp-secondary); }
.agwp-confirm-icon .material-symbols-rounded { font-size: 30px; }
#agwp-root .agwp-confirm-box h3 { margin: 0 0 8px !important; color: var(--agwp-text) !important; font-size: 17px !important; }
#agwp-root .agwp-confirm-box p { color: var(--agwp-muted) !important; font-size: 14px !important; margin: 0 0 18px !important; line-height: 1.5 !important; }
.agwp-confirm-actions { display: flex; gap: 10px; }
#agwp-root .agwp-confirm-actions .agwp-btn { margin-top: 0 !important; }

/* Valoración de NINA: decisión grande, táctil y voluntaria. */
#agwp-root .agwp-rating-box { max-width: 420px; }
#agwp-root .agwp-stars {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	margin: 2px 0 18px !important;
}
#agwp-root .agwp-star {
	width: 48px !important;
	height: 48px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border: 1px solid var(--agwp-line) !important;
	border-radius: 14px !important;
	background: rgba(127,127,127,.08) !important;
	color: rgba(148,163,184,.72) !important;
	cursor: pointer !important;
	transition: transform .16s ease, color .16s ease, background .16s ease !important;
}
#agwp-root .agwp-star:hover,
#agwp-root .agwp-star.is-on {
	color: #f5b301 !important;
	background: rgba(245,179,1,.14) !important;
	border-color: rgba(245,179,1,.55) !important;
	transform: translateY(-2px) !important;
}
#agwp-root .agwp-star .material-symbols-rounded { font-size: 30px !important; }
#agwp-root .agwp-rating-label {
	display: block !important;
	margin: 0 0 7px !important;
	color: var(--agwp-text) !important;
	font: 650 13px/1.3 var(--agwp-font, system-ui, sans-serif) !important;
	text-align: left !important;
}
#agwp-root .agwp-rating-comment {
	width: 100% !important;
	min-height: 92px !important;
	margin: 0 0 16px !important;
	padding: 12px 13px !important;
	resize: vertical !important;
	border: 1px solid var(--agwp-line) !important;
	border-radius: 13px !important;
	background: rgba(127,127,127,.06) !important;
	color: var(--agwp-text) !important;
	font: 400 14px/1.45 var(--agwp-font, system-ui, sans-serif) !important;
	box-sizing: border-box !important;
}
#agwp-root .agwp-rating-comment:focus {
	outline: 2px solid var(--agwp-accent) !important;
	outline-offset: 2px !important;
}
@media (max-width: 420px) {
	#agwp-root .agwp-rating-box { padding: 20px 16px !important; }
	#agwp-root .agwp-stars { gap: 4px !important; }
	#agwp-root .agwp-star { width: 43px !important; height: 43px !important; }
}

/* ---- Toast ---- */
.agwp-toast { position: fixed; z-index: 2147483003; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(10px); background: #1f2330; color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 13px; box-shadow: 0 12px 30px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw; text-align: center; }
.agwp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.agwp-toast.err { background: #c1191f; }
.agwp-toast.ok { background: #0a8754; }

/* ---- Acción visible: foco de marca donde NINA actúa ---- */
.agwp-flash-target {
	outline: 3px solid #12bfa0 !important;
	outline-offset: 3px !important;
	border-radius: 10px !important;
	position: relative;
	z-index: 2147482000 !important;
	box-shadow: 0 0 0 6px rgba(18,191,160,.25), 0 0 28px 6px rgba(20,30,156,.38) !important;
	animation: agwpFlash .7s ease infinite !important;
}
@keyframes agwpFlash {
	0%, 100% { outline-color: #12bfa0; box-shadow: 0 0 0 6px rgba(18,191,160,.25), 0 0 28px 6px rgba(20,30,156,.38); }
	50% { outline-color: #79f7e3; box-shadow: 0 0 0 11px rgba(18,191,160,.10), 0 0 36px 10px rgba(20,30,156,.48); }
}

/* ---- v2.4: resaltado por OVERLAY — se ve SIEMPRE, también dentro de
   shadow DOM, iframes del mismo dominio y apps React que re-pintan el
   elemento (el anillo vive en la ventana principal y sigue al elemento) ---- */
.agwp-hl-ring {
	position: fixed; z-index: 2147482990; pointer-events: none;
	border: 3px solid #12bfa0; border-radius: 12px;
	box-shadow:
		0 0 0 6px rgba(18,191,160,.22),
		0 0 30px 7px rgba(20,30,156,.38),
		0 0 0 9999px rgba(11,20,112,.09),
		inset 0 0 18px rgba(121,247,227,.24);
	animation: agwpRingFlash .7s ease infinite;
}
@keyframes agwpRingFlash {
	0%, 100% {
		border-color: #12bfa0;
		box-shadow: 0 0 0 6px rgba(18,191,160,.22), 0 0 30px 7px rgba(20,30,156,.38), 0 0 0 9999px rgba(11,20,112,.09), inset 0 0 18px rgba(121,247,227,.24);
	}
	50% {
		border-color: #79f7e3;
		box-shadow: 0 0 0 10px rgba(18,191,160,.10), 0 0 38px 11px rgba(20,30,156,.48), 0 0 0 9999px rgba(11,20,112,.12), inset 0 0 24px rgba(121,247,227,.32);
	}
}
/* Etiqueta que explica qué evidencia está señalando NINA. */
.agwp-hl-pointer {
	position: fixed; z-index: 2147482992; pointer-events: none;
	transform: translateX(-50%);
	width: max-content;
	max-width: min(340px, calc(100vw - 24px));
	padding: 8px 12px;
	border: 1px solid rgba(121,247,227,.65);
	border-radius: 999px;
	background: linear-gradient(135deg, #141e9c, #0e7c67);
	color: #fff;
	font: 750 12px/1.25 var(--agwp-font) !important;
	text-align: center;
	white-space: normal;
	box-shadow: 0 8px 26px rgba(11,20,112,.34);
	animation: agwpPointerNudge .8s ease-in-out infinite;
}
.agwp-hl-pointer::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 12px;
	height: 12px;
	background: #141e9c;
	border-left: 1px solid rgba(121,247,227,.65);
	border-top: 1px solid rgba(121,247,227,.65);
	transform: translateX(-50%) rotate(45deg);
}
.agwp-hl-pointer.is-above::before {
	top: auto;
	bottom: -7px;
	border: 0;
	border-right: 1px solid rgba(121,247,227,.65);
	border-bottom: 1px solid rgba(121,247,227,.65);
	background: #0e7c67;
}
@keyframes agwpPointerNudge {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(-4px); }
}
/* Punto expansivo en el sitio EXACTO del clic de Ana. */
.agwp-click-dot {
	position: fixed; z-index: 2147482991; pointer-events: none;
	width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
	background: rgba(121,247,227,.98);
	box-shadow: 0 0 0 4px rgba(18,191,160,.42), 0 0 20px 5px rgba(20,30,156,.52);
	animation: agwpClickDot .8s ease forwards;
}
@keyframes agwpClickDot {
	0% { transform: scale(.55); opacity: 1; }
	100% { transform: scale(3.4); opacity: 0; }
}

/* ---- Responsive: bottom sheet en móvil ---- */
@media (max-width: 600px) {
	#agwp-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 86vh; height: 86dvh; border-radius: 20px 20px 0 0; }
	.agwp-pos-bottom-left #agwp-panel { left: 0; }
	/* v9.1: legibilidad real en móvil — la transcripción se leía muy pequeña. */
	#agwp-root .agwp-msg { font-size: 15.5px !important; line-height: 1.55 !important; max-width: 92%; }
	#agwp-root .agwp-msg.sys { font-size: 12px !important; }
	.agwp-caption { font-size: 14.5px; min-height: 20px; }
	#agwp-root .agwp-welcome p { font-size: 15px !important; }
	.agwp-hint { font-size: 12.5px; }
	#agwp-root .agwp-badge { font-size: 11px !important; }
}

/* ---- Accesibilidad ---- */
#agwp-root button:focus-visible { outline: 2px solid var(--agwp-secondary) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.agwp-fab-pulse, .agwp-orb.speaking, .agwp-orb-wrap.listening .agwp-ring,
	.agwp-anim-saludo #agwp-fab #agwp-fab-icon, .agwp-anim-pulso #agwp-fab, .agwp-anim-rebote #agwp-fab,
	.agwp-flash-target, .agwp-hl-ring, .agwp-hl-pointer, .agwp-click-dot { animation: none !important; }
}

/* ---- Globito "Habla con {nombre}" (editable; tamaño normal/grande) ---- */
.agwp-fab-label {
	position: fixed; z-index: 2147482999;
	bottom: calc(var(--agwp-off-y, 22px) + (var(--agwp-btn-size, 68px) - 34px) / 2);
	right: calc(var(--agwp-off-x, 22px) + var(--agwp-btn-size, 68px) + 10px);
	background: var(--agwp-btn-color, #25D366); color: #fff;
	font: 600 13px/1 var(--agwp-font) !important;
	padding: 10px 15px; border-radius: 18px 18px 4px 18px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
	white-space: nowrap; pointer-events: none;
	animation: agwpLabelIn .5s ease both; animation-delay: 1.2s;
}
.agwp-label-grande .agwp-fab-label { font-size: 15px !important; padding: 12px 18px; }
.agwp-pos-bottom-left .agwp-fab-label { right: auto; left: calc(var(--agwp-off-x, 22px) + var(--agwp-btn-size, 68px) + 10px); border-radius: 18px 18px 18px 4px; }
#agwp-root.agwp-open .agwp-fab-label { display: none; }
@keyframes agwpLabelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
	.agwp-fab-label { font-size: 12px !important; padding: 8px 12px; }
	.agwp-label-grande .agwp-fab-label { font-size: 13px !important; padding: 10px 14px; }
}

/* ==========================================================================
   v9.6 — PIEL DE ACENTO: el panel se acopla a la estética del sitio.
   --agwp-accent llega del ajuste manual (panel_accent) o lo detecta el widget
   automáticamente del color protagonista del tema (botones/enlaces reales).
   Reglas al FINAL del archivo: ganan la cascada sobre la piel base.
   ========================================================================== */
#agwp-root { --agwp-accent: var(--agwp-secondary, #0fb8b8); }

/* Panel: más redondeado, sombra más suave y una línea de acento arriba. */
#agwp-panel {
	border-radius: 22px !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .38), 0 2px 10px rgba(0, 0, 0, .18) !important;
	border-top: 3px solid var(--agwp-accent) !important;
	overflow: hidden;
}

/* Cabecera con un velo sutil del acento. */
#agwp-root .agwp-panel-head {
	background: linear-gradient(135deg, color-mix(in srgb, var(--agwp-accent) 16%, transparent), transparent 62%) !important;
}
#agwp-root .agwp-orb-mini,
#agwp-root .agwp-welcome-orb {
	background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--agwp-accent) 82%, #ffffff), var(--agwp-accent) 72%) !important;
	box-shadow: 0 6px 22px color-mix(in srgb, var(--agwp-accent) 45%, transparent) !important;
}

/* Botón principal y chips beben del acento. */
#agwp-root .agwp-btn-primary {
	background: linear-gradient(135deg, color-mix(in srgb, var(--agwp-accent) 78%, #10131c), var(--agwp-accent)) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--agwp-accent) 35%, transparent) !important;
}
#agwp-root .agwp-chip {
	border: 1px solid color-mix(in srgb, var(--agwp-accent) 45%, transparent) !important;
	border-radius: 999px !important;
}
#agwp-root .agwp-chip:hover {
	background: color-mix(in srgb, var(--agwp-accent) 22%, transparent) !important;
	border-color: var(--agwp-accent) !important;
}

/* Burbuja del cliente y detalles de estado con el acento. */
#agwp-root .agwp-msg.user {
	border: 1px solid color-mix(in srgb, var(--agwp-accent) 38%, transparent) !important;
}
#agwp-root .agwp-badge-main.ok .agwp-dot { background: var(--agwp-accent) !important; }

/* En móvil el panel va pegado al borde inferior: sin esquinas abajo. */
@media (max-width: 480px) {
	#agwp-panel { border-radius: 20px 20px 0 0 !important; }
}

/* ==========================================================================
   v10.2 — BARRA "TOCA PARA ESCUCHAR" + VITRINA DE PRODUCTOS
   ========================================================================== */

/* Barra de desbloqueo de voz: solo aparece cuando el navegador está impidiendo
   que suene el audio (página recién cargada sin ningún toque). Vive junto al
   botón flotante para que se vea incluso con el panel minimizado. */
#agwp-root .agwp-audio-unlock {
	position: fixed !important;
	right: var(--agwp-off-x) !important;
	bottom: calc(var(--agwp-off-y) + var(--agwp-btn-size) + 14px) !important;
	z-index: 2147483000 !important;
	display: none !important;
	align-items: center !important;
	gap: 8px !important;
	max-width: 240px !important;
	padding: 10px 14px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #111 !important;
	color: #fff !important;
	font: 600 14px/1.2 var(--agwp-font, system-ui, sans-serif) !important;
	cursor: pointer !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
	animation: agwp-unlock-pop 1.6s ease-in-out infinite !important;
	touch-action: manipulation !important;
}
#agwp-root .agwp-audio-unlock.show { display: inline-flex !important; }
#agwp-root .agwp-audio-unlock .material-symbols-rounded { font-size: 20px !important; }
#agwp-root.agwp-pos-bottom-left .agwp-audio-unlock {
	right: auto !important;
	left: var(--agwp-off-x) !important;
}
@keyframes agwp-unlock-pop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
/* Con el audio bloqueado el botón flotante lo insinúa (sin ser molesto). */
#agwp-root.agwp-audio-locked #agwp-fab { box-shadow: 0 0 0 4px rgba(255, 193, 7, .45) !important; }

/* Vitrina: tarjetas de producto DENTRO del chat. "Mostrar" es mostrar de
   verdad — el cliente ve foto y precio sin salir de la página donde está. */
#agwp-root .agwp-cards {
	display: none;
	gap: 10px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	padding: 4px 2px 8px !important;
	scrollbar-width: thin !important;
	-webkit-overflow-scrolling: touch !important;
}
#agwp-root .agwp-cards.show { display: flex !important; }
#agwp-root .agwp-card {
	flex: 0 0 auto !important;
	width: 148px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 8px !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid color-mix(in srgb, var(--agwp-accent) 30%, transparent) !important;
	text-align: left !important;
}
#agwp-root.agwp-theme-claro .agwp-card { background: rgba(0, 0, 0, .04) !important; }
#agwp-root .agwp-card-img {
	width: 100% !important;
	height: 104px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	background: rgba(127, 127, 127, .18) !important;
	display: block !important;
}
#agwp-root .agwp-card-name {
	font: 600 13px/1.25 var(--agwp-font, system-ui, sans-serif) !important;
	color: var(--agwp-text) !important;
	display: block !important;
	max-height: 34px !important;
	overflow: hidden !important;
}
#agwp-root .agwp-card-price {
	font: 700 14px/1.2 var(--agwp-font, system-ui, sans-serif) !important;
	color: var(--agwp-accent) !important;
}
#agwp-root .agwp-card-stock { font: 500 11px/1.2 var(--agwp-font, system-ui, sans-serif) !important; opacity: .75 !important; }
#agwp-root .agwp-card-actions { display: flex !important; gap: 6px !important; margin-top: auto !important; }
#agwp-root .agwp-card-btn {
	flex: 1 1 0 !important;
	min-height: 34px !important;
	padding: 6px 8px !important;
	border: 1px solid color-mix(in srgb, var(--agwp-accent) 45%, transparent) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--agwp-text) !important;
	font: 600 12px/1 var(--agwp-font, system-ui, sans-serif) !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
}
#agwp-root .agwp-card-btn.primary {
	background: var(--agwp-accent) !important;
	border-color: var(--agwp-accent) !important;
	color: #fff !important;
}

/* Respaldo para navegadores sin color-mix: acento plano. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	#agwp-root .agwp-card { border-color: var(--agwp-accent) !important; }
	#agwp-root .agwp-card-btn { border-color: var(--agwp-accent) !important; }
	#agwp-root .agwp-panel-head { background: transparent !important; }
	#agwp-root .agwp-orb-mini,
	#agwp-root .agwp-welcome-orb { background: var(--agwp-accent) !important; }
	#agwp-root .agwp-btn-primary { background: var(--agwp-accent) !important; box-shadow: none !important; }
	#agwp-root .agwp-chip { border-color: var(--agwp-accent) !important; }
	#agwp-root .agwp-chip:hover { background: rgba(0, 0, 0, .08) !important; }
	#agwp-root .agwp-msg.user { border-color: var(--agwp-accent) !important; }
}