/* =====================================================================
   TDR BOT
   =====================================================================
   La figura, sus poses y animaciones, el bocadillo, su barra, la fila de
   dormido y el boton del sueno.

   Se carga solo si TDR Bot esta encendido en Configurar.
   Va DESPUES de tdrsearch.css y ANTES de tdrsearch-ia.css.
   ===================================================================== */

/* --------------------------------------------------------------------
   Asistente del garaje. Cuatro poses sobre el MISMO dibujo SVG:
     - quieto     : de frente, balanceo suave, parpadeo y antena latiendo
     - hablando   : de frente, se inclina y saluda con el brazo
     - buscando   : de frente, ojos apagados y linea de escaneo
     - senalando  : DE PERFIL, girado hacia el formulario y apuntando
   La pose de perfil no es otro dibujo: es la misma figura con la cara
   corrida hacia un lado, el ojo lejano oculto, el brazo de fuera
   escondido y cabeza y cuerpo estrechados. Sale mas barato que mantener
   dos ilustraciones y no se pueden desincronizar entre ellas.
   No hay imagenes ni fuentes externas: todo es SVG en linea.
   -------------------------------------------------------------------- */

/* Va debajo del garaje y las marcas, a lo ancho de los dos: bocadillo a
   la izquierda y robot a la derecha. Al vivir dentro del lateral, su
   altura no depende de lo larga que sea la tira de productos. */

/* Rejilla de tres carriles -bocadillo | boton | figura- en vez de una
   fila centrada. Centrando la fila, cambiar el texto cambiaba su ancho y
   TDR Bot se movia de sitio: al pasarle el raton por encima el bocadillo
   se hacia mas corto, el bot se desplazaba, se escapaba del raton y el
   guino entraba y salia en bucle. Con el primer carril en 1fr, el borde
   derecho de la figura cae SIEMPRE en el mismo sitio, diga lo que diga el
   bocadillo y este o no el boton. */

/* Carriles FIJOS, no colocacion automatica. Con el boton oculto solo
   quedan dos elementos, y la colocacion automatica metia la figura en el
   carril del boton: se quedaba 14px a la izquierda de donde estaba con el
   boton puesto. Justo el salto que se veia al pasar el raton. */

/* TODOS en la fila 1, explicitamente. Con la columna puesta a mano pero
   la fila al aire, el colocador automatico avanza y no retrocede: al
   llegar el boton de dormir a la columna 4, la figura -que pide la 3- ya
   no cabia detras y se iba a una segunda fila. La barra se partia en dos
   y crecia o menguaba con el bocadillo. */

.tdrsearch-bot-bubble,
.tdrsearch-bot-cta,
.tdrsearch-bot-figure,
.tdrsearch-bot-sleep {
    grid-row: 1;
}

/* Y de pie en el suelo de la barra: si se quedara centrado en vertical,
   un mensaje de dos lineas lo subiria y uno de tres lo bajaria. */

/* Boton de dormir: cuarto carril, arriba y muy discreto. No tiene que
   competir con nada; solo estar ahi para quien se canse del bot. */

.tdrsearch-bot-sleep:hover,
.tdrsearch-bot-sleep:focus-visible {
    color: var(--alpha-ui-color-text-soft, #5f6773);
    border-color: var(--alpha-ui-color-border-strong, #dbdbdb);
}

/* ---- Pose "espabilando": se estira al despertarse ----
   Ojo con el signo: los brazos salen del cuerpo hacia ABAJO y afuera, asi
   que para levantarlos hay que girar el de la izquierda en sentido horario
   y el de la derecha al reves. Con los signos cambiados -que es como salio
   a la primera- no se estiraba: se cruzaba de brazos. */

.tdrsearch-bot.is-waking .tdrsearch-bot-arm--far {
    transform: rotate(85deg);
}

.tdrsearch-bot.is-waking .tdrsearch-bot-arm--near {
    transform: rotate(calc(-85deg * var(--tdrsearch-bot-lado, 1)));
}

.tdrsearch-bot.is-waking .tdrsearch-bot-head {
    transform: rotate(calc(3deg * var(--tdrsearch-bot-lado, 1))) translateY(-2px);
}

/* Una sola vez, no en bucle: es el momento de espabilar, no un estado. */

.tdrsearch-bot.is-waking .tdrsearch-bot-figure {
    animation: tdrsearch-bot-stretch .8s ease-out 1;
}

@keyframes tdrsearch-bot-stretch {
    0%   { transform: translateY(6px) scale(.94); }
    55%  { transform: translateY(-5px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}

/* ---- Pose "dormido": ojos cerrados, cabeza caida y "zzz" ---- */

.tdrsearch-bot-zzz {
    transition: opacity .3s ease;
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-zzz {
    opacity: 1;
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-eye {
    /* Cerrados del todo, no entornados: es lo que separa "dormido" de
                   "buscando". */
    animation: none;
    transform: scaleY(.06);
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-head {
    transform: rotate(calc(-9deg * var(--tdrsearch-bot-lado, 1))) translate(calc(-2px * var(--tdrsearch-bot-lado, 1)), 3px);
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-arm--far {
    transform: rotate(calc(24deg * var(--tdrsearch-bot-lado, 1)));
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-arm--near {
    transform: rotate(calc(-24deg * var(--tdrsearch-bot-lado, 1)));
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-figure {
    animation: tdrsearch-bot-sigh 4.2s ease-in-out infinite;
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-z {
    animation: tdrsearch-bot-zzz 2.4s ease-in-out infinite;
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-z--2 {
    animation-delay: .35s;
}

.tdrsearch-bot.is-sleeping .tdrsearch-bot-z--3 {
    animation-delay: .7s;
}

@keyframes tdrsearch-bot-zzz {
    0%      { opacity: 0; transform: translateY(4px); }
    30%     { opacity: 1; }
    70%     { opacity: 1; }
    100%    { opacity: 0; transform: translateY(-6px); }
}

/* Lo unico que queda cuando duerme: texto e icono, sin caja. Sin borde
   ni esquinas redondeadas -no es una pastilla, es un enlace-. Late en
   opacidad para que se note que sigue ahi esperando; un halo de sombra,
   sin borde que lo sujete, quedaba flotando en el aire. */

/* Fila del bot dormido. Mide y se coloca igual que la barra del bot
   (mismo ancho maximo, mismo centrado, mismo relleno) por un motivo muy
   concreto: asi la interrogacion puede caer EXACTAMENTE donde estaba el
   boton de mandarlo a dormir, y el cambio no mueve nada de sitio. */

.tdrsearch-bot-asleep[hidden] {
    display: none;
}

.tdrsearch-bot-asleep {
    display: flex;
    align-items: center;
    /* A la derecha, no centrados. Con el bot dormido la barra se queda
               vacia y dos cosas sueltas en mitad de la nada parecen el contenido
               principal de la pantalla, cuando son lo secundario: un enlace para
               recuperarlo y su juguete. Arrinconados a la derecha ocupan el sitio
               que les toca y dejan la barra en paz. */
    justify-content: flex-end;
    gap: var(--alpha-ui-space-sm, .5rem);
    width: 100%;
    /* SIN MARGENES, y con el alto de los controles de la barra.
        
               El problema que resolvian los 20px era que la fila se quedaba sin
               altura y la barra se veia aplastada. Pero un margen resuelve eso
               ANADIENDO sitio: 40px que se suman a lo que ya ocupa el pie, y por
               eso la fila acababa asomando por debajo de la barra de TDR Bot.
        
               Darle el alto de un control hace lo mismo por dentro: la fila mide
               lo que mide un boton -que es lo unico que lleva-, se queda centrada
               y no empuja a nadie. Es la misma medida que usan "Preguntame algo",
               el microfono y el interruptor, asi que la barra mide igual este el
               bot despierto o dormido. */
    margin: 0;
    /* Y su propio aire arriba y abajo. Sin el, la fila mide exactamente lo
       que mide el boton y "Despertar a TDR Bot" sale pegado a las dos
       lineas de la barra, como si se hubiera colado ahi. El relleno da
       altura a la fila SIN margenes: sigue sin empujar a nadie, y la barra
       dormida pasa de 36 a 60 px, que es la mitad de lo que ocupa el bot
       despierto -90- y se lee como una banda, no como una rendija. */
    padding: var(--alpha-ui-space-sm, .75rem) 0;
    min-height: var(--tdrsearch-bar-control, 36px);
}

/* El boton de despertar lleva "margin: auto" a los lados desde que estaba
   solo, y dentro de esta fila ese auto se come todo el hueco libre y manda
   la interrogacion a la esquina. Aqui se anula: los centra el flex. */

.tdrsearch-bot-asleep .tdrsearch-bot-wake {
    margin-left: 0;
    margin-right: 0;
}

/* Boton blanco, el mismo que "Preguntame algo": son las dos maneras de
   dirigirse al bot y no habia motivo para que se vieran distintas. Mismo
   alto que el resto de la barra, que vive en --tdrsearch-bar-control. */

.tdrsearch-bot-wake {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    height: var(--tdrsearch-bar-control, 36px);
    margin: 0;
    padding: 0 1rem;
    background: var(--alpha-ui-color-white, #ffffff);
    border: var(--alpha-ui-border-width, 1px) solid var(--alpha-ui-color-border-strong, #dbdbdb);
    border-radius: var(--alpha-ui-radius-pill, 999rem);
    color: var(--alpha-ui-color-text, #161616);
    font-family: inherit;
    font-size: var(--alpha-ui-text-button, .875rem);
    font-weight: var(--alpha-ui-font-weight-medium, 500);
    line-height: 1;
    cursor: pointer;
    /* Sin latido: un boton con marco ya se ve. El parpadeo tenia sentido
               cuando era texto suelto y podia pasar desapercibido. */
    animation: none;
}

.tdrsearch-bot-wake:hover,
.tdrsearch-bot-wake:focus-visible {
    border-color: var(--alpha-ui-color-text-soft, #5f6773);
    background: var(--alpha-ui-color-bg-soft, #f4f6f8);
    color: var(--alpha-ui-color-text, #161616);
    outline: 0;
    text-decoration: none;
    animation: none;
}

@keyframes tdrsearch-bot-wake-pulse {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1; }
}

/* Imprescindible: display:flex de autor le gana al [hidden]{display:none}
   del navegador. */

.tdrsearch-bot-wake[hidden] {
    display: none;
}

.tdrsearch-bot[hidden] {
    display: none;
}

.tdrsearch-bot-bubble {
    position: relative;
    background: var(--alpha-ui-color-white, #ffffff);
    border: 1px solid var(--alpha-ui-color-border-strong, #dbdbdb);
    border-radius: var(--alpha-ui-radius-sm, 10px);
    padding: .6rem .7rem;
    font-size: var(--alpha-ui-text-button, .875rem);
    line-height: 1.45;
    color: var(--alpha-ui-color-heading, #333333);
    text-align: center;
}

/* Pico del bocadillo, apuntando al robot. */

/* Pico del bocadillo: apunta de lado al robot, que ahora esta al lado y
   no debajo. */

.tdrsearch-bot-bubble::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: var(--alpha-ui-color-white, #ffffff);
    border-right: 1px solid var(--alpha-ui-color-border-strong, #dbdbdb);
    border-bottom: 1px solid var(--alpha-ui-color-border-strong, #dbdbdb);
    transform: rotate(-45deg);
}

/* 500 y no 420: a 420 los avisos mas largos se iban a tres lineas, el
   bocadillo crecia mas que la figura y con el panel a media altura toda
   la barra bajaba. A 500 el mas largo cabe en dos. */

.tdrsearch-bot-bubble strong {
    color: var(--alpha-ui-color-text, #161616);
}

.tdrsearch-bot-cta[hidden] {
    display: none;
}

/* La flecha apunta al boton que tiene al lado. */

.tdrsearch-bot-arrow {
    transform: rotate(-90deg);
    animation: tdrsearch-bot-nudge 1.4s ease-in-out infinite;
}

.tdrsearch-bot-btn {
    background: var(--alpha-ui-color-primary, #e10613);
    color: var(--alpha-ui-color-white, #ffffff);
    border: none;
    border-radius: var(--alpha-ui-radius-lg, 22px);
    padding: .45rem 1rem;
    font-size: var(--alpha-ui-text-helper, .8125rem);
    font-weight: var(--alpha-ui-font-weight-bold, 700);
    cursor: pointer;
}

.tdrsearch-bot-btn:hover {
    background: var(--alpha-ui-color-primary-hover, #be0611);
}

.tdrsearch-bot-figure {
    line-height: 0;
    /* Sin esto el robot se encoge dentro de la fila del pie y sale
                   aplastado (visto en video). */
    flex: 0 0 auto;
    /* Se puede molestar al bot pasandole el raton por encima; el cursor lo
                   insinua sin prometer que sea un boton. */
    cursor: help;
    animation: tdrsearch-bot-float 3.2s ease-in-out infinite;
}

.tdrsearch-bot-head,
.tdrsearch-bot-face,
.tdrsearch-bot-body,
.tdrsearch-bot-arm,
.tdrsearch-bot-eye {
    transition: transform .35s ease, opacity .35s ease;
}

/* HACIA QUE LADO MIRA EL BOT.
   Todas las poses con lado -la cabeza girada, la inclinacion al hablar, el
   brazo que saluda o senala- estan escritas para el bot a la DERECHA del
   bocadillo, que es donde nacio. En el pie del panel esta a la izquierda,
   asi que tiene que mirar y senalar al otro lado.

   Se resuelve con un signo y no con una copia espejo de cada regla: antes
   solo se habia invertido la pose de senalar, y las demas -dormido,
   despertando, triste, hablando- seguian mirando al lado de antes, o sea
   hacia afuera de la pantalla. Con el signo, quien mueva una pose la
   mueve una vez y las dos orientaciones salen solas. */

.tdrsearch-bot {
    --tdrsearch-bot-lado: 1;
}

.tdrsearch-panel-foot .tdrsearch-bot {
    --tdrsearch-bot-lado: -1;
}

.tdrsearch-bot-head {
    transform-origin: 36px 31px;
}

.tdrsearch-bot-body {
    transform-origin: 36px 62px;
}

.tdrsearch-bot-eye {
    animation: tdrsearch-bot-blink 4.5s ease-in-out infinite;
    transform-origin: center;
}

.tdrsearch-bot-eye--near {
    animation-delay: .08s;
}

.tdrsearch-bot-arm--near {
    transform-origin: 53px 58px;
}

.tdrsearch-bot-arm--far {
    transform-origin: 19px 58px;
}

/* ---- Pose "hablando": de frente, inclinado y saludando ---- */

.tdrsearch-bot.is-talking .tdrsearch-bot-figure {
    animation: tdrsearch-bot-lean 2.2s ease-in-out infinite;
}

.tdrsearch-bot.is-talking .tdrsearch-bot-arm--near {
    animation: tdrsearch-bot-wave 1.1s ease-in-out infinite;
}

/* ---- Pose "soltando un aviso": la boca se abre y se cierra ---- */

.tdrsearch-bot-mouth {
    transition: opacity .2s ease;
    transform-origin: 36px 41px;
}

.tdrsearch-bot.is-speaking .tdrsearch-bot-mouth {
    opacity: 1;
    animation: tdrsearch-bot-talk .38s ease-in-out infinite;
}

.tdrsearch-bot.is-speaking .tdrsearch-bot-figure {
    animation: tdrsearch-bot-lean 2.2s ease-in-out infinite;
}

@keyframes tdrsearch-bot-talk {
    0%, 100% { transform: scaleY(.3); }
    50%      { transform: scaleY(1); }
}

/* ---- Pose "sin resultados": cara de pena y hombros caidos ---- */

.tdrsearch-bot-sadface {
    transition: opacity .3s ease;
}

.tdrsearch-bot.is-sad .tdrsearch-bot-sadface {
    opacity: 1;
}

/* Ojos un poco achinados y caidos: con las cejas y la boca ya basta, no
   hace falta deformarlos mas. */

.tdrsearch-bot.is-sad .tdrsearch-bot-eye {
    animation: none;
    transform: scaleY(.8) translateY(2px);
}

.tdrsearch-bot.is-sad .tdrsearch-bot-head {
    transform: rotate(calc(4deg * var(--tdrsearch-bot-lado, 1))) translateY(2px);
}

/* Los dos brazos cuelgan hacia abajo. Cada uno gira hacia su lado porque
   parten en direcciones opuestas desde el cuerpo. */

.tdrsearch-bot.is-sad .tdrsearch-bot-arm--far {
    transform: rotate(calc(22deg * var(--tdrsearch-bot-lado, 1)));
}

.tdrsearch-bot.is-sad .tdrsearch-bot-arm--near {
    transform: rotate(-22deg);
}

.tdrsearch-bot.is-sad .tdrsearch-bot-figure {
    animation: tdrsearch-bot-sigh 3.6s ease-in-out infinite;
}

/* Mientras se le esta molestando, el bot se queda quieto. Si siguiera
   flotando podria escaparse de debajo del raton, y entonces el guino
   entraria y saldria en bucle delante del visitante. */

.tdrsearch-bot.is-poked .tdrsearch-bot-figure {
    animation: none;
}

@keyframes tdrsearch-bot-sigh {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* ---- Pose "buscando": ojos entornados y escaneo ---- */

.tdrsearch-bot.is-working .tdrsearch-bot-eye {
    /* Con los ojos blancos sobre el hueco oscuro, bajarles la opacidad los
                   hacia desaparecer; entornarlos lee mucho mejor que apagarlos. */
    transform: scaleY(.4);
    animation: none;
}

.tdrsearch-bot.is-working .tdrsearch-bot-scan {
    animation: tdrsearch-bot-scan 1.1s linear infinite;
}

/* ---- Pose "senalando": DE PERFIL, mirando al formulario ---- */

.tdrsearch-bot.is-pointing .tdrsearch-bot-head {
    /* Cabeza estrechada y girada: es lo que hace leer el escorzo. */
    transform: scaleX(.84) translateX(calc(-5px * var(--tdrsearch-bot-lado, 1)));
}

.tdrsearch-bot.is-pointing .tdrsearch-bot-face {
    /* La cara ENTERA -hueco oscuro incluido- se corre al lado hacia el que
                   mira y se estrecha con la cabeza. Mover solo los ojos dejaba el ojo
                   fuera del hueco, pegado al borde de la capucha. */
    transform: translateX(calc(-5px * var(--tdrsearch-bot-lado, 1))) scaleX(.9);
}

.tdrsearch-bot.is-pointing .tdrsearch-bot-eye--far {
    /* El ojo de la otra mitad de la cara deja de verse. */
    opacity: 0;
}

.tdrsearch-bot.is-pointing .tdrsearch-bot-body {
    transform: scaleX(.88);
}

.tdrsearch-bot.is-pointing .tdrsearch-bot-arm--near {
    /* El brazo de fuera se esconde tras el cuerpo... */
    opacity: 0;
}

.tdrsearch-bot.is-pointing .tdrsearch-bot-arm--far {
    /* ...y el de dentro se levanta a senalar, con un vaiven corto. */
    animation: tdrsearch-bot-point 1.6s ease-in-out infinite;
}

.tdrsearch-bot.is-pointing .tdrsearch-bot-figure {
    animation: tdrsearch-bot-float 2.4s ease-in-out infinite;
}

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

@keyframes tdrsearch-bot-lean {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(calc(-4deg * var(--tdrsearch-bot-lado, 1))); }
}

@keyframes tdrsearch-bot-wave {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(calc(-38deg * var(--tdrsearch-bot-lado, 1))); }
}

@keyframes tdrsearch-bot-point {
    0%, 100% { transform: rotate(calc(-42deg * var(--tdrsearch-bot-lado, 1))) translateY(0); }
    50%      { transform: rotate(calc(-42deg * var(--tdrsearch-bot-lado, 1))) translateY(-4px); }
}

@keyframes tdrsearch-bot-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(.1); }
}

@keyframes tdrsearch-bot-scan {
    0%   { opacity: 0; transform: translateY(-8px); }
    20%  { opacity: .9; }
    80%  { opacity: .9; }
    100% { opacity: 0; transform: translateY(8px); }
}

@keyframes tdrsearch-bot-nudge {
    0%, 100% { transform: rotate(-90deg) translateY(0); opacity: .55; }
    50%      { transform: rotate(-90deg) translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tdrsearch-bot-figure,
    .tdrsearch-bot-eye,
    .tdrsearch-bot-arrow,
    .tdrsearch-bot-arm,
    .tdrsearch-bot-scan,
    .tdrsearch-bot.is-talking .tdrsearch-bot-figure,
    .tdrsearch-bot.is-talking .tdrsearch-bot-arm--near,
    .tdrsearch-bot.is-pointing .tdrsearch-bot-figure,
    .tdrsearch-bot.is-sad .tdrsearch-bot-figure,
    .tdrsearch-bot.is-speaking .tdrsearch-bot-figure,
    .tdrsearch-bot.is-speaking .tdrsearch-bot-mouth,
    .tdrsearch-bot.is-sleeping .tdrsearch-bot-figure,
    .tdrsearch-bot.is-sleeping .tdrsearch-bot-z,
    .tdrsearch-bot.is-waking .tdrsearch-bot-figure,
    .tdrsearch-bot-wake,
    .tdrsearch-bot.is-pointing .tdrsearch-bot-arm--far {
        animation: none;
    }

    /* La pose de perfil se mantiene: es informacion, no adorno. */

    .tdrsearch-bot.is-pointing .tdrsearch-bot-arm--far {
        transform: rotate(-42deg);
    }
}

@media (max-width: 767px) {
    .tdrsearch-bot {
        justify-items: center;
        gap: .35rem;
    }

    .tdrsearch-bot-bubble,
    .tdrsearch-bot-cta,
    .tdrsearch-bot-figure,
    .tdrsearch-bot-sleep {
        /* En movil liberamos las colocaciones fijas de escritorio para que
                                   cada pieza pueda recolocarse con el flujo responsive. */
        grid-column: auto;
        grid-row: auto;
    }

    .tdrsearch-bot-bubble {
        justify-self: center;
    }

    /* Apilado si -se lee mejor que apretar el bocadillo a 390px-, pero
       con la figura encogida: es lo unico que hace crecer el pie de
       verdad, y encogida deja de comerse media pantalla. El porcentaje
       se elige en el BO. */

    .tdrsearch-bot-figure {
        align-self: center;
        transform: scale(var(--tdrsearch-mobile-bot-scale, .72));
        transform-origin: center top;
        /* Y que el hueco que ocupa encoja con ella: transform pinta mas
                                   pequeno pero NO devuelve el sitio, asi que el alto se recorta a
                                   mano en la misma proporcion (la figura mide 78px de alto). */
        height: calc(78px * var(--tdrsearch-mobile-bot-scale, .72));
    }

    .tdrsearch-panel-foot .tdrsearch-bot {
        padding: .35rem .5rem .25rem;
    }

    .tdrsearch-bot-bubble::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -7px;
        margin-top: 0;
        margin-left: -6px;
        transform: rotate(45deg);
    }
}

/* ---- LAS CAPAS ---- */

/*
 * Hay DOS capas y cada una tiene una funcion distinta:
 *
 * 1) .tdrsearch-bot-capa-base
 *    Es la capa ORIGINAL de SUPER TDR Bot. Cuelga por detras y se conserva
 *    durante TODO el modo IA, incluidas las poses triste y dormido.
 *
 * 2) .tdrsearch-bot-capa-respuesta
 *    Es la capa GRANDE nueva. Solo sustituye a la original mientras Alpha
 *    esta dando una respuesta y la pose no es triste ni dormida.
 */

.tdrsearch-bot-capa {
    transition: opacity .16s ease;
    pointer-events: none;
}

/* La capa de respuesta rebasa el viewBox original. Permitimos que salga por
   la derecha sin agrandar el grid, el bocadillo ni el pie del buscador. */

.tdrsearch-bot-figure > svg {
    overflow: visible;
}

.tdrsearch-bot-figure {
    position: relative;
    z-index: 2;
}

/* SUPER normal = capa ORIGINAL, siempre. Esto incluye pensando, buscando,
   hablando normal, triste y la secuencia completa de irse a dormir. */

.tdrsearch-bot.is-ia .tdrsearch-bot-capa-base {
    opacity: 1;
}

/* Recuperamos tambien el ondeo original, pequeno y colgado desde los hombros. */

.tdrsearch-bot.is-ia .tdrsearch-bot-capa-base-pano {
    transform-origin: 36px 52px;
    animation: tdrsearch-capa-base-ondear 1.9s ease-in-out infinite;
}

@keyframes tdrsearch-capa-base-ondear {
    0%, 100% { transform: rotate(-2.5deg) skewX(2deg)  scaleX(1);    }
    35%      { transform: rotate(1.5deg)  skewX(-3deg) scaleX(1.04); }
    65%      { transform: rotate(2.5deg)  skewX(-1deg) scaleX(.97);  }
}

/* SOLO durante una respuesta valida de IA cambiamos la capa colgada por la
   capa grande. Si esta triste o durmiendo, vuelve automaticamente la vieja. */

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-capa-base {
    opacity: 0;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-capa-respuesta {
    opacity: 1;
    /* La capa nueva nace cinco pixeles mas abajo para que el cuello quede
                   metido detras del traje y no sobresalga por encima del hombro. */
    transform: translateY(5px);
}

/* La NUEVA solo tiene el ondeo fuerte de respuesta. */

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-capa-respuesta-pano {
    transform-origin: 28px 52px;
    animation: tdrsearch-capa-super-ondear 1.08s cubic-bezier(.45,.05,.45,.95) infinite;
}

@keyframes tdrsearch-capa-super-ondear {
    0%, 100% { transform: translateX(0)    translateY(0)   rotate(-4deg) skewX(4deg)    scaleX(1.00) scaleY(1.00); }
    16%      { transform: translateX(4px)  translateY(-1px) rotate(1deg)  skewX(-7deg)   scaleX(1.08) scaleY(.96); }
    38%      { transform: translateX(11px) translateY(-3px) rotate(7deg)  skewX(-15deg)  scaleX(1.22) scaleY(1.05); }
    58%      { transform: translateX(5px)  translateY(2px)  rotate(-1deg) skewX(7deg)    scaleX(1.10) scaleY(.95); }
    78%      { transform: translateX(13px) translateY(-2px) rotate(8deg)  skewX(-12deg)  scaleX(1.25) scaleY(1.04); }
    90%      { transform: translateX(3px)  translateY(1px)  rotate(0deg)  skewX(3deg)    scaleX(1.06) scaleY(.98); }
}

/* Destellos SOLO cuando hay una tarjeta de producto debajo. La misma
   clase que saca la capa grande garantiza que Alpha encontro el producto
   de verdad: una respuesta normal no activa este efecto. */

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-capa-destellos {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 205, 45, .98));
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello {
    transform-box: fill-box;
    transform-origin: center;
    animation: tdrsearch-destello-dorado 1.75s ease-in-out infinite;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello--2 {
    animation-delay: -.32s;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello--3 {
    animation-delay: -.68s;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello--4 {
    animation-delay: -1.02s;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello--5 {
    animation-delay: -.48s;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello--6 {
    animation-delay: -1.24s;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello--7 {
    animation-delay: -.84s;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-destello--8 {
    animation-delay: -1.46s;
}

@keyframes tdrsearch-destello-dorado {
    0%, 100% { opacity: .18; transform: scale(.55) rotate(0deg); }
    42%      { opacity: 1;   transform: scale(1.30) rotate(18deg); }
    62%      { opacity: .75; transform: scale(.92) rotate(28deg); }
}

/* Contento por el hallazgo: dos guinos rapidos y suaves. Como
   is-super-respuesta solo existe mientras se ofrece un producto, tampoco
   aparece en preguntas, búsquedas, respuestas normales, tristeza o sueño. */

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-eye {
    animation: tdrsearch-bot-guino-contento 2.9s ease-in-out infinite;
}

.tdrsearch-bot.is-ia.is-super-respuesta:not(.is-sad):not(.is-sleeping) .tdrsearch-bot-eye--near {
    animation-delay: .08s;
}

@keyframes tdrsearch-bot-guino-contento {
    0%, 12%, 25%, 100% { transform: scaleY(1) translateY(0); }
    16%                 { transform: scaleY(.10) translateY(1px); }
    20%                 { transform: scaleY(1) translateY(0); }
    23%                 { transform: scaleY(.18) translateY(1px); }
}

/* ---- EL TRAJE ---- */

/* El traje azul y el escudo pertenecen al modo SUPER, no solo al instante
   de respuesta. Asi las animaciones normales siguen siendo SUPER TDR BOT. */

.tdrsearch-bot-torso,
.tdrsearch-bot-tirantes,
.tdrsearch-bot-chapa,
.tdrsearch-bot-escudo {
    transition: fill .2s ease, stroke .2s ease, opacity .2s ease;
}

.tdrsearch-bot.is-ia .tdrsearch-bot-torso {
    fill: #1668d4;
    stroke: #0d4ea3;
}

.tdrsearch-bot.is-ia .tdrsearch-bot-tirantes {
    stroke: #0d4ea3;
}

.tdrsearch-bot.is-ia .tdrsearch-bot-chapa {
    opacity: 0;
}

.tdrsearch-bot.is-ia .tdrsearch-bot-escudo {
    opacity: 1;
}

/* ---- LA NUBE ---- */

.tdrsearch-bot.is-transformando .tdrsearch-bot-nube {
    animation: tdrsearch-nube 620ms ease-out forwards;
}

.tdrsearch-bot.is-transformando .tdrsearch-bot-humo {
    transform-origin: 36px 50px;
    animation: tdrsearch-humo 620ms ease-out forwards;
}

/* Cada bola sale con un pelin de retraso sobre la anterior: saliendo
   todas a la vez parece un globo, escalonadas parece humo. */

.tdrsearch-bot.is-transformando .tdrsearch-bot-humo--2 {
    animation-delay: 40ms;
}

.tdrsearch-bot.is-transformando .tdrsearch-bot-humo--3 {
    animation-delay: 70ms;
}

.tdrsearch-bot.is-transformando .tdrsearch-bot-humo--4 {
    animation-delay: 100ms;
}

.tdrsearch-bot.is-transformando .tdrsearch-bot-humo--5 {
    animation-delay: 130ms;
}

@keyframes tdrsearch-nube {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes tdrsearch-humo {
    0%   { transform: scale(.35) translateY(6px); }
    45%  { transform: scale(1.12) translateY(-2px); }
    100% { transform: scale(1.45) translateY(-10px); }
}

/* Pie inferior: TDR Bot anclado a la izquierda, bocadillo en el centro y
   controles a la derecha, manteniendo el aro de color del botón IA. */

.tdrsearch-panel-foot .tdrsearch-bot {
    border-top: none;
    max-width: none;
    margin: 0;
    padding: .45rem 0 .3rem;
}

.tdrsearch-bot {
    /* Cinco carriles: bocadillo | invitacion | figura | Alpha IA | dormir.
                   El de Alpha IA solo lleva algo si esta encendido en el BO; vacio no
                   ocupa nada, asi que la barra se ve igual que antes. */
    /* La altura la manda SIEMPRE la figura, nunca el bocadillo: asi la
                   barra mide lo mismo diga lo que diga y no sube ni baja al cambiar de
                   mensaje. Con el panel a media altura, crecer aqui movia el bot. */
    position: relative;
    display: grid;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: .7rem .5rem .25rem;
    min-height: 74px;
    border-top: 1px solid var(--alpha-ui-color-bg-soft, #f4f6f8);
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    justify-items: start;
    align-items: center;
    gap: .75rem;
}

.tdrsearch-bot-brand {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: .42rem;
    white-space: nowrap;
}

.tdrsearch-bot-brand-name {
    font-size: var(--alpha-ui-text-button, .875rem);
    font-weight: var(--alpha-ui-font-weight-bold, 700);
    color: var(--alpha-ui-color-text, #161616);
}

.tdrsearch-bot-brand-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--alpha-ui-color-primary, #e10613);
    color: var(--alpha-ui-color-white, #ffffff);
    font-size: .72rem;
    font-weight: var(--alpha-ui-font-weight-bold, 700);
    line-height: 1;
}

/* Las estrellitas de al lado de la pastilla "IA". Van en el rojo de la
   casa y un punto por debajo del nombre en tamano: acompanan al titulo,
   no compiten con el. Sin animacion: esto es un rotulo fijo, y lo que
   parpadea en esta barra es el aro del boton, que si esta pidiendo que
   lo pulsen. */

.tdrsearch-bot-brand-chispas {
    display: inline-flex;
    align-items: center;
    /* El rojo de la casa. A 14px se perdian contra el blanco, asi que van
               al tamano del nombre: acompanan al titulo, y para eso hay que
               verlas. */
    color: var(--alpha-ui-color-primary, #e10613);
    line-height: 1;
}

.tdrsearch-bot-brand-chispas svg {
    /* Tres estrellas piden algo mas de sitio que una: a 18px la pequena
               se convertia en un punto. */
    width: 20px;
    height: 20px;
    display: block;
}

/* El relleno, aqui y no en el SVG.
   Un fill="currentColor" escrito en la etiqueta es un ATRIBUTO DE
   PRESENTACION, y esos pierden contra cualquier regla CSS: al tema le
   basta un "svg path { fill: #333 }" para dejar la estrella negra. Con
   dos clases por delante, esta gana. */

.tdrsearch-bot-brand-chispas svg path {
    fill: currentColor;
}

/* Las dos que acompanan van un punto por debajo de la grande: asi se lee
   una constelacion y no tres estrellas peleandose por el mismo sitio. */

.tdrsearch-bot-brand-chispas .tdrsearch-chispa--2 {
    opacity: .8;
}

.tdrsearch-bot-brand-chispas .tdrsearch-chispa--3 {
    opacity: .62;
}

.tdrsearch-bot-figure {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
}

.tdrsearch-bot-bubble {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
}

.tdrsearch-bot-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    color: var(--alpha-ui-color-primary, #e10613);
    grid-column: 4;
}

.tdrsearch-bot-sleep {
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--alpha-ui-radius-round, 50%);
    color: var(--alpha-ui-color-text-muted, #7b8491);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
    grid-column: 6;
    grid-row: 1;
}

@media (max-width: 767px) {
    .tdrsearch-panel-foot .tdrsearch-bot {
        padding: .35rem 0 .2rem;
    }

    .tdrsearch-bot {
        grid-template-columns: auto 1fr auto auto;
        justify-items: start;
        gap: .45rem;
        min-height: auto;
    }

    .tdrsearch-bot-figure {
        grid-column: 1;
        grid-row: 1;
        transform: scale(var(--tdrsearch-mobile-bot-scale, .72));
        transform-origin: left top;
        height: calc(78px * var(--tdrsearch-mobile-bot-scale, .72));
    }

    .tdrsearch-bot-brand {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .tdrsearch-bot-brand-name {
        font-size: .82rem;
        /* En movil el bot se encoge y la fila se apila; el nombre se
           quedaba pegado al borde de arriba de su celda. Pedido por Ivan. */
        padding-top: 10px;
    }

    .tdrsearch-bot-brand-pill {
        height: 1.2rem;
        min-width: 1.7rem;
        font-size: .68rem;
    }

    .tdrsearch-bot-sleep {
        grid-column: 4;
        grid-row: 1;
        align-self: center;
    }

    .tdrsearch-bot-bubble {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        text-align: left;
    }

    .tdrsearch-bot-bubble::after {
        right: auto;
        left: 30px;
        top: -7px;
        bottom: auto;
        margin: 0;
        transform: rotate(135deg);
    }

    .tdrsearch-bot-cta {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
    }
}

/* En la barra final, nada de centrar artificialmente el bot. */

.tdrsearch-panel-foot .tdrsearch-bot {
    text-align: left;
}

/* El globo habla DESDE el robot de la izquierda: la cola apunta a la
   figura y no al lado contrario. La sombra pertenece solo al globo. */

.tdrsearch-panel-foot .tdrsearch-bot-bubble {
    text-align: left;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .06);
}

.tdrsearch-panel-foot .tdrsearch-bot-bubble::after {
    right: auto;
    left: -7px;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--alpha-ui-color-border-strong, #dbdbdb);
    border-top: 1px solid var(--alpha-ui-color-border-strong, #dbdbdb);
    transform: rotate(-45deg);
    box-shadow: -2px -2px 5px rgba(17, 24, 39, .05);
}

/* La luna se alinea de verdad con el botón IA. */

/* Los dos contenedores de la pantalla de Alpha IA envuelven al bot, asi
   que existen SIEMPRE que hay bot, con IA o sin ella. Mientras la IA no
   esta puesta tienen que comportarse como si no existieran: el pie es una
   rejilla y sus hijos son los del bot, no estos dos.

   "display: contents" es justo eso: el elemento no pinta caja y sus hijos
   suben a la rejilla del padre. Estaba en tdrsearch-ia.css y con la IA
   apagada esa hoja no se baja: los dos divs volvian a ser bloques y la
   rejilla del pie perdia de vista al bot. */

.tdrsearch-ia-screen,
.tdrsearch-ia-screen-main {
    display: contents;
}

/* Encima de la capa del bot. Iba en la misma regla que el boton de la IA
   y se fue con ella a tdrsearch-ia.css; con la IA apagada, la luna se
   quedaba sin z-index y por debajo de la figura. */

.tdrsearch-bot-sleep {
    position: relative;
    z-index: 5;
}

.tdrsearch-panel-foot .tdrsearch-bot-sleep {
    align-self: center;
}

@media (max-width: 767px) {
    .tdrsearch-panel-foot .tdrsearch-bot-bubble::after {
        left: 30px;
        top: -7px;
        right: auto;
        bottom: auto;
        border-left: 1px solid var(--alpha-ui-color-border-strong, #dbdbdb);
        border-top: 1px solid var(--alpha-ui-color-border-strong, #dbdbdb);
        border-right: 0;
        border-bottom: 0;
        transform: rotate(45deg);
        box-shadow: -2px -2px 5px rgba(17, 24, 39, .05);
    }
}

@media (max-width: 767px) {
    .tdrsearch-panel-foot .tdrsearch-bot {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas: "figura marca  mandos"
            "globo  globo  globo"
            "oferta oferta oferta";
        gap: var(--alpha-ui-space-sm, .6rem) var(--alpha-ui-space-sm, .75rem);
        align-items: center;
    }

    .tdrsearch-panel-foot .tdrsearch-bot-figure {
        grid-area: figura;
        align-self: center;
    }

    .tdrsearch-panel-foot .tdrsearch-bot-brand {
        grid-area: marca;
        justify-self: start;
    }

    .tdrsearch-panel-foot .tdrsearch-bot-bubble {
        grid-area: globo;
        justify-self: stretch;
        max-width: 100%;
    }

    .tdrsearch-panel-foot .tdrsearch-bot > .tdrsearch-bot-sleep {
        grid-area: mandos;
        justify-self: end;
    }
}

/* ===== v1.16.68 · celebración de búsqueda con éxito ===== */

/* CONTENTO AL TERMINAR DE CARGAR PRODUCTOS.
   Es una celebración corta para la búsqueda normal. La celebración grande de
   SUPER TDR Bot sigue reservada a Alpha cuando encuentra un producto real. */

.tdrsearch-bot.is-happy:not(.is-sad):not(.is-sleeping):not(.is-working):not(.is-super-respuesta) .tdrsearch-bot-figure {
    animation: tdrsearch-bot-happy-hop .42s cubic-bezier(.2,.8,.3,1) 3;
}

.tdrsearch-bot.is-happy:not(.is-sad):not(.is-sleeping):not(.is-working):not(.is-super-respuesta) .tdrsearch-bot-eye {
    animation: tdrsearch-bot-happy-eyes .52s ease-in-out 3;
}

.tdrsearch-bot.is-happy:not(.is-sad):not(.is-sleeping):not(.is-working):not(.is-super-respuesta) .tdrsearch-bot-arm--far {
    animation: tdrsearch-bot-happy-arm-far .42s ease-in-out 3 alternate;
    transform-origin: 19px 58px;
}

.tdrsearch-bot.is-happy:not(.is-sad):not(.is-sleeping):not(.is-working):not(.is-super-respuesta) .tdrsearch-bot-arm--near {
    animation: tdrsearch-bot-happy-arm-near .42s ease-in-out 3 alternate;
    transform-origin: 53px 58px;
}

.tdrsearch-bot.is-happy:not(.is-sad):not(.is-sleeping):not(.is-working):not(.is-super-respuesta) .tdrsearch-bot-mouth {
    opacity: 1;
    transform: scaleX(1.25) scaleY(.7);
}

@keyframes tdrsearch-bot-happy-hop {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-6px) scale(1.03); }
}

@keyframes tdrsearch-bot-happy-eyes {
    0%, 100% { transform: scaleY(1); }
    45% { transform: scaleY(.48) translateY(1px); }
}

@keyframes tdrsearch-bot-happy-arm-far {
    from { transform: rotate(0deg); }
    to { transform: rotate(-58deg) translateY(-1px); }
}

@keyframes tdrsearch-bot-happy-arm-near {
    from { transform: rotate(0deg); }
    to { transform: rotate(58deg) translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
    .tdrsearch-bot.is-happy .tdrsearch-bot-figure,
    .tdrsearch-bot.is-happy .tdrsearch-bot-eye,
    .tdrsearch-bot.is-happy .tdrsearch-bot-arm {
        animation: none !important;
    }
}