/* Asistente del manual: burbuja flotante + panel. Solo usa las variables de
   manual.css, asi sigue el tema claro/oscuro y la tipografia del sitio. */
.bot-burbuja{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px 11px 14px; border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:#fff;
  font:600 .9rem/1 var(--font-display); letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(237,108,32,.28), 0 1px 3px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.bot-burbuja:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(237,108,32,.34), 0 1px 3px rgba(0,0,0,.12); }
.bot-burbuja:focus-visible, .bot-panel :focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
.bot-burbuja svg{ width:19px; height:19px; flex:none; }
.bot-burbuja[aria-expanded="true"]{ display:none; }
/* Pendiente de "¿te sirvio?": un punto que late suave, sin tapar nada. */
.bot-aviso{ padding-right:22px; }
.bot-aviso::after{
  content:""; position:absolute; top:6px; right:8px; width:9px; height:9px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:bot-latido 1.8s infinite;
}

.bot-panel{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:min(410px, calc(100vw - 32px)); height:min(640px, calc(100vh - 96px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); color:var(--fg-soft); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06); font-family:var(--font-body);
  animation:bot-abrir .22s ease-out;
}
.bot-panel[hidden]{ display:none; }

.bot-cab{ display:flex; align-items:center; gap:11px; padding:14px 12px 13px 16px; border-bottom:1px solid var(--line); }
.bot-avatar{
  width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-bg); color:var(--accent);
}
.bot-avatar svg{ width:18px; height:18px; }
.bot-cab-txt{ flex:1; min-width:0; }
.bot-cab strong{ display:block; font:600 .98rem/1.2 var(--font-display); color:var(--fg); }
.bot-cab span{ display:block; font-size:.78rem; color:var(--muted); margin-top:2px; }
.bot-cerrar{
  width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:var(--muted);
  font-size:1.3rem; line-height:1; cursor:pointer; transition:background .15s;
}
.bot-cerrar:hover{ background:var(--surface-2); color:var(--fg); }

.bot-msgs{ position:relative; flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; }
.bot-msg{ max-width:100%; font-size:.9rem; line-height:1.5; animation:bot-entrar .25s ease-out; }
.bot-msg p{ margin:0 0 8px; }
.bot-msg p:last-child{ margin-bottom:0; }
.bot-msg-bot{ align-self:stretch; }
.bot-msg-usr{
  align-self:flex-end; max-width:85%; padding:8px 13px; border-radius:16px 16px 4px 16px;
  background:var(--surface-2); color:var(--fg);
}
.bot-nota{ font-size:.8rem; color:var(--muted); }
.bot-msg .bot-nota{ margin-top:10px; }

.bot-escribiendo{ display:inline-flex; gap:4px; padding:10px 12px; border-radius:14px; background:var(--surface); }
.bot-escribiendo i{ width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.5; animation:bot-punto 1s infinite ease-in-out; }
.bot-escribiendo i:nth-child(2){ animation-delay:.15s; }
.bot-escribiendo i:nth-child(3){ animation-delay:.3s; }

.bot-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.bot-chip{
  border:1px solid var(--line); background:transparent; color:var(--fg-soft); cursor:pointer;
  border-radius:999px; padding:6px 12px; font:inherit; font-size:.82rem; transition:border-color .15s, background .15s;
}
.bot-chip:hover{ border-color:var(--accent); background:var(--accent-bg); color:var(--fg); }

/* Acciones secundarias: botones con contorno, claros pero sin competir con "Leer". */
.bot-acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.bot-sec{
  border:1px solid var(--line); background:var(--bg); color:var(--fg-soft); cursor:pointer;
  border-radius:999px; padding:7px 14px; font:600 .8rem/1.1 var(--font-display); transition:border-color .15s, color .15s;
}
.bot-sec:hover{ border-color:var(--accent); color:var(--link); }

/* Respuesta principal */
.bot-res{ display:block; padding:14px; margin:0; border-radius:14px; background:var(--surface); }
.bot-res-cap{ display:block; font-size:.74rem; color:var(--muted); margin-bottom:2px; }
.bot-res-tit{ display:block; font:600 .98rem/1.3 var(--font-display); color:var(--fg); }
.bot-res-frag{ display:block; font-size:.84rem; color:var(--muted); margin:6px 0 12px; }
.bot-res mark{ background:transparent; color:var(--fg); font-weight:700; }
.bot-leer{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:11px 14px; border-radius:10px; text-decoration:none;
  background:var(--accent); color:#fff; font:600 .9rem/1 var(--font-display);
  box-shadow:0 2px 8px rgba(237,108,32,.25); transition:filter .15s, transform .15s;
}
.bot-leer:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.bot-leer svg{ width:17px; height:17px; flex:none; }
.bot-donde{ display:block; text-align:center; font-size:.74rem; color:var(--muted); margin-top:6px; }

/* Filas: resultados secundarios y secciones del arbol, con su boton "Abrir". */
.bot-filas, .bot-arbol{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.bot-fila, .bot-tema{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg);
  color:var(--fg); text-decoration:none; cursor:pointer; font:inherit; transition:border-color .15s, background .15s;
}
.bot-fila:hover, .bot-tema:hover{ border-color:var(--accent); background:var(--surface); }
.bot-fila-txt{ flex:1; min-width:0; }
.bot-fila-txt b{ display:block; font-size:.88rem; font-weight:600; color:var(--fg); }
.bot-fila-txt small{ display:block; color:var(--muted); font-size:.76rem; margin-top:2px; }
.bot-abrir{
  flex:none; padding:6px 12px; border-radius:999px; background:var(--accent-bg); color:var(--link);
  font:700 .76rem/1 var(--font-display);
}
.bot-fila:hover .bot-abrir{ background:var(--accent); color:#fff; }
.bot-tema{ background:var(--surface); border-color:transparent; }
.bot-flecha{ flex:none; font-size:1.3rem; line-height:1; color:var(--muted); }
.bot-tema:hover .bot-flecha{ color:var(--link); }
.bot-ruta{ font-size:.76rem; color:var(--muted); margin:6px 0 2px; }

.bot-ideas{ margin:0 0 8px; padding-left:18px; }
.bot-ideas li{ margin:0 0 5px; }

.bot-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.bot-form input{
  flex:1; min-width:0; padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--fg); font:inherit; font-size:.88rem; transition:border-color .15s, background .15s;
}
.bot-form input:focus{ outline:none; border-color:var(--accent); background:var(--bg); }
.bot-form button{
  width:40px; height:40px; flex:none; border:0; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer;
  display:grid; place-items:center;
}
.bot-form button svg{ width:17px; height:17px; }

/* Seccion a la que salto el usuario: se marca un momento para ubicarla. */
.bot-destino{ outline:2px solid var(--accent); outline-offset:8px; border-radius:6px; transition:outline-color .8s; }

@keyframes bot-abrir{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes bot-entrar{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes bot-punto{ 0%,80%,100%{ opacity:.35; transform:none; } 40%{ opacity:.9; transform:translateY(-2px); } }
@keyframes bot-latido{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.7); } 70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce){
  .bot-panel, .bot-msg, .bot-escribiendo i, .bot-aviso::after{ animation:none; }
  .bot-msgs{ scroll-behavior:auto; }
}

@media (max-width:640px){
  .bot-burbuja{ right:16px; bottom:16px; }
  .bot-panel{ right:0; left:0; bottom:0; width:auto; height:88vh; border-radius:18px 18px 0 0; }
}
@media print{ .bot-burbuja, .bot-panel{ display:none !important; } }