/* Asistente de ayuda con IA: burbuja + panel de chat.
 *
 * Sólo tokens de `tokens.css`/`app.css` (no se redefinen aquí). Capas, contra las de
 * `app.css`: barra-compra 45 < nav 50 < **burbuja 55 < panel 56** < velo/drawer 60/61
 * < toast 90 < splash 100. La burbuja sube por encima de `.nav` y de `.barra-compra`
 * cuando están fijas abajo: `asistente.js` mide su alto y lo deja en `--asis-base`
 * (antes de medir, el respaldo es el alto de la barra de pestañas en móvil). */

.asis-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Burbuja ─────────────────────────────────────────────────────────────── */
.asis-burbuja {
  position: fixed; z-index: 55;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--asis-base, calc(var(--nav-h) + var(--seguro-abajo))) + 14px);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: var(--marca); color: var(--sobre-marca);
  box-shadow: var(--sombra-cta);
  transition: transform var(--transicion), background var(--transicion), opacity var(--transicion);
}
.asis-burbuja:hover { background: var(--marca-fuerte); transform: translateY(-2px); }
.asis-burbuja:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; }
.asis-burbuja[hidden],
.asis--tapada .asis-burbuja { display: none; }
@media (min-width: 768px) {
  .asis-burbuja {
    right: 24px;
    bottom: calc(var(--asis-base, var(--seguro-abajo)) + 24px);
  }
}
/* Mientras el menú, el carrito o el visor de fotos están abiertos, la burbuja se
   esconde: quedaría por debajo del velo y no se puede usar. Respaldo en CSS de lo
   que también hace el JS. */
body:has(.drawer.abierto) .asis-burbuja,
body:has(.visor.abierto) .asis-burbuja { display: none; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.asis-panel {
  position: fixed; z-index: 56;
  right: 24px;
  bottom: calc(var(--asis-base, var(--seguro-abajo)) + 24px);
  width: 380px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - var(--asis-base, 0px) - 48px);
  display: flex; flex-direction: column;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  animation: asis-entra var(--resorte) both;
}
.asis-panel[hidden] { display: none; }
@keyframes asis-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Móvil: pantalla completa, con las zonas seguras. */
@media (max-width: 600px) {
  .asis-panel {
    inset: 0; right: 0; bottom: 0;
    width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
    border: 0; border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: var(--seguro-abajo);
  }
}
/* Escritorio entre 601 y 767 px: flotante, pero por encima de la barra de pestañas. */
@media (min-width: 601px) and (max-width: 767.98px) {
  .asis-panel {
    right: 16px;
    bottom: calc(var(--asis-base, calc(var(--nav-h) + var(--seguro-abajo))) + 14px);
  }
}

.asis-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 10px 12px 16px;
  background: var(--navy); color: #fff;
}
.asis-cab__txt { flex: 1; min-width: 0; }
.asis-cab__tit { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.asis-cab__sub { margin: 1px 0 0; font-size: 12px; opacity: .72; }
.asis-cab__btn,
.asis-cab__cerrar {
  border: 0; background: none; color: #fff; cursor: pointer; font: inherit;
  border-radius: var(--r-sm); opacity: .85;
}
.asis-cab__btn { font-size: 12.5px; font-weight: 700; padding: 8px 10px; }
.asis-cab__cerrar { width: 40px; height: 40px; display: grid; place-items: center; }
.asis-cab__btn:hover, .asis-cab__cerrar:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.asis-cab__btn:focus-visible, .asis-cab__cerrar:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 1px; opacity: 1; }
.asis-cab__btn:disabled { opacity: .45; cursor: default; background: none; }

.asis-aviso {
  margin: 0; padding: 8px 16px;
  font-size: 12px; line-height: 1.4; font-weight: 600;
  color: var(--texto-2); background: var(--superficie); border-bottom: 1px solid var(--borde);
}

/* ── Conversación ────────────────────────────────────────────────────────── */
.asis-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 10px;
}
.asis-log:focus-visible { outline: 2px solid var(--brand-300); outline-offset: -2px; }

.asis-msg { max-width: 88%; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.asis-msg--yo {
  align-self: flex-end;
  padding: 9px 13px; border-radius: 16px 16px 4px 16px;
  background: var(--marca); color: var(--sobre-marca);
  white-space: pre-wrap;
}
.asis-msg--bot {
  align-self: flex-start;
  padding: 9px 13px; border-radius: 16px 16px 16px 4px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
}
.asis-msg--bot:empty { display: none; }
.asis-msg--bot p { margin: 0 0 8px; }
.asis-msg--bot p:last-child { margin-bottom: 0; }
.asis-msg--bot ul, .asis-msg--bot ol { margin: 0 0 8px; padding-left: 20px; }
.asis-msg--bot li { margin: 2px 0; }
.asis-msg--bot a { color: var(--marca-fuerte); font-weight: 700; text-decoration: underline; }
.asis-msg--aviso { background: var(--dinero-tenue); border-color: var(--dinero-suave); }
.asis-msg--error { background: var(--dinero-tenue); border-color: var(--dinero-suave); color: var(--dinero-texto); }
.asis-msg__nota { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-3); }

.asis-estado {
  margin: 0; padding: 2px 16px 6px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-3);
}
.asis-estado[hidden] { display: none; }
.asis-estado::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: middle;
  border-radius: 50%; background: var(--marca); animation: asis-late 1s ease-in-out infinite;
}
@keyframes asis-late { 50% { opacity: .25; } }

/* ── Tarjeta de acción ──────────────────────────────────────────────────── */
.asis-accion {
  align-self: stretch;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  background: var(--fondo); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; line-height: 1.45;
}
.asis-accion__tit { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.asis-accion__resumen { margin: 0; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.asis-accion__etq { margin: 0; font-size: 12px; font-weight: 700; color: var(--texto-2); }
.asis-accion__contenido {
  margin: 0; padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--superficie); border-left: 3px solid var(--marca);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.asis-accion__vence { margin: 0; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.asis-accion__botones { display: flex; gap: 8px; flex-wrap: wrap; }
.asis-accion__estado { margin: 0; font-size: 13px; font-weight: 700; }
.asis-accion__estado[hidden], .asis-accion__vence[hidden], .asis-accion__botones[hidden] { display: none; }
.asis-accion--ok .asis-accion__estado { color: var(--ok-texto); }
.asis-accion--mal .asis-accion__estado { color: var(--dinero-texto); }
.asis-accion--fin { border-color: var(--borde); }

.asis-btn {
  min-height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--borde-fuerte); background: var(--fondo); color: var(--texto);
}
.asis-btn--primario { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.asis-btn--primario:hover { background: var(--marca-fuerte); }
.asis-btn:hover { border-color: var(--marca); }
.asis-btn:disabled { opacity: .5; cursor: default; }
.asis-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

/* ── Formulario ──────────────────────────────────────────────────────────── */
.asis-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 6px; border-top: 1px solid var(--borde);
}
.asis-form__texto {
  flex: 1; min-width: 0; resize: none;
  min-height: 42px; max-height: 120px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--borde-fuerte); background: var(--fondo); color: var(--texto);
  font: inherit; font-size: 14.5px; line-height: 1.4;
}
.asis-form__texto:focus { outline: 2px solid var(--brand-300); outline-offset: 0; border-color: var(--marca); }
.asis-form__enviar,
.asis-form__detener {
  flex-shrink: 0; height: 42px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
}
.asis-form__enviar { border: 0; background: var(--marca); color: var(--sobre-marca); }
.asis-form__enviar:hover { background: var(--marca-fuerte); }
.asis-form__enviar:disabled { opacity: .5; cursor: default; }
.asis-form__detener { border: 1px solid var(--borde-fuerte); background: var(--fondo); color: var(--texto); }
.asis-form__enviar[hidden], .asis-form__detener[hidden] { display: none; }
.asis-form__enviar:focus-visible, .asis-form__detener:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.asis-pie { padding: 2px 12px 10px; }
.asis-pie__persona {
  border: 0; background: none; padding: 6px 4px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--marca-fuerte); text-decoration: underline;
}
.asis-pie__persona:disabled { opacity: .5; cursor: default; }
.asis-pie__persona:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .asis-burbuja, .asis-panel { transition: none; animation: none; }
  .asis-burbuja:hover { transform: none; }
  .asis-estado::before { animation: none; }
  .asis-log { scroll-behavior: auto; }
}

@media print { .asis { display: none !important; } }