:root { --wa: var(--brand-gradient); --wa-dark: var(--brand-dark); --radius: 12px; --shadow: 0 4px 12px rgba(0,0,0,0.2); --muted: #666; }

/* ===== Botón flotante ===== */
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 50px; height: 50px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; box-shadow: var(--shadow); border: none; cursor: pointer; transition: background 0.2s; }
.wa-fab:hover { background: var(--wa-dark); }
.wa-fab img { width: 24px; height: 24px; }

/* ===== Widget ===== */
.wa-widget { position: fixed; right: 12px; bottom: 70px; z-index: 9999; width: 100%; max-width: 320px; max-height: 80vh; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); border: 1px solid #eee; opacity: 0; pointer-events: none; transform: translateY(10px) scale(0.95); display: flex; flex-direction: column; transition: 0.2s; }
.wa-widget.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

/* ===== Header y body del widget ===== */
.wa-header { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--wa); color: #fff; border-radius: var(--radius) var(--radius) 0 0; }
.wa-close { margin-left: auto; background: none; border: 0; font-size: 18px; color: #fff; cursor: pointer; }
.wa-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }

/* ===== Mensajes ===== */
.wa-bubble { background: #e7f9ef; color: #075e54; padding: 8px; border-radius: 10px; max-width: 85%; font-size: 13px; }
.wa-helper { font-size: 12px; color: var(--muted); }

/* ===== Formulario ===== */
.wa-form { display: grid; gap: 8px; }
.wa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wa-field { display: flex; flex-direction: column; gap: 4px; }
.wa-input, .wa-textarea { border: 1px solid #ddd; border-radius: 8px; padding: 6px; font-size: 13px; width: 100%; box-sizing: border-box; }
.wa-textarea { min-height: 70px; }

/* ===== Botones del formulario ===== */
.wa-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.wa-btn { border: none; border-radius: 8px; padding: 6px 10px; font-weight: 600; cursor: pointer; font-size: 13px; }
.wa-btn.primary { background: var(--wa); color: #fff; }
.wa-btn.primary:hover { background: var(--wa-dark); }
.wa-btn.secondary { background: #eee; }

/* ===== Footer ===== */
.wa-footer { padding: 6px 8px; font-size: 11px; color: #888; background: #fafafa; border-top: 1px solid #eee; border-radius: 0 0 var(--radius) var(--radius); }

/* ===== Mensaje inicial sobre el botón ===== */
#waIntro { position: fixed; right: 18px; bottom: 90px; background: var(--wa); color: #fff; padding: 8px 12px; border-radius: var(--radius); font-size: 14px; box-shadow: var(--shadow); z-index: 9998; display: flex; align-items: center; gap: 8px; max-width: 220px; transition: opacity 0.3s ease, transform 0.3s ease; }
#waIntroClose { background: none; border: none; color: #fff; font-weight: bold; font-size: 16px; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; }
#waIntroClose:hover { opacity: 0.8; transform: scale(1.1); }
#waIntro.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* ===== Responsive ===== */
@media(max-width:420px) { .wa-row { grid-template-columns: 1fr; } .wa-widget { width: calc(100vw - 24px); max-width: none; max-height: 80vh; } }