/* ============================================================
   Asistente "Inge Osito" del aula de suscriptores (23-09-2026)
   Documentacion/Suscripciones/PLAN_ASISTENTE_VIRTUAL.md, fase 3.
   Boton flotante abajo a la derecha (se apila encima del boton del
   anuncio de lanzamiento mientras exista) y panel de chat de
   380x560; en telefono el panel ocupa toda la pantalla.
   Tokens de aula-suscripcion.css (--azul-*, --cian-*, --line, --fg...).
   ============================================================ */
.asis-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 1150;
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px 0 6px; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-900, #003450), var(--azul-700, #165a7f));
  color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 18, 29, .3);
  transition: transform .2s ease, box-shadow .2s ease, bottom .25s ease;
}
.asis-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0, 18, 29, .4); }
.asis-fab:focus-visible { outline: 2px solid var(--cian-500, #0fefd9); outline-offset: 3px; }
.asis-fab img { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 3px; }
/* Mientras el boton del anuncio (.anuncio-lz-flot, 44 px) este visible, este sube por encima (asistente.js pone la clase). */
.asis-fab--arriba { bottom: calc(20px + 44px + 12px); }
.asis-fab[hidden] { display: none; }
/* Sitio publico (W3): el boton ocupa el sitio del de WhatsApp con las medidas del "dock" de Landing2.css, asi el boton del
   anuncio de lanzamiento se apila encima igual que antes (anuncio-lanzamiento.js, --sobre-wa). */
.asis-fab--dock {
  right: var(--landing-dock-margen, 20px); bottom: var(--landing-dock-margen, 20px); height: var(--landing-dock-wa, 56px);
  z-index: 1100; padding-right: 18px;
}
.asis-fab--dock img { width: 42px; height: 42px; }
.asis__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* El panel ocupa el sitio del boton (asistente.js lo oculta mientras el panel esta abierto). */
.asis {
  position: fixed; right: 20px; bottom: 20px; z-index: 1160;
  display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 40px); height: 560px; max-height: calc(100vh - 40px);
  border-radius: var(--radio-lg, 18px); overflow: hidden; background: var(--page, #fff); color: var(--fg, #003450);
  box-shadow: var(--sombra-alta, 0 12px 36px rgba(0,52,80,.16)); border: 1px solid var(--line, #dbe7ee);
  transform-origin: bottom right; transition: transform .2s ease, opacity .2s ease;
}
.asis[hidden] { display: none; }
.asis--arriba { bottom: calc(20px + 44px + 12px); max-height: calc(100vh - 96px); }   /* sobre el boton del anuncio */
.asis--entrando { transform: scale(.96) translateY(8px); opacity: 0; }

.asis__cab {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px;
  background: linear-gradient(120deg, var(--azul-1000, #00121d), var(--azul-900, #003450) 60%, var(--azul-800, #0d4972)); color: #fff;
}
.asis__cab img { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; padding: 3px; }
.asis__quien { flex: 1; min-width: 0; line-height: 1.2; }
.asis__quien b { display: block; font-size: 15px; font-weight: 800; }
.asis__quien span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--cian-300, #aef4e9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asis__cerrar {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Salida a WhatsApp (sitio publico): "Asesor" en la cabecera, verde de WhatsApp. */
.asis__wa {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px 0 8px; border-radius: 999px;
  background: #25d366; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.asis__wa:hover, .asis__wa:focus { background: #1ebe5b; color: #fff; text-decoration: none; }
.asis__wa svg { width: 18px; height: 18px; }
.asis__cerrar:hover { background: rgba(255,255,255,.22); }
.asis__cerrar svg { width: 18px; height: 18px; }

.asis__lista { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: var(--page-alt, #f0fdfa); scroll-behavior: smooth; }
.asis__m { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.asis__m--yo { align-self: flex-end; background: var(--azul-900, #003450); color: #fff; border-bottom-right-radius: 4px; }
.asis__m--oso { align-self: flex-start; background: #fff; border: 1px solid var(--line, #dbe7ee); border-bottom-left-radius: 4px; }
.asis__m--error { background: var(--urge-bg, #fdf1ec); border-color: #f2c9b8; color: var(--urge, #b4400c); }
.asis__m b { font-weight: 700; }
.asis__m a { color: var(--cian-700, #04756a); font-weight: 700; text-decoration: underline; }
/* Enlace al final de su linea dibujado como boton (asistente.js, enlaces()): curso, membresia o WhatsApp. */
.asis__m a.asis__btn {
  display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 4px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--cian-600, #06b8a6); background: #fff; color: var(--cian-700, #04756a);
  font-size: 12.5px; font-weight: 700; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.asis__m a.asis__btn::after { content: "\2192"; }
.asis__m a.asis__btn:hover, .asis__m a.asis__btn:focus { background: var(--cian-200, #d9fcf5); text-decoration: none; }
.asis__m a.asis__btn--item { margin-left: 12px; }
.asis__m a.asis__btn--membresia { background: var(--cian-500, #0fefd9); border-color: var(--cian-500, #0fefd9); color: var(--azul-1000, #00121d); }
.asis__m a.asis__btn--membresia:hover, .asis__m a.asis__btn--membresia:focus { background: var(--cian-400, #73f4e5); border-color: var(--cian-400, #73f4e5); }
.asis__m a.asis__btn--wa { background: #25d366; border-color: #25d366; color: #fff; }
.asis__m a.asis__btn--wa::after { content: "\2197"; }
.asis__m a.asis__btn--wa:hover, .asis__m a.asis__btn--wa:focus { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
.asis__escribe { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 14px; border-radius: 14px; border-bottom-left-radius: 4px; background: #fff; border: 1px solid var(--line, #dbe7ee); }
.asis__escribe i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-soft, #4a7089); opacity: .35; animation: asis-punto 1.2s infinite; }
.asis__escribe i:nth-child(2) { animation-delay: .2s; }
.asis__escribe i:nth-child(3) { animation-delay: .4s; }
@keyframes asis-punto { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.asis__sug { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; background: var(--page-alt, #f0fdfa); }
.asis__sug button {
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--cian-600, #06b8a6); background: #fff; color: var(--cian-700, #04756a);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left;
}
.asis__sug button:hover { background: var(--cian-200, #d9fcf5); }
.asis__sug[hidden] { display: none; }

.asis__pie { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line, #dbe7ee); background: #fff; }
.asis__pie textarea {
  flex: 1; min-height: 40px; max-height: 108px; padding: 10px 12px; border: 1px solid var(--line, #dbe7ee); border-radius: 12px; resize: none;
  font: inherit; font-size: 13.5px; line-height: 1.4; color: var(--fg, #003450); background: var(--page-alt, #f0fdfa);
}
.asis__pie textarea:focus { outline: 2px solid var(--cian-600, #06b8a6); outline-offset: 0; border-color: transparent; }
.asis__enviar {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cian-500, #0fefd9); color: var(--azul-1000, #00121d); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s, background .15s;
}
.asis__enviar:hover { transform: translateY(-1px); background: var(--cian-400, #73f4e5); }
.asis__enviar:disabled { opacity: .5; cursor: default; transform: none; }
.asis__enviar svg { width: 18px; height: 18px; }
.asis__nota { padding: 0 14px 8px; font-size: 10.5px; color: var(--fg-soft, #4a7089); background: #fff; text-align: center; }

@media (max-width: 520px) {
  .asis, .asis.asis--arriba { right: 0; bottom: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .asis-fab { right: 16px; bottom: 16px; height: 48px; font-size: 12px; }
  .asis-fab--arriba { bottom: calc(16px + 40px + 12px); }
  .asis-fab--dock { right: var(--landing-dock-margen, 16px); bottom: var(--landing-dock-margen, 16px); height: var(--landing-dock-wa, 54px); }
  .asis__wa span { display: none; }
  .asis__wa { padding: 0 8px; }
}

/* ---------- Modo oscuro del sitio publico (html.dark, tokens --landing-* de Landing2.css). El aula no tiene tema oscuro. ---------- */
html.dark .asis { background: var(--landing-card, #062b42); color: var(--landing-fg, #fff); border-color: var(--landing-line, rgba(255,255,255,.12)); }
html.dark .asis__lista, html.dark .asis__sug { background: var(--landing-page, #00121d); }
html.dark .asis__m--oso { background: var(--landing-card, #062b42); border-color: var(--landing-line, rgba(255,255,255,.12)); color: var(--landing-fg, #fff); }
html.dark .asis__m--yo { background: var(--landing-cian-700, #04756a); }
html.dark .asis__m--error { background: rgba(180,64,12,.18); border-color: rgba(255,255,255,.14); color: #ffb08a; }
html.dark .asis__m a { color: #0fefd9; }
html.dark .asis__m a.asis__btn { background: transparent; border-color: rgba(15,239,217,.5); color: #0fefd9; }
html.dark .asis__m a.asis__btn--curso:hover, html.dark .asis__m a.asis__btn--curso:focus { background: rgba(15,239,217,.12); }
html.dark .asis__m a.asis__btn--membresia { background: #0fefd9; border-color: #0fefd9; color: #00121d; }
html.dark .asis__m a.asis__btn--wa { background: #25d366; border-color: #25d366; color: #fff; }
html.dark .asis__escribe { background: var(--landing-card, #062b42); border-color: var(--landing-line, rgba(255,255,255,.12)); }
html.dark .asis__escribe i { background: var(--landing-fg-soft, #aef4e9); }
html.dark .asis__sug button { background: var(--landing-card, #062b42); color: #0fefd9; border-color: rgba(15,239,217,.5); }
html.dark .asis__sug button:hover { background: rgba(15,239,217,.14); }
html.dark .asis__pie, html.dark .asis__nota { background: var(--landing-card, #062b42); border-color: var(--landing-line, rgba(255,255,255,.12)); color: var(--landing-fg-soft, #aef4e9); }
html.dark .asis__pie textarea { background: var(--landing-page, #00121d); color: var(--landing-fg, #fff); border-color: var(--landing-line, rgba(255,255,255,.12)); }
@media (prefers-reduced-motion: reduce) {
  .asis, .asis-fab, .asis__enviar { transition: none; }
  .asis__escribe i { animation: none; opacity: .7; }
}