/* ==========================================================================
   ASISTENTE VIRTUAL - LO QUE SE ANADIO
   --------------------------------------------------------------------------
   El panel, la burbuja, los mensajes y los chips siguen en css/styles.css:
   ese diseno no cambia y js/asistente.js reutiliza sus clases.

   Aqui esta solo lo que antes no existia porque el asistente no lo hacia:
   la barra para escribir, las tarjetas de resultado y el formulario de
   contacto dentro de la conversacion.
   ========================================================================== */

/* --------------------------------------------------- Barra de escritura */

.asistente-barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid rgba(11, 30, 59, 0.1);
  background: #ffffff;
}

.asistente-entrada {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(11, 30, 59, 0.14);
  border-radius: 999px;
  background: #f6f8fb;
  color: #0b2347;
  font-family: inherit;
  font-size: 0.88rem;
}

.asistente-entrada::placeholder {
  color: #8c9bad;
}

.asistente-entrada:focus {
  outline: none;
  border-color: var(--verde-lima, #8dc63f);
  background: #ffffff;
}

.asistente-enviar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--verde-lima, #8dc63f);
  color: #0b2347;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.asistente-enviar:hover {
  transform: scale(1.06);
  background: var(--verde-lima-profundo, #79b12f);
}

/* Etiqueta solo para lectores de pantalla: el campo necesita nombre
   accesible, pero el placeholder no cuenta como tal. */
.asistente-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------ Resultados de busqueda */

.asistente-resultados {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.asistente-resultado {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(11, 30, 59, 0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #0b2347;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.asistente-resultado:hover {
  border-color: var(--verde-lima, #8dc63f);
  background: rgba(141, 198, 63, 0.08);
}

.asistente-resultado-tipo {
  color: #5c8f16;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* --------------------------------------------- Contacto dentro del chat */

.asistente-contacto {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.asistente-contacto input,
.asistente-contacto textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(11, 30, 59, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: #0b2347;
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

.asistente-contacto input:focus,
.asistente-contacto textarea:focus {
  outline: none;
  border-color: var(--verde-lima, #8dc63f);
}

.asistente-contacto button {
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--verde-lima, #8dc63f);
  color: #0b2347;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.asistente-contacto button:disabled {
  opacity: 0.65;
  cursor: default;
}

.asistente-contacto-aviso {
  margin: 0.1rem 0 0;
  color: #65758b;
  font-size: 0.72rem;
  line-height: 1.4;
}

.asistente-contacto-aviso a {
  color: #5c8f16;
}

.asistente-error {
  margin: 0.2rem 0 0;
  color: #c0392b;
  font-size: 0.76rem;
  line-height: 1.4;
}

/* Un chip que en realidad es un enlace: mismo aspecto, sin subrayado. */
a.reitor-chatbot-chip {
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .asistente-enviar,
  .asistente-resultado {
    transition: none;
  }

  .asistente-enviar:hover {
    transform: none;
  }
}

/* ==========================================================================
   EL CIRCULO FLOTANTE
   --------------------------------------------------------------------------
   Llevaba el logo como <img>, y esa imagen dependia de acertar la ruta desde
   cada carpeta: en /calculadoras/ y abriendo el sitio sin servidor salia el
   icono de imagen rota con el texto alternativo al lado.

   Ahora son dos SVG dibujados en linea, uno para abrir y otro para cerrar.
   No hay archivo que pueda faltar, heredan el color del boton y el estado
   abierto se nota sin leer nada.
   ========================================================================== */

.reitor-chatbot-bubble {
  /* Se recalca aunque ya venga de styles.css: aqui hay elementos absolutos */
  position: relative;
  overflow: visible;
  color: #ffffff;
  background: linear-gradient(140deg, #12335f 0%, #0b2347 55%, #143a6b 100%);
  box-shadow:
    0 18px 34px rgba(11, 30, 59, 0.24),
    0 0 0 4px rgba(140, 203, 50, 0.22);
}

.reitor-chatbot-bubble:hover {
  box-shadow:
    0 22px 40px rgba(11, 30, 59, 0.3),
    0 0 0 6px rgba(140, 203, 50, 0.34);
}

.reitor-chatbot-bubble:focus-visible {
  outline: 3px solid var(--verde-lima, #8dc63f);
  outline-offset: 3px;
}

/* El <img> anterior ya no se pinta nunca */
.reitor-chatbot-bubble-logo {
  display: none;
}

/* ------------------------------------------------------------- Iconos */

.asistente-icono {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

/* Los dos ocupan la misma casilla: se cruzan sin mover el boton.
 *
 * DOS COSAS QUE PARECEN DE MAS Y NO LO SON:
 *
 * 1. min-width / min-height a cero.
 *    css/movil.css da 44x44 como minimo a todo lo que lleve "cerrar" en la
 *    clase, para que se pueda tocar con el dedo. Esa regla apunta a los
 *    CONTROLES; aqui el control es el boton de 72 px y esto es solo el
 *    dibujo de dentro. Con el minimo aplicado la X crecia a 44 px.
 *
 * 2. El centrado con translate en vez de margenes negativos.
 *    Con margin: -13px el centrado dependia de que el icono midiera
 *    exactamente 26 px. Cuando la regla de arriba lo estiro a 44, la X se
 *    fue 9 px abajo y a la derecha. Con translate(-50%, -50%) el centro
 *    sale bien mida lo que mida.
 */
.asistente-icono--cerrar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.6);
}

.reitor-chatbot.active .asistente-icono--chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.reitor-chatbot.active .asistente-icono--cerrar {
  opacity: 1;
  /* El translate se repite: al recomponer transform, omitirlo devolveria
     la X a la esquina. */
  transform: translate(-50%, -50%) rotate(0) scale(1);
}

/* ------------------------------------------------- Punto de disponible */

.asistente-punto {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  background: var(--verde-lima, #8dc63f);
}

.reitor-chatbot.active .asistente-punto {
  opacity: 0;
}

/* --------------------------------------------------------------- Halo */

/* Un latido lento, no un reclamo. Se detiene con el chat abierto: ahi ya
   tiene la atencion y seguir llamandola solo molesta. */
.asistente-halo {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 50%;
  background: rgba(140, 203, 50, 0.3);
  animation: asistenteLatido 2.8s ease-out infinite;
  pointer-events: none;
}

.reitor-chatbot.active .asistente-halo {
  animation: none;
  opacity: 0;
}

@keyframes asistenteLatido {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asistente-halo {
    animation: none;
    opacity: 0;
  }

  .asistente-icono {
    transition: none;
  }
}

/* ==================================================================
   ROBOT ASISTENTE REITOR (sustituye al círculo de chat)
   ------------------------------------------------------------------
   El botón deja de ser un círculo: es el robot, dibujado en SVG dentro
   del propio botón (js/asistente.js), así no depende de rutas ni de un
   servidor. Con el chat abierto vuelve el círculo azul con la X.

   Movimientos, todos suaves y lentos para no distraer:
     - flota arriba y abajo
     - parpadea cada pocos segundos
     - la antena se ilumina
     - mueve la boca al decir cada mensaje del globo (.habla)
     - saluda con la mano de vez en cuando
   ================================================================== */

.reitor-chatbot:not(.active) .reitor-chatbot-bubble {
  width: 78px;
  height: 86px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.reitor-chatbot:not(.active) .reitor-chatbot-bubble:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

.reitor-chatbot:not(.active) .asistente-halo {
  display: none;
}

/* Punto de "en línea" sobre la oreja derecha */
.reitor-chatbot:not(.active) .asistente-punto {
  top: 22px;
  right: 2px;
  bottom: auto;
  width: 12px;
  height: 12px;
}

.asistente-robot {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 86px;
  overflow: visible;
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.reitor-chatbot.active .asistente-robot {
  position: absolute;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

/* Colores */
.ar-sombra { fill: rgba(11, 30, 59, 0.18); }
.ar-cabeza { fill: #ffffff; stroke: #dbe4ee; stroke-width: 1.5; }
.ar-pantalla { fill: #0b1e3b; }
.ar-colita { fill: #8dc63f; }
.ar-oreja { fill: #1e3d6b; }
.ar-ojos rect { fill: #8dc63f; }
.ar-boca { fill: #8dc63f; }
.ar-pecho { fill: #0b1e3b; stroke: #8dc63f; stroke-width: 1.5; }
.ar-brazo rect { fill: #1e3d6b; }

/* Sombra suave del robot sobre la página */
.asistente-robot .ar-cuerpo-todo {
  filter: drop-shadow(0 8px 10px rgba(11, 30, 59, 0.22));
}

/* Flotar */
.ar-cuerpo-todo {
  animation: arFlotar 3.2s ease-in-out infinite;
  transform-box: fill-box;
}

.ar-sombra {
  transform-origin: 42px 88px;
  animation: arSombra 3.2s ease-in-out infinite;
}

@keyframes arFlotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes arSombra {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.82); opacity: 0.7; }
}

/* Parpadeo */
.ar-ojos rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: arParpadeo 4.6s infinite;
}

@keyframes arParpadeo {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

/* Antena */
.ar-bombilla {
  animation: arAntena 2.4s ease-in-out infinite;
}

@keyframes arAntena {
  0%, 100% { fill: #8dc63f; filter: none; }
  50% { fill: #c8ef7a; filter: drop-shadow(0 0 4px rgba(141, 198, 63, 0.9)); }
}

/* Boca: hablar */
.ar-boca {
  transform-box: fill-box;
  transform-origin: center;
}

.reitor-chatbot-bubble.habla .ar-boca {
  animation: arHablar 0.26s ease-in-out 5;
}

@keyframes arHablar {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(2.6) scaleX(0.75); }
}

/* Saludo con la mano derecha, cada pocos segundos */
.ar-brazo--der {
  transform-box: fill-box;
  transform-origin: 50% 10%;
  animation: arSaludo 7s ease-in-out infinite;
}

@keyframes arSaludo {
  0%, 78%, 100% { transform: rotate(0); }
  82% { transform: rotate(-150deg); }
  86% { transform: rotate(-120deg); }
  90% { transform: rotate(-150deg); }
  94% { transform: rotate(-120deg); }
}

.reitor-chatbot-bubble:hover .ar-brazo--der {
  animation: none;
  transform: rotate(-140deg);
}

/* Globo del mensaje: con piquito hacia el robot */
.reitor-chatbot:not(.active) .reitor-chatbot-teaser {
  right: 86px;
  top: 40%;
  border-radius: 14px;
}

.reitor-chatbot:not(.active) .reitor-chatbot-teaser::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: #15385f;
  transform: rotate(45deg);
  border-radius: 2px;
}

@media (max-width: 768px) {
  .reitor-chatbot:not(.active) .reitor-chatbot-bubble,
  .asistente-robot {
    width: 70px;
    height: 77px;
  }

  .reitor-chatbot:not(.active) .reitor-chatbot-teaser {
    right: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-cuerpo-todo,
  .ar-sombra,
  .ar-ojos rect,
  .ar-bombilla,
  .ar-brazo--der,
  .reitor-chatbot-bubble.habla .ar-boca {
    animation: none;
  }
}

/* ==================================================================
   ASISTENTE: PIEZAS NUEVAS (respuestas ricas, fuentes, valoración,
   consentimiento) Y PANTALLA COMPLETA EN EL TELÉFONO
   ================================================================== */

/* Listas de vencimientos, eventos, cursos y respuestas de la IA */
.reitor-chatbot-message .asistente-lista {
  margin: 6px 0 4px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.reitor-chatbot-message .asistente-lista li::marker {
  color: var(--verde-lima, #8dc63f);
}

.asistente-vence {
  display: block;
  font-size: 0.78em;
  color: #5a6b83;
}

/* Fuentes de la respuesta de la IA */
.asistente-fuentes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  font-size: 0.75rem;
}

.asistente-fuentes span {
  color: #5a6b83;
  font-weight: 600;
}

.asistente-fuentes a {
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef3f9;
  color: #1e3d6b;
  font-weight: 600;
  text-decoration: none;
}

.asistente-fuentes a:hover {
  background: #e3f0d2;
  color: #0b1e3b;
}

.asistente-aviso-ia {
  margin: 8px 0 0;
  font-size: 0.7rem;
  color: #7a8aa0;
  font-style: italic;
}

/* ¿Te ayudó? */
.asistente-valorar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #dce5ed;
  font-size: 0.74rem;
  color: #5a6b83;
}

.asistente-valorar button {
  border: 1px solid #dce5ed;
  background: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font: inherit;
  font-weight: 600;
  color: #0f2140;
  cursor: pointer;
}

.asistente-valorar button:hover {
  border-color: var(--verde-lima, #8dc63f);
  background: #f3f9ea;
}

/* Consentimiento antes de enviar datos */
.asistente-consentimiento {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #5a6b83;
}

.asistente-consentimiento input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: #69b20a;
}

/* ---------- Teléfono: pantalla completa, abierto desde el menú ---------- */
@media (max-width: 768px) {
  .reitor-chatbot.movil-abierto {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
  }

  .reitor-chatbot.movil-abierto .reitor-chatbot-bubble {
    display: none;
  }

  .reitor-chatbot.movil-abierto .reitor-chatbot-panel {
    position: fixed;
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.asistente-movil-abierto {
    overflow: hidden;
  }

  body.asistente-movil-abierto .orbit-nav {
    display: none !important;
  }
}

/* ==========================================================================
   ASISTENTE GUIADO (sin IA)
   --------------------------------------------------------------------------
   Todo se elige con botones: el menu principal es un mosaico con icono y
   detalle, cada respuesta cierra con "Hablar con un asesor" / "Volver al
   menu" y abajo queda fija una barra con Menu y el acceso al asesor.
   ========================================================================== */

.reitor-chatbot-panel {
  width: min(380px, calc(100vw - 120px));
  height: min(580px, calc(100vh - 132px));
}

/* La burbuja que lleva el mosaico usa todo el ancho */
.reitor-chatbot-message.bot:has(.asistente-mosaico) {
  max-width: 100%;
  width: 100%;
  background: transparent;
  box-shadow: none;
  padding: 2px 0 0;
}

.reitor-chatbot-message.bot:has(.asistente-mosaico) > p {
  margin: 0 0 2px 2px;
  color: #0b2347;
  font-size: 0.92rem;
  font-weight: 700;
}

.asistente-mosaico {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.reitor-chatbot-chip.asistente-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 92px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(11, 35, 71, 0.08);
  box-shadow: 0 6px 16px rgba(11, 30, 59, 0.05);
}

.asistente-tile-icono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0b2347 0%, #17406f 100%);
  color: #a6d65a;
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}

.asistente-tile-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asistente-tile-texto b {
  color: #0b2347;
  font-size: 0.8rem;
  line-height: 1.25;
}

.asistente-tile-texto small {
  color: #5f7189;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
}

.reitor-chatbot-chip.asistente-tile:hover:not(:disabled) .asistente-tile-icono {
  transform: scale(1.08) rotate(-4deg);
}

/* "Hablar con un asesor" ocupa la fila entera y va en lima */
.reitor-chatbot-chip.asistente-tile--destacada {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  min-height: 0;
  background: linear-gradient(135deg, #0b2347 0%, #163c69 100%);
  border-color: transparent;
}

.asistente-tile--destacada .asistente-tile-icono {
  background: #8dc63f;
  color: #0b2347;
}

.asistente-tile--destacada .asistente-tile-texto b {
  color: #ffffff;
}

.asistente-tile--destacada .asistente-tile-texto small {
  color: rgba(255, 255, 255, 0.72);
}

.reitor-chatbot-chip.asistente-tile--destacada:hover:not(:disabled) {
  background: linear-gradient(135deg, #12305a 0%, #1d4a7f 100%);
}

/* Boton principal dentro de una respuesta (inscribirme, ver calendario...) */
.reitor-chatbot-chip.asistente-chip-principal {
  background: #8dc63f;
  border-color: #8dc63f;
  color: #0b2347;
  font-weight: 700;
}

.reitor-chatbot-chip.asistente-chip-principal:hover:not(:disabled) {
  background: #9fd34f;
  border-color: #9fd34f;
}

/* Cierre de cada respuesta: dos botones en fila, discretos */
.asistente-siguiente {
  grid-template-columns: 1fr 1fr;
}

/* Lo propio de cada respuesta va a lo ancho; abajo, en pareja,
   "Hablar con un asesor" y "Volver al menú". */
.asistente-siguiente > .reitor-chatbot-chip:not([data-accion="asesor"]):not([data-accion="menu"]) {
  grid-column: 1 / -1;
}

.asistente-siguiente .reitor-chatbot-chip {
  text-align: center;
}

.asistente-faq + .asistente-siguiente,
.asistente-resultados + .asistente-siguiente {
  margin-top: 10px;
}

/* Barra fija inferior */
.reitor-chatbot-footer.asistente-nav {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 10px 12px 12px;
}

.asistente-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid rgba(11, 35, 71, 0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #0b2347;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.asistente-nav-btn:hover {
  border-color: #8dc63f;
  transform: translateY(-1px);
}

.asistente-nav-btn--asesor {
  background: #0b2347;
  border-color: #0b2347;
  color: #ffffff;
}

.asistente-nav-btn--asesor .fa-whatsapp {
  color: #8dc63f;
  font-size: 1rem;
}

.asistente-nav-btn--asesor:hover {
  background: #163c69;
  border-color: #163c69;
}

@media (max-width: 1100px) {
  .reitor-chatbot-panel {
    width: min(360px, calc(100vw - 108px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .asistente-tile-icono,
  .asistente-nav-btn {
    transition: none;
  }
}