/*
 * Agente Proactivo Horbath — widget de captación proactiva.
 * Se inyecta en las páginas de solución (inicio, codeworks, techlab, talenthub, datamind)
 * a través de assets/js/shared-proactive-agent.js. Reutiliza los tokens de marca
 * definidos en shared-header.css (--hh-navy, --hh-blue, --hh-orange, --hh-sky).
 */

.hpa-root{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

.hpa-launcher{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(155deg, var(--hh-navy, #061545), #0a2568);
  color: #fff;
  box-shadow: 0 16px 32px -10px rgba(6, 21, 69, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hpa-launcher:hover{ transform: translateY(-2px); box-shadow: 0 20px 36px -10px rgba(6, 21, 69, .55) }
.hpa-launcher svg{ width: 25px; height: 25px; position: relative; z-index: 2 }
.hpa-launcher .hpa-dot{
  position: absolute; top: -1px; right: -1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--hh-orange, #ff5538); border: 2.5px solid #fff;
  z-index: 3;
}
.hpa-launcher .hpa-ring{
  position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--hh-sky, #38d5ff);
  opacity: 0; animation: hpa-pulse 2.4s ease-out 1.1s 3;
}
@keyframes hpa-pulse{
  0%{ opacity: .55; transform: scale(1) }
  100%{ opacity: 0; transform: scale(1.55) }
}
.hpa-launcher[hidden]{ display:none !important }

.hpa-card{
  width: 306px;
  max-width: calc(100vw - 36px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 28px 64px -20px rgba(6, 21, 69, .45);
  border: 1px solid #e9ebf3;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 72px;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.hpa-card.hpa-show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto }
.hpa-card::before{
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, var(--hh-orange, #ff5538), var(--hh-sky, #38d5ff));
}

.hpa-head{
  background: linear-gradient(155deg, var(--hh-navy, #061545), #0a2568);
  color: #fff;
  padding: 14px 14px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hpa-avatar{
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hh-blue,#0b48e8), var(--hh-sky,#38d5ff));
  display:flex; align-items:center; justify-content:center;
  flex: none; padding: 7px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.hpa-avatar img{ width: 100%; height: 100%; object-fit: contain; display: block; filter: brightness(0) invert(1) }
.hpa-head .hpa-name{ font-size: .87rem; font-weight: 700; letter-spacing: .01em }
.hpa-head .hpa-status{ font-size: .68rem; color: #a9baf0; display:flex; align-items:center; gap:5px; margin-top: 1px }
.hpa-head .hpa-status::before{ content:''; width:6px; height:6px; border-radius:50%; background:#3ddc84; flex: none }
.hpa-close{
  margin-left: auto; background: rgba(255,255,255,.08); border: none; color: #dbe2fb;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; flex: none;
  transition: background .15s ease, color .15s ease;
}
.hpa-close:hover{ background: rgba(255,255,255,.18); color: #fff }

.hpa-body{
  padding: 14px 14px 6px;
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hpa-msg{
  max-width: 88%;
  font-size: .85rem;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 13px;
  animation: hpa-pop .22s ease both;
}
@keyframes hpa-pop{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform: translateY(0) } }
.hpa-msg.hpa-agent{ align-self: flex-start; background: rgba(6,21,69,.055); color: #14213e; border-bottom-left-radius: 3px }
.hpa-msg.hpa-user{ align-self: flex-end; background: var(--hh-blue,#0b48e8); color: #fff; border-bottom-right-radius: 3px }

.hpa-typing{
  align-self: flex-start; display: flex; gap: 3px; padding: 9px 12px;
  background: rgba(6,21,69,.055); border-radius: 13px;
}
.hpa-typing span{ width:5px; height:5px; border-radius:50%; background:#8b93b8; animation: hpa-blink 1.2s infinite }
.hpa-typing span:nth-child(2){ animation-delay: .2s }
.hpa-typing span:nth-child(3){ animation-delay: .4s }
@keyframes hpa-blink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }

.hpa-choices{
  display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 14px 12px;
}
.hpa-choices button{
  font-family: inherit; font-size: .79rem; font-weight: 600; padding: 7px 13px;
  border-radius: 999px; border: 1.5px solid #dfe3f0; background: #fff; color: #1c2440;
  cursor: pointer; -webkit-appearance:none; appearance:none; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hpa-choices button:hover{ border-color: var(--hh-blue,#0b48e8); color: var(--hh-blue,#0b48e8); background: rgba(11,72,232,.05) }

.hpa-cta-row{ padding: 4px 14px 14px }
.hpa-cta{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #ff6a45, var(--hh-orange, #ff5538)); color: #fff; font-family: inherit;
  font-size: .85rem; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: 0 16px 28px -10px rgba(255,85,56,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hpa-cta:hover{ transform: translateY(-1px); box-shadow: 0 20px 32px -10px rgba(255,85,56,.6) }
.hpa-cta svg{ width: 16px; height: 16px; flex: none }
.hpa-foot-note{
  padding: 8px 14px 14px; font-size: .68rem; color: #8b93b8; text-align: center; line-height: 1.45;
}

@media (max-width: 420px){
  .hpa-root{ right: 12px; bottom: 12px }
  .hpa-card{ width: calc(100vw - 24px) }
}

@media (prefers-reduced-motion: reduce){
  .hpa-card, .hpa-msg{ transition-duration: .01ms; animation-duration: .01ms }
  .hpa-launcher .hpa-ring{ display: none }
}