/* =========================================================
   HONDUCOR - Asistente virtual (la guacamaya)
   En reposo la guacamaya se asoma por el borde derecho, saluda y parpadea.
   Al pasar el puntero (o con el foco del teclado) la tarjeta se desliza y pregunta
   "¿En qué puedo ayudarte?". Al hacer clic se abre la ventana del chat.
   ========================================================= */

/* ---------- Botón de la esquina ---------- */
.hc-bot-launcher {
    position: fixed; right: 0; bottom: 22px; z-index: 1040;
    width: 268px; height: 122px; padding: 0; border: 0; background: none; cursor: pointer;
    transform: translateX(148px);            /* en reposo asoman 120 px */
    translate: 280px 0;                      /* fuera de la pantalla hasta que el sitio está listo */
    transition: transform .55s var(--hc-ease), translate .9s var(--hc-ease), opacity .3s;
    -webkit-tap-highlight-color: transparent;
}
.hc-bot.is-ready .hc-bot-launcher { translate: 0 0; }
.hc-bot-launcher:hover, .hc-bot-launcher:focus-visible { transform: translateX(0); }
.hc-bot-launcher:focus-visible { outline: 3px solid #1F569C; outline-offset: 2px; border-radius: 18px 0 0 18px; }
.hc-bot.is-open .hc-bot-launcher { opacity: 0; visibility: hidden; transform: translateX(0) scale(.9); }

.hc-bot-card {
    position: absolute; left: 30px; right: 0; bottom: 0; height: 78px;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 16px;
    border-radius: 20px 0 0 20px;
    background: linear-gradient(135deg, #2d68b2 0%, #1F569C 45%, #0b2a52 100%);
    box-shadow: 0 14px 30px rgba(11, 42, 82, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hc-bot-card::before {                        /* brillo suave que recorre la tarjeta */
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .22), transparent 55%);
}
.hc-bot-ask {
    position: relative; z-index: 1;
    padding: .45rem .75rem; border-radius: 10px;
    background: #fff; color: #0b2a52;
    font-family: var(--font-head); font-weight: 700; font-size: .86rem; line-height: 1.2; text-align: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
    opacity: 0; transform: translateX(14px) scale(.96);
    transition: opacity .35s var(--hc-ease) .1s, transform .45s var(--hc-ease) .1s;
}
.hc-bot-launcher:hover .hc-bot-ask, .hc-bot-launcher:focus-visible .hc-bot-ask { opacity: 1; transform: none; }

/* Globo de la esquina mientras Macao se asoma: "¡Hola!" y luego mensajes cortos al azar (js/chatbot.js).
   Su borde derecho queda fijo junto a la cabeza; los mensajes más largos crecen hacia la izquierda (hasta 2 líneas). */
.hc-bot-hello {
    position: absolute; right: calc(100% - 60px); bottom: 68px; z-index: 3;
    width: max-content; max-width: 186px;
    padding: .22rem .6rem; border-radius: 10px 10px 3px 10px;
    background: #F5AE09; color: #2b1a00;
    font-family: var(--font-head); font-weight: 800; font-size: .84rem; line-height: 1.25; text-align: right;
    box-shadow: 0 6px 14px rgba(11, 42, 82, .2);
    transform-origin: 100% 100%;
    transition: opacity .25s, transform .3s var(--hc-ease);
}
.hc-bot-hello.is-out { opacity: 0; transform: scale(.8); }      /* mientras cambia de mensaje */
.hc-bot.is-ready .hc-bot-hello { animation: hc-bot-pop .5s var(--hc-ease) .7s backwards; }   /* sin "forwards": así se puede ocultar al pasar el puntero */
.hc-bot-launcher:hover .hc-bot-hello, .hc-bot-launcher:focus-visible .hc-bot-hello { opacity: 0; transform: scale(.7); }

/* ---------- Guara: la guacamaya ----------
   Capas de la ilustración (img/guara): el cuerpo, el ala izquierda levantada que saluda (gira desde el hombro),
   la cabeza (con el bolso y la correa), los ojos mirando hacia arriba y los párpados.
   En reposo molesta lo menos posible: sobre la tarjeta azul, con el "¡Hola!", solo asoma la cabeza por la esquina,
   inclinada, mirando hacia arriba y parpadeando, como esperando a que alguien pase el puntero. Al pasar el puntero
   sale de cuerpo entero, saluda con el ala y la tarjeta pregunta "¿En qué puedo ayudarte?".
   --m-w: ancho de la guacamaya (alto = 1.069 × ancho). La cabeza ocupa del 25 % al 89 % del ancho (centro 57 %)
   y se recorta al 66 % del alto (un poco de cuello). --visible: lo que asoma el botón en reposo. */
.hc-bot-mascot {
    --m-w: 132px; --visible: 120px;
    position: absolute; left: -16px; bottom: 2px; z-index: 1;
    width: var(--m-w); aspect-ratio: 449 / 480;
    filter: drop-shadow(0 6px 8px rgba(11, 42, 82, .25));
    transform-origin: 57% 55%;
    transform: translate(calc(var(--visible) - 14px - var(--m-w) * .57), calc(var(--m-w) * .481 + 22px)) rotate(-16deg);   /* el cuello entra por el borde inferior de la pantalla */
    clip-path: inset(-120px -120px 34% -120px);                        /* solo la cabeza y un poco de cuello */
    transition: transform .6s cubic-bezier(.34, 1.4, .64, 1), clip-path .45s var(--hc-ease);
}
.hc-bot-launcher:hover .hc-bot-mascot, .hc-bot-launcher:focus-visible .hc-bot-mascot {
    transform: none; clip-path: inset(-120px -120px -40px -120px);
}
.guara-cuerpo, .guara-ala, .guara-cabeza, .guara-mirada, .guara-parpado { position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.guara-cuerpo {
    background-image: url("../img/guara/guara-cuerpo.webp");
    transform-origin: 55.2% 100%;
    animation: guara-espera 2.8s cubic-bezier(.45, 0, .55, 1) infinite;     /* en reposo: leve vaivén de espera */
}
.guara-ala {
    background-image: url("../img/guara/guara-ala.webp");
    transform-origin: 39.7% 59.6%;                    /* el hombro */
    opacity: 0; transition: opacity .25s;             /* en reposo no se ve */
    animation: guara-wave 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
.guara-cabeza { background-image: url("../img/guara/guara-cabeza.webp"); }
.guara-mirada { background-image: url("../img/guara/guara-mirada.webp"); transition: opacity .2s; }   /* ojos hacia arriba */
.guara-parpado {
    background-image: url("../img/guara/guara-parpado.webp");
    opacity: 0;
    animation: guara-parpadea 4.6s infinite;
}
.hc-bot-launcher:hover .guara-ala, .hc-bot-launcher:focus-visible .guara-ala { opacity: 1; }
.hc-bot-launcher:hover .guara-mirada, .hc-bot-launcher:focus-visible .guara-mirada { opacity: 0; }
.hc-bot-launcher:hover .guara-cuerpo, .hc-bot-launcher:focus-visible .guara-cuerpo { animation: guara-sway 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }

/* En reposo: se asoma un poquito más y vuelve, como estirándose para ver */
@keyframes guara-espera {
    0%, 100% { transform: none; }
    40%      { transform: translateY(-4px) rotate(-1.5deg); }
    60%      { transform: translateY(-4px) rotate(-1.5deg); }
}
/* Ala izquierda (ya levantada, como en el dibujo): saluda con vaivenes y se acomoda con un pequeño rebote */
@keyframes guara-wave {
    0%       { transform: rotate(0); }
    14%      { transform: rotate(-13deg); }
    26%      { transform: rotate(3deg); }
    38%      { transform: rotate(-13deg); }
    50%      { transform: rotate(3deg); }
    62%      { transform: rotate(-12deg); }
    76%      { transform: rotate(2deg); }
    86%      { transform: rotate(-3deg); }
    92%, 100% { transform: rotate(0); }
}
/* Cuerpo: se inclina hacia el otro lado mientras saluda y rebota un poco con cada vaivén */
@keyframes guara-sway {
    0%, 100% { transform: none; }
    14%      { transform: rotate(1.6deg) translateY(-3px); }
    26%      { transform: rotate(.6deg) translateY(-1px) scale(1.01, .99); }
    38%      { transform: rotate(1.8deg) translateY(-3px); }
    50%      { transform: rotate(.6deg) translateY(-1px) scale(1.01, .99); }
    62%      { transform: rotate(1.6deg) translateY(-3px); }
    76%      { transform: rotate(.4deg); }
    86%      { transform: rotate(-.6deg) scale(1.02, .98); }
    94%      { transform: none; }
}
@keyframes guara-parpadea {                           /* dos parpadeos rápidos por ciclo */
    0%, 44%, 47.5%, 92%, 95.5%, 100% { opacity: 0; }
    44.5%, 47%, 92.5%, 95% { opacity: 1; }
}
@keyframes hc-bot-pop { from { opacity: 0; transform: scale(.4) translateY(8px); } to { opacity: 1; transform: none; } }

/* Ventana del Agente Postal Virtual de IT: Macao usa solo su conocimiento (js/macao-cerebro-it.js) */
.hc-bot ~ .hpa-widget, body:has(.hc-bot) .hpa-widget { display: none !important; }

/* El botón "volver arriba" sube para no taparse con la guacamaya */
body:has(.hc-bot) .back-to-top { bottom: 158px; }

/* ---------- Ventana del chat ---------- */
.hc-bot-panel {
    position: fixed; right: 18px; bottom: 18px; z-index: 1050;
    width: 380px; height: min(620px, calc(100dvh - 36px));
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 20px; background: #fff;
    box-shadow: 0 30px 70px rgba(11, 42, 82, .28), 0 8px 20px rgba(11, 42, 82, .12);
    transform-origin: 100% 100%;
    transition: width .35s var(--hc-ease), height .35s var(--hc-ease);
}
.hc-bot-panel[hidden] { display: none; }
.hc-bot.is-open .hc-bot-panel { animation: hc-bot-open .4s var(--hc-ease) both; }
.hc-bot.is-expanded .hc-bot-panel { width: min(760px, calc(100vw - 36px)); height: calc(100dvh - 36px); }
@keyframes hc-bot-open { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

.hc-bot-head {
    display: flex; align-items: center; gap: .7rem; padding: .8rem .8rem .8rem 1rem;
    color: #fff; background: linear-gradient(120deg, #1F569C 0%, #0b2a52 85%); border-bottom: 3px solid #F5AE09;
}
.hc-bot-avatar {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.hc-bot-avatar { overflow: hidden; }
.hc-bot-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hc-bot-title { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.hc-bot-title strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.hc-bot-title small { display: flex; align-items: center; gap: .35rem; font-size: .74rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-bot-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25); flex: 0 0 auto; }
.hc-bot-actions { display: flex; gap: .15rem; }
.hc-bot-actions button {
    width: 34px; height: 34px; border: 0; border-radius: 10px;
    display: grid; place-items: center; background: transparent; color: #fff; font-size: .95rem;
    transition: background .2s;
}
.hc-bot-actions button:hover { background: rgba(255, 255, 255, .16); }
.hc-bot-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hc-bot.is-expanded [data-bot-expand] i::before { content: "\f149"; }   /* bi-arrows-angle-contract */

/* Conversación */
.hc-bot-log {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: .7rem;
    padding: 1rem .9rem; background: #f5f6fb;
    scroll-behavior: smooth;
}
.hc-msg { display: flex; gap: .5rem; max-width: 88%; animation: hc-msg-in .35s var(--hc-ease) both; }
.hc-msg-bot { align-self: flex-start; }
.hc-msg-user { align-self: flex-end; }
.hc-msg-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(11, 42, 82, .12); }
.hc-msg-avatar { overflow: hidden; }
.hc-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hc-bubble {
    padding: .6rem .85rem; font-size: .9rem; line-height: 1.45;
    white-space: pre-line; overflow-wrap: anywhere;
}
.hc-msg-bot .hc-bubble { background: #fff; color: var(--hc-ink); border: 1px solid #e6e8f2; border-radius: 4px 16px 16px 16px; box-shadow: 0 2px 8px rgba(11, 42, 82, .05); }
.hc-msg-user .hc-bubble { background: linear-gradient(135deg, #2d68b2, #1F569C); color: #fff; border-radius: 16px 16px 4px 16px; }
.hc-msg-error .hc-bubble { background: #fff6f6; border-color: #f3c7c7; }
.hc-bubble a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hc-msg-bot .hc-bubble a { color: #1F569C; }
@keyframes hc-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Opciones rápidas */
.hc-bot-quick { display: flex; flex-direction: column; gap: .45rem; margin-left: 38px; max-width: calc(88% - 38px); animation: hc-msg-in .35s var(--hc-ease) .1s both; }
.hc-bot-quick button {
    border: 0; border-radius: 12px; padding: .6rem .9rem;
    background: linear-gradient(135deg, #2d68b2, #1F569C); color: #fff;
    font-weight: 700; font-size: .87rem; text-align: center;
    box-shadow: 0 6px 14px rgba(31, 86, 156, .22);
    transition: transform .2s var(--hc-ease), box-shadow .2s var(--hc-ease), filter .2s;
}
.hc-bot-quick button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(31, 86, 156, .3); filter: brightness(1.08); }
.hc-bot-quick button:focus-visible { outline: 3px solid #ffd98a; outline-offset: 2px; }

/* "Escribiendo..." */
.hc-typing { display: inline-flex; gap: 4px; padding: .75rem .9rem; }
.hc-typing span { width: 7px; height: 7px; border-radius: 50%; background: #8a9ab8; animation: hc-typing 1.2s infinite ease-in-out; }
.hc-typing span:nth-child(2) { animation-delay: .15s; }
.hc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hc-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Campo para escribir */
.hc-bot-form { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid #e6e8f2; background: #fff; }
.hc-bot-form input {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 1rem;
    border: 1px solid #dfe2ee; border-radius: 22px; background: #f8f9fc; color: var(--hc-ink); font-size: .92rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.hc-bot-form input:focus { outline: none; border-color: #1F569C; background: #fff; box-shadow: 0 0 0 3px rgba(31, 86, 156, .14); }
.hc-bot-form button {
    flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #2d68b2, #1F569C); color: #fff; font-size: 1rem;
    transition: transform .2s var(--hc-ease), opacity .2s;
}
.hc-bot-form button:hover { transform: scale(1.06); }
.hc-bot-form button:disabled { opacity: .5; transform: none; }
.hc-bot-form button:focus-visible { outline: 3px solid #1F569C; outline-offset: 2px; }
.hc-bot-note { margin: 0; padding: 0 .9rem .6rem; background: #fff; color: var(--hc-muted); font-size: .7rem; text-align: center; }

/* ---------- Celular: la ventana ocupa toda la pantalla ---------- */
@media (max-width: 575.98px) {
    .hc-bot-launcher { width: 238px; height: 106px; bottom: 16px; transform: translateX(132px); }
    .hc-bot-card { height: 66px; left: 26px; }
    .hc-bot-mascot { --m-w: 112px; --visible: 106px; }
    .hc-bot-hello { right: calc(100% - 54px); bottom: 58px; max-width: 168px; font-size: .78rem; }
    .hc-bot-ask { font-size: .8rem; }
    body:has(.hc-bot) .back-to-top { bottom: 136px; }
    .hc-bot-panel, .hc-bot.is-expanded .hc-bot-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; }
    [data-bot-expand] { display: none !important; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .hc-bot-launcher { transition: opacity .2s; }
    .guara-cuerpo, .guara-ala, .guara-parpado, .guara-mirada,
    .hc-msg, .hc-bot-quick, .hc-typing span { animation: none !important; }
    .hc-bot.is-open .hc-bot-panel, .hc-bot.is-ready .hc-bot-hello { animation: none; }
    .hc-bot-log { scroll-behavior: auto; }
}