/* =============================================================
   Asistente virtual "Atenea" — botón flotante + panel de chat.
   Reutiliza los tokens de styles.css (colores, tipografías, --ease).
   ============================================================= */

.atenea-float {
  position: fixed; z-index: 149;
  /* Mismos tokens que .wa-float: comparten el borde derecho y el tamaño, y
     este se apila justo encima con el gap común. Así no pueden desalinearse. */
  right: var(--float-right, 26px);
  bottom: calc(var(--float-bottom, 26px) + var(--float-size, 60px) + var(--float-gap, 12px));
  width: var(--float-size, 60px); height: var(--float-size, 60px); border-radius: 50%;
  /* El isotipo ya es el círculo navy completo: nada de fondo ni de relleno
     detrás, o se ve un disco crema asomando por los bordes. */
  background: none;
  border: none; padding: 0; cursor: pointer; overflow: hidden;
  display: block;
  /* El isotipo es un círculo navy: sobre una sección navy se funde con el
     fondo y queda flotando solo el búho. El aro crema le devuelve el borde.
     Sobre crema es crema sobre crema, así que ahí no se percibe. */
  box-shadow: 0 10px 30px rgba(12, 36, 67, .35),
              0 0 0 2px rgba(255, 247, 230, .92);
  transition: transform .3s var(--ease);
}
.atenea-float:hover { transform: scale(1.08); }
.atenea-float .atenea-mark { width: 100%; height: 100%; display: block; }

/* Presentación que aparece al bajar por la página */
.atenea-saludo {
  position: fixed; z-index: 148;
  right: calc(var(--float-right, 26px) + var(--float-size, 60px) + 14px);
  bottom: calc(var(--float-bottom, 26px) + var(--float-size, 60px) + var(--float-gap, 12px) + 2px);
  max-width: 262px;
  background: var(--cream); color: var(--navy);
  border-radius: 14px 14px 4px 14px;
  padding: 14px 34px 14px 16px;
  box-shadow: 0 14px 36px rgba(12, 36, 67, .28);
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.35;
  cursor: pointer;
  opacity: 0; transform: translateX(10px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.atenea-saludo.is-open { opacity: 1; transform: none; }
.atenea-saludo[hidden] { display: none; }
.atenea-saludo p { margin: 0; }
.atenea-saludo strong { font-family: var(--font-display); }
.atenea-saludo-cerrar {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--navy-40); font-size: 17px; line-height: 1; padding: 2px 4px;
}
.atenea-saludo-cerrar:hover { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .atenea-saludo { transition: none; transform: none; }
}

.atenea-panel[hidden] { display: none; }
.atenea-panel {
  position: fixed; z-index: 151;
  right: var(--float-right, 26px);
  bottom: calc(var(--float-bottom, 26px) + var(--float-size, 60px) + var(--float-gap, 12px));
  width: 384px; max-width: calc(100vw - 32px);
  height: 520px;
  /* Descuenta la altura del header y un margen, así el panel nunca queda
     pisado por la barra de navegación al abrirlo desde Inicio. */
  max-height: calc(100dvh - var(--header-h, 84px) - 116px);
  background: var(--cream);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(12, 36, 67, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
  /* 6.5 apertura: sube y se abre desde la esquina del botón */
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.atenea-panel.is-open { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .atenea-panel { transition: none; transform: none; }
}

.atenea-header {
  background: var(--navy); color: var(--cream);
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
}
.atenea-header-id { display: flex; align-items: center; gap: 10px; }
.atenea-header-icon {
  /* Sobre el navy del encabezado el glifo va en crema y sin disco detrás */
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.atenea-header-icon .atenea-mark { width: 100%; height: 100%; object-fit: contain; }

.atenea-header-text { display: flex; flex-direction: column; line-height: 1.3; }
.atenea-header-text strong { font-family: var(--font-display); font-size: 15px; }
.atenea-header-text span { font-size: 12px; opacity: .75; }
.atenea-close {
  background: none; border: none; color: var(--cream);
  font-size: 22px; line-height: 1; cursor: pointer;
  padding: 4px 8px; opacity: .8;
}
.atenea-close:hover { opacity: 1; }

.atenea-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

.atenea-bubble { max-width: 88%; font-size: 14px; line-height: 1.45; }
.atenea-bubble p { margin: 0 0 6px; }
.atenea-bubble p:last-child { margin-bottom: 0; }
.atenea-bubble--bot {
  align-self: flex-start;
  background: #fff; color: var(--navy);
  border-radius: 4px 14px 14px 14px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(12, 36, 67, .08);
}
.atenea-bubble--user {
  align-self: flex-end;
  background: var(--navy); color: var(--cream);
  border-radius: 14px 4px 14px 14px;
  padding: 10px 14px;
}
.atenea-typing { opacity: .6; font-style: italic; }
.atenea-ai-disclaimer {
  font-size: 11px; font-style: italic; color: var(--navy-40);
  border-top: 1px solid rgba(12, 36, 67, .12);
  margin-top: 8px; padding-top: 6px;
}

.atenea-wa-btn {
  display: inline-block; margin-top: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--red);
}
.atenea-wa-btn:hover { text-decoration: underline; }

.atenea-menu {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.atenea-chip {
  text-align: left; cursor: pointer;
  background: #fff; color: var(--navy);
  border: 1px solid rgba(12, 36, 67, .15);
  border-radius: 10px; padding: 10px 14px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  transition: border-color .2s ease, background .2s ease;
}
.atenea-chip:hover { border-color: var(--red); background: var(--cream-80); }

.atenea-back {
  align-self: flex-start; cursor: pointer;
  background: none; border: none; color: var(--red);
  font-size: 13px; font-weight: 600; padding: 0 0 8px;
}
.atenea-back:hover { text-decoration: underline; }

.atenea-question-list { display: flex; flex-direction: column; gap: 6px; }
.atenea-question {
  text-align: left; cursor: pointer;
  background: #fff; color: var(--navy);
  border: 1px solid rgba(12, 36, 67, .12);
  border-radius: 10px; padding: 9px 12px;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.35;
  transition: border-color .2s ease;
}
.atenea-question:hover { border-color: var(--red); }

.atenea-input-row {
  flex: 0 0 auto; display: flex; gap: 8px;
  padding: 12px 18px; border-top: 1px solid rgba(12, 36, 67, .1);
  background: var(--cream);
}
.atenea-input-row input {
  flex: 1 1 auto; border: 1px solid rgba(12, 36, 67, .2);
  border-radius: 10px; padding: 10px 12px;
  font-family: var(--font-body); font-size: 14px;
  background: #fff; color: var(--navy);
}
.atenea-input-row input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.atenea-input-row button {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: var(--red); color: var(--cream); border: none;
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.atenea-input-row button:disabled,
.atenea-input-row input:disabled { opacity: .55; cursor: default; }

.atenea-legal {
  flex: 0 0 auto; font-size: 10.5px; line-height: 1.4;
  color: var(--navy-40); text-align: center;
  padding: 6px 14px 12px; margin: 0;
}

@media (max-width: 520px) {
  .atenea-panel {
    left: 12px; width: auto; height: auto;
    max-height: calc(100dvh - var(--header-h, 84px) - 108px);
  }
  /* Al lado del botón no entra: la presentación se apoya encima */
  .atenea-saludo {
    right: var(--float-right, 26px);
    bottom: calc(var(--float-bottom, 26px) + var(--float-size, 60px) * 2 + var(--float-gap, 12px) + 12px);
    max-width: min(78vw, 262px);
    border-radius: 14px 14px 14px 4px;
  }
}

/* Cuando el panel está abierto en mobile, evita que el fondo scrollee detrás. */
html.atenea-open { overflow: hidden; }
@media (min-width: 521px) {
  html.atenea-open { overflow: auto; }
}