/* ── MASCOTA (AURORA flotante) + SELLO DE ACCIÓN ───────────────────────
   Usa las variables de tema de aurora.css, así que sigue al tema claro/oscuro
   y a la escala tipográfica sin nada extra. */

/* La capa importa y se eligió a conciencia. Por debajo quedan el detalle de IFA
   (100), los modales de formulario (300) y el VISOR DE MANUALES (1000): si la
   mascota se quedara en 900, desaparecería detrás del manual justo cuando
   AURORA acaba de abrirlo, que es el momento en el que más falta hace verla.
   Por encima sigue estando .lock-overlay (4000), que son avisos que exigen una
   decisión y no deben compartir pantalla con nada. */
/* pointer-events: none EN EL CONTENEDOR, Y NO ES UN DETALLE.
   Este div es un flex column que contiene el panel (330×420) MÁS la burbuja.
   Con el panel cerrado, 'visibility: hidden' lo oculta pero NO le quita el
   sitio: el contenedor sigue midiendo unos 330×494 px. Como cualquier caja
   recibe clics aunque no pinte nada, quedaba un rectángulo INVISIBLE de ese
   tamaño en la esquina inferior derecha, a z-index 1200, tragándose todo lo
   que hubiera debajo. Así se cazó: los botones «Guardar cambios» y «Guardar y
   salir» de Nueva IFA no respondían, y arrastrar la bolita los devolvía a la
   vida. La bolita que se ve son 64 px; la zona muerta era ocho veces mayor.
   Con esto, solo capturan clics las piezas que de verdad se ven. */
.mascota {
  position: fixed; right: 22px; bottom: 22px; z-index: 1200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.mascota-panel, .mascota-burbuja { pointer-events: auto; }

/* ── La burbuja ─────────────────────────────────────────────────────── */
/* Es una ESFERA, no un círculo plano: en la primera versión el disco se perdía
   contra el fondo en los dos temas. El volumen sale de tres capas —degradado
   radial con el brillo arriba a la izquierda, sombra interior abajo y sombra
   proyectada fuera— más un anillo de acento que gira despacio para que el ojo
   la encuentre sin que llegue a molestar. */
.mascota-burbuja {
  width: 64px; height: 64px; border-radius: 50%; cursor: grab;
  border: none; padding: 0; position: relative;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, .30) 0%,
      rgba(255, 255, 255, .10) 26%,
      rgba(0, 0, 0, .10) 62%,
      rgba(0, 0, 0, .28) 100%),
    var(--bg1);
  box-shadow:
    inset 0 -7px 14px rgba(0, 0, 0, .30),      /* hunde la parte de abajo */
    inset 0 5px 10px rgba(255, 255, 255, .16), /* luz en la parte de arriba */
    0 10px 22px rgba(0, 0, 0, .38),            /* la despega del fondo */
    0 0 0 1px rgba(249, 115, 22, .45);         /* filo de acento siempre visible */
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.3), box-shadow .18s;
}
.mascota-burbuja:hover {
  transform: scale(1.07) translateY(-1px);
  box-shadow:
    inset 0 -7px 14px rgba(0, 0, 0, .30),
    inset 0 5px 10px rgba(255, 255, 255, .16),
    0 14px 30px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(249, 115, 22, .8),
    0 0 18px rgba(249, 115, 22, .35);
}
.mascota-burbuja:active { cursor: grabbing; transform: scale(.97); }

/* El lienzo va recortado a la esfera y por debajo del brillo, para que la red
   neuronal se vea "dentro" del cristal y no pegada encima. */
.mascota-burbuja canvas {
  width: 100%; height: 100%; display: block;
  border-radius: 50%; position: relative; z-index: 0;
}

/* Anillo de acento girando. Es un pseudo-elemento aparte para que la rotación
   no arrastre al lienzo ni a la escala del :hover. */
.mascota-burbuja::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  /* El tramo sólido usa var(--blue) (el naranja de marca) para que siga al
     tema si se personaliza en /godmode. */
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 200deg,
    var(--blue) 300deg, rgba(249, 115, 22, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: mascota-anillo 3.6s linear infinite;
  pointer-events: none;
}
@keyframes mascota-anillo { to { transform: rotate(360deg); } }

/* El brillo especular: una elipse tenue arriba a la izquierda, encima de la red
   pero sin capturar el ratón. Es lo que remata la sensación de esfera. */
.mascota-burbuja::after {
  content: ''; position: absolute; left: 18%; top: 12%; width: 34%; height: 22%;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%);
}

/* En tema claro la esfera necesita menos luz interior y más contraste de borde,
   o se lava contra el fondo blanco. El selector es el que ya usa aurora.css. */
:root[data-theme="light"] .mascota-burbuja {
  box-shadow:
    inset 0 -7px 14px rgba(0, 0, 0, .16),
    inset 0 5px 10px rgba(255, 255, 255, .55),
    0 8px 20px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(249, 115, 22, .6);
}

/* Punto de aviso: hay respuesta y la mascota está cerrada */
.mascota-punto {
  position: absolute; top: 6px; right: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: #ef4444; border: 2px solid var(--bg1);
}

/* Latido al llegar una respuesta con el panel cerrado */
@keyframes mascota-late {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.16); }
  60%      { transform: scale(.98); }
}
.mascota.late .mascota-burbuja { animation: mascota-late .7s ease 2; }

/* ── El panel ───────────────────────────────────────────────────────── */
.mascota-panel {
  width: 330px; max-width: calc(100vw - 32px);
  height: 420px; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px);
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, .9, .3, 1.2), visibility .18s;
}
.mascota.abierta .mascota-panel { opacity: 1; visibility: visible; transform: none; }

.mascota-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px 9px 13px; border-bottom: 1px solid var(--bd);
}
.mascota-tit {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--text0); font-size: 1.2rem;
}
.mascota-tit i { color: var(--blue); }
.mascota-cab-btns { display: flex; gap: 2px; }

.mascota-hilo {
  flex: 1; overflow-y: auto; min-height: 0; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}

.mascota-vacio {
  margin: auto; text-align: center; color: var(--text2); padding: 16px;
}
.mascota-vacio i { font-size: 2.2rem; opacity: .45; display: block; margin-bottom: 8px; }
.mascota-vacio p { margin: 0; font-size: 1.08rem; line-height: 1.45; }

.mascota-msg { display: flex; }
.mascota-msg.mia { justify-content: flex-end; }
.mascota-bbl {
  max-width: 88%; padding: 7px 11px; border-radius: 12px;
  font-size: 1.08rem; line-height: 1.45; word-wrap: break-word;
  border: 1px solid var(--bd); background: var(--bg0); color: var(--text0);
}
.mascota-msg.mia .mascota-bbl {
  background: var(--blue); border-color: transparent; color: #fff;
  border-bottom-right-radius: 4px;
}
.mascota-msg.suya .mascota-bbl { border-bottom-left-radius: 4px; }
/* El contenido del agente llega como HTML ya renderizado por markdown.js */
.mascota-bbl p:first-child { margin-top: 0; }
.mascota-bbl p:last-child { margin-bottom: 0; }
.mascota-bbl pre { max-width: 100%; overflow-x: auto; }
.mascota-bbl table { display: block; overflow-x: auto; max-width: 100%; }

/* Puntitos de "escribiendo" */
.mascota-esperando { display: flex; gap: 4px; align-items: center; }
.mascota-esperando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text2);
  animation: mascota-pt 1.1s infinite ease-in-out;
}
.mascota-esperando span:nth-child(2) { animation-delay: .16s; }
.mascota-esperando span:nth-child(3) { animation-delay: .32s; }
@keyframes mascota-pt {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40%           { opacity: 1;  transform: translateY(-3px); }
}

.mascota-entrada {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 9px 10px; border-top: 1px solid var(--bd);
}
.mascota-entrada textarea {
  flex: 1; resize: none; max-height: 90px; padding: 8px 10px;
  border: 1px solid var(--blue); border-radius: 10px;
  background: var(--bg0); color: var(--text0);
  font-family: inherit; font-size: 1.08rem; line-height: 1.4;
}
.mascota-entrada textarea:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
}
.mascota-entrada .sendbtn { margin: 0; flex: 0 0 auto; }

/* En móvil el panel ocupa el ancho disponible y se pega abajo */
@media (max-width: 620px) {
  .mascota { right: 12px; bottom: 12px; left: 12px; align-items: flex-end; }
  .mascota-panel { width: 100%; height: min(70vh, 460px); }
  /* En una pantalla de 390 px una bolita de 64 no es un adorno de esquina:
     se sienta encima de lo que hay que tocar (en Mi jornada caía justo sobre
     el selector de cliente). 52 px estorba bastante menos.
     Esto NO lo resuelve del todo —cualquier elemento flotante tapa algo—,
     solo lo reduce. Lo que sí lo resuelve es poder apartarla (se arrastra) o
     apagarla, y desde el 20/08/2026 su interruptor vuelve a estar al alcance
     en móvil, dentro del panel de ⋯ de la barra superior. */
  .mascota-burbuja { width: 52px; height: 52px; }
  .mascota-burbuja::after { left: 20%; top: 13%; }
}

@media (prefers-reduced-motion: reduce) {
  .mascota-panel { transition-duration: .01ms; }
  .mascota.late .mascota-burbuja { animation: none; }
  .mascota-esperando span { animation: none; }
  /* El anillo deja de girar, pero se queda fijo y completo: la esfera tiene que
     seguir viéndose, que era justo el problema a resolver. */
  .mascota-burbuja::before {
    animation: none;
    background: none;
    box-shadow: 0 0 0 2px var(--blue);
  }
}

/* ── Sello de acción ejecutada (en la burbuja del chat) ──────────────── */
/* Deja constancia de lo que AURORA abrió y permite repetirlo de un clic. */
.acc-sello {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--blue); color: var(--text0);
  font-family: inherit; font-size: 1.05rem;
}
.acc-sello:hover { background: var(--bg1); }
.acc-sello i { color: var(--blue); font-size: 1.15rem; }

/* ── Tabla dentro del bocadillo («muéstramelas aquí») ────────────────── */
/* La pinta accPintarTablaIfas con las filas que el navegador ya tiene: aquí no
   llega nada escrito por la IA. Va con scroll propio porque un bocadillo es
   estrecho y una tabla que desborde empujaría la conversación entera. */
.acc-tabla-wrap { margin-top: 10px; }
.acc-tabla-wrap .acc-sello { margin-top: 8px; }
.acc-tabla {
  width: 100%; border-collapse: collapse; font-size: 1.05rem;
  display: block; overflow-x: auto; white-space: nowrap;
}
.acc-tabla th {
  text-align: left; font-weight: 600; color: var(--text2);
  padding: 4px 10px 6px 0; border-bottom: 1px solid var(--border);
}
.acc-tabla td {
  padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border);
  color: var(--text1); vertical-align: middle;
}
.acc-tabla tr:last-child td { border-bottom: none; }
.acc-t-ifa { font-family: var(--font-mono); color: var(--text0); }
/* El motivo es lo único que puede ser largo: se recorta y se lee entero en el
   title. Sin esto, una frase de tres líneas rompe la tabla en un bocadillo. */
.acc-t-motivo { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.acc-tabla-mas { margin-top: 7px; font-size: 1rem; color: var(--text2); }
.acc-tabla-vacia { margin-top: 10px; font-size: 1.05rem; color: var(--text2); }