/* Asistente del manual de MIA erp 360 — burbuja flotante y página /ayuda */
.ag {
  --ag-azul: #0B5FD0;
  --ag-azul-claro: #E2ECFC;
  --ag-fondo: #ffffff;
  --ag-fondo-2: #F4F6FA;
  --ag-texto: #16202E;
  --ag-tenue: #5A6675;
  --ag-borde: #DCE3ED;
  --ag-sombra: 0 12px 34px rgba(11, 34, 73, .18);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ag {
    --ag-azul: #4DA3FF; --ag-azul-claro: #16304F;
    --ag-fondo: #14191F; --ag-fondo-2: #1C232B;
    --ag-texto: #EAF0F7; --ag-tenue: #9AA8B8; --ag-borde: #2B343E;
    --ag-sombra: 0 12px 34px rgba(0, 0, 0, .55);
  }
}
:root[data-theme='dark'] .ag {
  --ag-azul: #4DA3FF; --ag-azul-claro: #16304F;
  --ag-fondo: #14191F; --ag-fondo-2: #1C232B;
  --ag-texto: #EAF0F7; --ag-tenue: #9AA8B8; --ag-borde: #2B343E;
  --ag-sombra: 0 12px 34px rgba(0, 0, 0, .55);
}

/* --- burbuja --- */
.ag-burbuja {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ag-azul); color: #fff; box-shadow: var(--ag-sombra);
  display: grid; place-items: center; transition: transform .15s ease;
}
.ag-burbuja:hover { transform: scale(1.06); }
.ag-burbuja svg { width: 26px; height: 26px; }

/* --- panel --- */
.ag-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 9999;
  width: min(390px, calc(100vw - 32px)); height: min(580px, calc(100vh - 130px));
  background: var(--ag-fondo); color: var(--ag-texto);
  border: 1px solid var(--ag-borde); border-radius: 14px; box-shadow: var(--ag-sombra);
  display: flex; flex-direction: column; overflow: hidden;
}
.ag-panel[hidden] { display: none; }

/* --- modo embebido (página /ayuda) --- */
.ag-embebido {
  position: static; width: 100%; height: min(70vh, 640px);
  margin: 0; right: auto; bottom: auto;
}

.ag-panel .ag-cab h2, .ag-panel .ag-cab p, .ag-panel .ag-msg p,
.ag-panel .ag-msg li, .ag-panel .ag-aviso {
  border: 0; padding-bottom: 0; letter-spacing: normal; text-transform: none;
}
.ag-cab {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--ag-borde); background: var(--ag-fondo-2);
}
.ag-panel .ag-cab h2 { margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 600; }
.ag-panel .ag-cab p { margin: 3px 0 0; font-size: .78rem; color: var(--ag-tenue); line-height: 1.35; }
.ag-cerrar {
  margin-left: auto; border: 0; background: transparent; color: var(--ag-tenue);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.ag-cerrar:hover { background: var(--ag-borde); }

.ag-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ag-msg { max-width: 92%; font-size: .9rem; line-height: 1.5; }
.ag-msg.usuario {
  align-self: flex-end; background: var(--ag-azul); color: #fff;
  padding: 9px 13px; border-radius: 13px 13px 3px 13px; white-space: pre-wrap;
}
.ag-msg.bot { align-self: flex-start; }
.ag-msg.bot .ag-texto {
  background: var(--ag-fondo-2); border: 1px solid var(--ag-borde);
  padding: 11px 14px; border-radius: 13px 13px 13px 3px;
}
.ag-panel .ag-msg.bot p { margin: 0 0 .6em; }
.ag-panel .ag-msg.bot p:last-child { margin-bottom: 0; }
.ag-panel .ag-msg.bot ul, .ag-panel .ag-msg.bot ol { margin: .4em 0; padding-left: 1.2em; }
.ag-panel .ag-msg.bot li { margin: .2em 0; }
.ag-msg.bot code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .92em; }

.ag-fuentes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ag-panel .ag-fuentes a {
  font-size: .74rem; text-decoration: none; color: var(--ag-azul);
  background: var(--ag-azul-claro); border-radius: 999px; padding: 3px 10px;
}
.ag-fuentes a:hover { text-decoration: underline; }

.ag-pensando { display: flex; gap: 4px; padding: 4px 2px; }
.ag-pensando span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ag-tenue);
  animation: ag-latido 1.2s infinite ease-in-out;
}
.ag-pensando span:nth-child(2) { animation-delay: .15s; }
.ag-pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes ag-latido { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.ag-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-panel .ag-sugerencias button {
  font: inherit; font-size: .78rem; cursor: pointer; color: var(--ag-azul);
  background: transparent; border: 1px solid var(--ag-borde); border-radius: 999px; padding: 5px 11px;
}
.ag-sugerencias button:hover { background: var(--ag-azul-claro); }

.ag-pie { border-top: 1px solid var(--ag-borde); padding: 10px 12px; background: var(--ag-fondo); }
.ag-forma { display: flex; gap: 8px; align-items: flex-end; }
.ag-forma textarea {
  flex: 1; resize: none; font: inherit; font-size: .9rem; color: var(--ag-texto);
  background: var(--ag-fondo-2); border: 1px solid var(--ag-borde); border-radius: 10px;
  padding: 9px 11px; max-height: 110px; min-height: 40px;
}
.ag-forma textarea:focus { outline: 2px solid var(--ag-azul); outline-offset: -1px; }
.ag-forma button {
  border: 0; background: var(--ag-azul); color: #fff; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;
}
.ag-forma button:disabled { opacity: .45; cursor: default; }
.ag-forma button svg { width: 18px; height: 18px; }
.ag-panel .ag-aviso { margin: 8px 2px 0; font-size: .7rem; color: var(--ag-tenue); text-align: center; }

@media (max-width: 480px) {
  .ag-panel:not(.ag-embebido) {
    right: 8px; left: 8px; bottom: 82px; width: auto; height: min(600px, calc(100vh - 110px));
  }
}

#agente { margin: 26px 0 8px; }