/* Andrea: guía flotante. Reposo = asomada por el borde inferior; al hablar sube y muestra el globo. */
.sa { position: fixed; right: 12px; bottom: calc(var(--sa-elevar, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.sa > * { pointer-events: auto; }
.sa__globo { position: relative; max-width: min(340px, calc(100vw - 70px)); min-width: min(260px, calc(100vw - 70px)); background: rgba(255, 255, 255, .64); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: #0f1b2d; border: 1px solid rgba(195, 205, 219, .7); border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); padding: 11px 30px 11px 13px; font-size: 13.5px; line-height: 1.45; margin-right: 6px; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; transition: opacity .2s ease-out, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s; }
.sa__globo::after { content: ''; position: absolute; right: 38px; bottom: -6px; width: 10px; height: 10px; background: rgba(255, 255, 255, .64); border-right: 1px solid rgba(195, 205, 219, .7); border-bottom: 1px solid rgba(195, 205, 219, .7); transform: rotate(45deg); }
.sa__chat { display: flex; flex-direction: column; gap: 6px; max-height: min(56dvh, 460px); min-height: 120px; overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; }
.sa__chat[hidden], .sa__form[hidden], .sa__nota[hidden], .sa__mic[hidden] { display: none; }
.sa__form .sa__mic { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; }
.sa__voz { font: inherit; border-radius: 9px; cursor: pointer; border: 1px solid #c3cddb; background: #fff; color: #0f1b2d; }
.sa__voz[hidden] { display: none; }
.sa__form .sa__voz { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; }
.sa__voz .sa__voz-on { display: none; }
.sa__voz--on .sa__voz-on { display: block; }
.sa__voz--on .sa__voz-off { display: none; }
.sa__form .sa__voz.sa__voz--on { background: #0b5fae; border-color: #0b5fae; color: #fff; }
.sa__form .sa__mic.sa__mic--on { background: #d93025; border-color: #d93025; color: #fff; }
.sa__lin { font-size: 14px; line-height: 1.45; padding: 7px 10px; border-radius: 10px; max-width: 92%; }
.sa__lin--yo { align-self: flex-end; background: rgba(219, 232, 247, .78); color: #0f1b2d; }
.sa__lin--ella { align-self: flex-start; background: rgba(238, 241, 245, .72); color: #0f1b2d; }
.sa__form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sa__campo { flex: 1 1 100%; font: inherit; font-size: 14px; color: #0f1b2d; background: rgba(255, 255, 255, .78); border: 1px solid #c3cddb; border-radius: 9px; padding: 8px 10px; min-width: 0; }
.sa__mic, .sa__enviar { font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 8px 12px; cursor: pointer; border: 1px solid #c3cddb; background: #fff; color: #0f1b2d; }
.sa__enviar { flex: 1; background: #0b5fae; border-color: #0b5fae; color: #fff; }
.sa__nota { margin: 6px 0 0; font-size: 11px; color: #5b6b82; }
.sa__cerrar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #5b6b82; font-size: 16px; line-height: 1; cursor: pointer; }
.sa__cuerpo { position: relative; width: 92px; height: 112px; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateY(62%); transition: transform .45s cubic-bezier(.16, 1, .3, 1); -webkit-tap-highlight-color: transparent; }
.sa__flota { filter: drop-shadow(0 4px 6px rgba(15, 27, 45, .28)); display: block; width: 100%; height: 100%; animation: sa-flota 3.4s ease-in-out infinite; }
.sa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transition: opacity .18s ease-out; user-select: none; -webkit-user-drag: none; }
.sa__img--on { opacity: 1; }
.sa--abierta .sa__cuerpo { transform: translateY(0); }
.sa--abierta .sa__globo { opacity: 1; transform: none; }
.sa__globo[hidden] { display: none; }
.sa--pequena .sa__cuerpo { width: 70px; height: 86px; }
@keyframes sa-flota { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .sa__flota { animation: none; }
  .sa__cuerpo, .sa__globo, .sa__img { transition: none; }
}

/* Botones dentro de la respuesta */
.sa__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sa__btn { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 9px; background: #0b5fae; color: #fff; text-decoration: none; border: 1px solid #0b5fae; }
.sa__btn:hover { background: #094e91; }
/* Oferta: bocadillo de cómic pegado a la cabeza de Andrea (ella asoma por abajo: se baja el margen lo que el cuerpo está escondido). */
.sa__oferta { position: relative; margin-bottom: -46px; margin-right: 14px; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; padding: 10px 16px; border-radius: 18px; border: 2px solid #0f1b2d; background: #fff; color: #0f1b2d; cursor: pointer; box-shadow: 0 3px 0 rgba(15, 27, 45, .18); animation: sa-oferta .22s cubic-bezier(.16, 1, .3, 1); }
.sa__oferta::after { content: ''; position: absolute; right: 26px; bottom: -9px; width: 14px; height: 14px; background: #fff; border-right: 2px solid #0f1b2d; border-bottom: 2px solid #0f1b2d; transform: rotate(45deg); border-bottom-right-radius: 3px; }
.sa__oferta:active { transform: translateY(1px); }
@keyframes sa-oferta { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.sa__oferta--texto { cursor: default; font-weight: 600; font-size: 14px; line-height: 1.4; max-width: min(320px, calc(100vw - 48px)); padding: 12px 30px 12px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; }
.sa__oferta--texto p { margin: 0; }
.sa__oferta-x { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; border: 0; background: transparent; color: #5b6b82; font-size: 18px; line-height: 1; cursor: pointer; }
.sa__oferta--animo { border-color: #1e8e3e; cursor: default; }
.sa__oferta--animo::after { border-color: #1e8e3e; }
.sa__btn--suave { background: #fff; color: #0f1b2d; border-color: #c3cddb; }
.sa__btn--suave:hover { background: #eef2f7; }
button.sa__btn { font-family: inherit; cursor: pointer; }
/* Vuelo con estela hasta el elemento señalado */
.sa--vuela { visibility: hidden; }
.sa__estela { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 59; pointer-events: none; }
.sa__vuelo { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; will-change: transform; }
.sa__vuelo img { display: block; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 4px 6px rgba(15, 27, 45, .28)); }
.sa__vuelo--flota img { animation: sa-flota-fina 1.6s ease-in-out infinite; }
@keyframes sa-flota-fina { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.sa-resalte { outline: 3px solid #1480c4 !important; outline-offset: 3px; animation: sa-late 1.1s ease-in-out infinite; }
@keyframes sa-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 128, 196, .55); } 50% { box-shadow: 0 0 0 12px rgba(20, 128, 196, 0); } }
@media (prefers-reduced-motion: reduce) { .sa-resalte { animation: none; } .sa__vuelo--flota img { animation: none; } }

/* Globo cerrado: no solo transparente, sino fuera de juego (ni se ve ni recibe toques, para no tapar la pantalla). */
.sa:not(.sa--abierta) .sa__globo { visibility: hidden; pointer-events: none; }
.sa--abierta .sa__globo { visibility: visible; transition-delay: 0s; }
.sa__archivo { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sa__archivo img { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid #d5dde8; }
.sa__archivo-pie { font-size: 12px; color: #4a5a70; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sa__globo, .sa__globo::after { background: #ffffff; } .sa__lin--ella { background: #eef1f5; } .sa__lin--yo { background: #dbe8f7; } }

.sa__form .sa__mic[hidden], .sa__form .sa__voz[hidden] { display: none; }