/* Widget flotante de WhatsApp. Verde de WhatsApp en el botón y la cabecera; el resto, con los colores de la marca. */
:root {
	--wa-green: #25d366;
	--wa-green-hover: #1ebe5a;
	--wa-green-dark: #128c7e;
}

.wa-widget { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }

.wa-widget__toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background-color: var(--wa-green); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); cursor: pointer; transition: background-color .2s, transform .2s; }
.wa-widget__toggle:hover, .wa-widget__toggle:focus-visible { background-color: var(--wa-green-hover); transform: scale(1.05); }
.wa-widget__toggle:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }

.wa-widget__icon { width: 30px; height: 30px; display: block; }
.wa-widget__icon--close, .wa-widget.is-open .wa-widget__icon--open { display: none; }
.wa-widget.is-open .wa-widget__icon--close { display: block; width: 24px; height: 24px; }

/* Panel */
.wa-widget__panel { width: 320px; max-width: calc(100vw - 48px); overflow: hidden; border-radius: 16px; background-color: #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, .25); }
.wa-widget__panel[hidden] { display: none; }

.wa-widget__header { padding: var(--space-5); background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark)); color: #fff; }
.wa-widget__title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: #fff; }
.wa-widget__subtitle { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: #fff; }

.wa-widget__agents { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3); list-style: none; }
.wa-widget__agent { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid #ebe6dc; border-radius: 12px; color: var(--c-secondary); text-decoration: none; transition: background-color .2s, border-color .2s; }
.wa-widget__agent:hover, .wa-widget__agent:focus-visible { background-color: #faf7f2; border-color: var(--wa-green); color: var(--c-secondary); text-decoration: none; }
.wa-widget__chevron { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--c-muted); }

.wa-widget__avatar { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background-color: rgba(251, 180, 0, .22); font-family: var(--font-heading); font-weight: 700; color: var(--c-secondary); }
/* Punto verde de "en línea" */
.wa-widget__avatar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background-color: var(--wa-green); }

.wa-widget__info { display: flex; flex-direction: column; min-width: 0; }
.wa-widget__name { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.wa-widget__role { font-size: var(--fs-xs); line-height: 1.4; color: var(--c-muted); }

.wa-widget__footer { margin: 0; padding: var(--space-3); border-top: 1px solid #ebe6dc; background-color: #faf7f2; font-size: var(--fs-xs); text-align: center; color: var(--c-muted); }

@media (max-width: 480px) { .wa-widget { right: var(--space-4); bottom: var(--space-4); } }

/* Pulso: un aro verde que se expande y se desvanece, y el botón late suavemente */
.wa-widget__toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background-color: var(--wa-green); animation: wa-pulse-ring 2s ease-out infinite; }
.wa-widget__toggle { animation: wa-pulse-beat 2s ease-in-out infinite; }

/* Con el panel abierto el botón se queda quieto */
.wa-widget.is-open .wa-widget__toggle, .wa-widget.is-open .wa-widget__toggle::before { animation: none; }
.wa-widget.is-open .wa-widget__toggle::before { display: none; }

@keyframes wa-pulse-ring { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes wa-pulse-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) { .wa-widget__toggle, .wa-widget__toggle::before { animation: none; } }