/* =============================================================================
   BINI EN EL PAGO — el robot de las pantallas sin _Layout
   (Views/Shared/_BiniPago.cshtml + Scripts/binipago.js)
   =============================================================================

   TODO CUELGA DE .bp. Las pantallas del cobro redefinen :root y
   * { box-sizing }, y las del landing traen Bootstrap y media docena de hojas
   mas: aqui no se toca ni una regla de la pagina y cada cosa de Bini dice su
   propio tamano de letra, su color y su caja, para verse igual caiga donde
   caiga.

   POR QUE NO SE CARGA bini.css. Es la hoja del Bini con sesion: trae el foco
   con velo, el globo grande, los formularios del prospecto y crece con cada
   cambio de ese Bini. Las paginas del cobro presumen de pintarse bien "el dia
   que todo lo demas este roto" sin depender de la hoja de nadie, asi que aqui
   va copiado SOLO el robot (los gestos que usa este modo), encerrado en .bp y
   con sus keyframes renombrados bp-*. Si un dia cambia el dibujo
   (_BiniRobot.cshtml), las clases bn-* y bini--* son las mismas.

   z-index BAJO A PROPOSITO (1020): encima de la pagina, debajo de la barra
   fija de Bootstrap (1030), de sus modales (1040+) y del splash del landing.
   Un robot encima de un modal o de la pantalla de carga estorba.
============================================================================= */

.bp,
.bp *,
.bp *::before,
.bp *::after,
.bp-foco,
.bp-foco::after {
    box-sizing: border-box;
}

.bp[hidden],
.bp [hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   El contenedor: robot abajo a la derecha, el globo a su izquierda.
--------------------------------------------------------------------------- */
.bp {
    position: fixed;
    right: 16px;
    bottom: 14px;
    z-index: 1020;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: calc(100vw - 24px);
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: #12263F;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* En el landing (demo personal y asistente) va a la IZQUIERDA: la burbuja de
   Freshchat vive abajo a la derecha. */
.bp.bp--izq {
    right: auto;
    left: 16px;
    flex-direction: row-reverse;
}

/* ---------------------------------------------------------------------------
   El globo
--------------------------------------------------------------------------- */
.bp-globo {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 290px;
    max-height: 70vh;
    margin: 0 0 30px;
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(18, 38, 63, .18), 0 2px 6px rgba(18, 38, 63, .08);
    transform-origin: 100% 100%;
    animation: bp-entra .32s cubic-bezier(.34, 1.56, .64, 1);
}

.bp--izq .bp-globo {
    transform-origin: 0 100%;
}

/* La colita que apunta al robot. */
.bp-globo::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 24px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-top: 1px solid #E6EBF2;
    border-right: 1px solid #E6EBF2;
    transform: rotate(45deg);
}

.bp--izq .bp-globo::after {
    right: auto;
    left: -8px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #E6EBF2;
    border-left: 1px solid #E6EBF2;
}

.bp.bp--min .bp-globo {
    display: none;
}

.bp-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px 9px 14px;
    background: linear-gradient(135deg, #0B1B34, #1B3557);
    border-radius: 15px 15px 0 0;
    color: #fff;
}

.bp-nombre {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

    .bp-nombre small {
        display: block;
        margin-top: 1px;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.3;
        color: rgba(255, 255, 255, .8);
    }

.bp-x {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 21px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

    .bp-x:hover {
        background: rgba(255, 255, 255, .16);
    }

    .bp-x:focus-visible {
        outline: 2px solid #2BE0F5;
        outline-offset: 1px;
    }

.bp-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 2px;
}

.bp-texto {
    min-height: 21px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #33475B;
    cursor: default;
}

    .bp-texto b {
        font-weight: 700;
        color: #0B1B34;
    }

/* La pregunta, arriba de su respuesta. */
.bp-q {
    margin: 0 0 5px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: #0A9CD8;
}

.bp-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 2px 0 8px;
}

.bp-op {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 11px;
    border: 1.5px solid #E6EBF2;
    border-radius: 10px;
    background: #fff;
    color: #12263F;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .bp-op:hover {
        border-color: #0A9CD8;
        background: #F4FBFE;
    }

    .bp-op:focus-visible {
        outline: 2px solid #0A9CD8;
        outline-offset: 1px;
    }

.bp-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 14px 10px;
}

    .bp-acciones:empty {
        display: none;
    }

.bp-bt {
    display: inline-block;
    margin: 0;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

    .bp-bt:focus-visible {
        outline: 3px solid rgba(10, 156, 216, .45);
        outline-offset: 1px;
    }

.bp-bt--si {
    background: #1ab394;
    color: #fff;
}

    .bp-bt--si:hover {
        background: #179d82;
        color: #fff;
    }

.bp-bt--suave {
    background: #F1F5F9;
    color: #33475B;
}

    .bp-bt--suave:hover {
        background: #E2E8F0;
        color: #12263F;
    }

.bp-pie {
    margin: 0;
    padding: 8px 14px 12px;
    border-top: 1px solid #EDF1F6;
    font-size: 12px;
    line-height: 1.5;
    color: #6B7A90;
}

    .bp-pie a {
        color: #0A9CD8;
        text-decoration: underline;
        word-break: break-word;
    }

    .bp-pie[hidden] { display: none; }

    /* "Te paso con una persona": el chat de la pagina, con el contexto escrito. */
    .bp-persona {
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        color: #0A9CD8;
        text-decoration: underline;
        cursor: pointer;
    }

        .bp-persona[disabled] { color: #6B7A90; text-decoration: none; cursor: default; }

/* ---------------------------------------------------------------------------
   El robot (el boton) y la burbuja corta de cuando esta chiquito
--------------------------------------------------------------------------- */
.bp-bot {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 80px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 6px 10px rgba(11, 27, 52, .22));
    -webkit-appearance: none;
    appearance: none;
}

    .bp-bot:focus-visible {
        outline: 3px solid #0A9CD8;
        outline-offset: 3px;
        border-radius: 12px;
    }

/* width: max-content porque va en absoluto dentro de .bp, que mide lo que el
   robot: sin eso el navegador la encoge al ancho de una palabra. */
.bp-burbuja {
    display: none;
    position: absolute;
    right: 76px;
    bottom: 50px;
    width: -webkit-max-content;
    width: max-content;
    max-width: 210px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px 12px 2px 12px;
    background: #0B1B34;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 16px rgba(11, 27, 52, .25);
    cursor: pointer;
    animation: bp-entra .32s cubic-bezier(.34, 1.56, .64, 1);
}

    .bp-burbuja:focus-visible {
        outline: 3px solid #0A9CD8;
        outline-offset: 2px;
    }

.bp.bp--min .bp-burbuja {
    display: block;
}

.bp--izq .bp-burbuja {
    right: auto;
    left: 76px;
    border-radius: 12px 12px 12px 2px;
}

/* ---------------------------------------------------------------------------
   El senalamiento: un aro que rodea el control principal del paso. Sin velo
   oscuro: en la pantalla de pago nada tiene que parecer bloqueado. No se
   lleva los clics (pointer-events: none).
--------------------------------------------------------------------------- */
.bp-foco {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 1019;
    border: 3px solid #0A9CD8;
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(10, 156, 216, .16), 0 0 22px rgba(10, 156, 216, .35);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease, left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}

    .bp-foco.se-ve {
        opacity: 1;
    }

    .bp-foco::after {
        content: "";
        position: absolute;
        top: -9px;
        right: -9px;
        bottom: -9px;
        left: -9px;
        border: 2px solid #2BE0F5;
        border-radius: 16px;
        animation: bp-pulso 1.6s ease-out infinite;
    }

@keyframes bp-entra {
    from { opacity: 0; transform: scale(.86) translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes bp-pulso {
    0% { opacity: .9; transform: scale(.98); }
    100% { opacity: 0; transform: scale(1.06); }
}

/* ---------------------------------------------------------------------------
   Telefono: abierto, el globo es una hoja abajo y el robot se sube a su
   esquina; chiquito, solo el robot y su burbuja.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .bp {
        right: 10px;
        bottom: 10px;
    }

        .bp.bp--izq {
            left: 10px;
        }

    .bp-bot {
        width: 58px;
        height: 64px;
    }

    .bp-burbuja {
        right: 62px;
        bottom: 38px;
        max-width: 190px;
    }

    .bp--izq .bp-burbuja {
        left: 62px;
    }

    .bp:not(.bp--min) {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }

        .bp:not(.bp--min) .bp-globo {
            flex: 1 1 auto;
            width: auto;
            max-height: 58vh;
            margin: 0;
        }

            .bp:not(.bp--min) .bp-globo::after {
                display: none;
            }

        .bp:not(.bp--min) .bp-bot {
            position: absolute;
            right: 6px;
            top: -58px;
            width: 52px;
            height: 58px;
        }

        .bp--izq:not(.bp--min) .bp-bot {
            right: auto;
            left: 6px;
        }
}

/* =============================================================================
   EL ROBOT — copia de Content/bini.css, solo lo que usa este modo, encerrada
   en .bp y con los keyframes renombrados. Gestos: reposo, habla, pregunta,
   piensa, feliz, saluda, senala-i, senala-d.
============================================================================= */
.bp .bi-robot {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

    .bp .bi-robot * {
        transform-box: fill-box;
    }

    .bp .bi-robot .bn-cabeza { transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
    .bp .bi-robot .bn-ojo { transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
    .bp .bi-robot .bn-pupila { transition: transform .25s ease-out; transform: translate(var(--lx, 0px), var(--ly, 0px)); }
    .bp .bi-robot .bn-parpado { transform-origin: 50% 0%; transform: scaleY(0); animation: bp-parpadeo 5.2s infinite; }
    .bp .bi-robot .bn-ojo--d .bn-parpado { animation-delay: .04s; }
    .bp .bi-robot .bn-risa { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s; }
    .bp .bi-robot .bn-ceja { transform-origin: 50% 50%; transition: transform .35s ease; }
    .bp .bi-robot .bn-cuerpo { transform-origin: 50% 100%; }
    .bp .bi-robot .bn-brazo { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
    .bp .bi-robot .bn-brazo--i { transform-origin: 100% 50%; }
    .bp .bi-robot .bn-brazo--d { transform-origin: 0% 50%; }
    .bp .bi-robot .bn-dedo { transition: transform .2s ease; }
    .bp .bi-robot .bn-pinza--i .bn-dedo { transform-origin: 100% 50%; }
    .bp .bi-robot .bn-pinza--d .bn-dedo { transform-origin: 0% 50%; }
    .bp .bi-robot .bn-oruga-linea { stroke-dasharray: 4 5; }
    .bp .bi-robot .bn-pregunta { opacity: 0; transform-origin: 0% 100%; transform: scale(.4); }
    .bp .bi-robot .bn-luz { animation: bp-luz 2.4s ease-in-out infinite; }

@keyframes bp-parpadeo { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes bp-luz { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes bp-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bp-hablar { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(1px) scaleY(.985); } }
@keyframes bp-saludo { 0%, 100% { transform: rotate(-62deg); } 25% { transform: rotate(-88deg); } 50% { transform: rotate(-62deg); } 75% { transform: rotate(-88deg); } }
@keyframes bp-mecer-i { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes bp-mecer-d { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes bp-habla-i { 0%, 100% { transform: rotate(2deg); } 30% { transform: rotate(22deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(26deg); } }
@keyframes bp-habla-d { 0%, 100% { transform: rotate(-4deg); } 25% { transform: rotate(-14deg); } 55% { transform: rotate(-30deg); } 80% { transform: rotate(-10deg); } }
@keyframes bp-duda-i { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(34deg); } }
@keyframes bp-duda-d { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(-34deg); } }
@keyframes bp-rasca { 0%, 100% { transform: rotate(-98deg); } 50% { transform: rotate(-90deg); } }
@keyframes bp-festeja-i { 0%, 100% { transform: rotate(55deg); } 50% { transform: rotate(78deg); } }
@keyframes bp-festeja-d { 0%, 100% { transform: rotate(-55deg); } 50% { transform: rotate(-78deg); } }
@keyframes bp-apunta-i { 0%, 100% { transform: rotate(var(--apunta, 40deg)); } 50% { transform: rotate(calc(var(--apunta, 40deg) + 7deg)); } }
@keyframes bp-apunta-d { 0%, 100% { transform: rotate(var(--apunta, -40deg)); } 50% { transform: rotate(calc(var(--apunta, -40deg) - 7deg)); } }
@keyframes bp-pinza-a-i { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(24deg); } }
@keyframes bp-pinza-b-i { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-24deg); } }
@keyframes bp-pinza-a-d { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-24deg); } }
@keyframes bp-pinza-b-d { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(24deg); } }
@keyframes bp-brinco { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } 55% { transform: translateY(0); } 72% { transform: translateY(-4px); } }
@keyframes bp-curioso { 0%, 100% { transform: scale(1.14); } 50% { transform: scale(1.2); } }
@keyframes bp-pensar { 0%, 100% { transform: translate(-2px, -3px); } 50% { transform: translate(2px, -3px); } }
@keyframes bp-aparece { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }

/* reposo: flota y mece los brazos */
.bp .bi-robot.bini--reposo .bn-todo { animation: bp-flotar 3.6s ease-in-out infinite; }
.bp .bi-robot.bini--reposo .bn-brazo--i { animation: bp-mecer-i 3.6s ease-in-out infinite; }
.bp .bi-robot.bini--reposo .bn-brazo--d { animation: bp-mecer-d 3.6s ease-in-out infinite .4s; }

/* habla: gesticula con las dos manos mientras se escribe el texto */
.bp .bi-robot.bini--habla .bn-cuerpo { animation: bp-hablar .38s ease-in-out infinite; }
.bp .bi-robot.bini--habla .bn-cabeza { transform: rotate(2deg); }
.bp .bi-robot.bini--habla .bn-brazo--i { animation: bp-habla-i 1s ease-in-out infinite; }
.bp .bi-robot.bini--habla .bn-brazo--d { animation: bp-habla-d 1.25s ease-in-out infinite; }
.bp .bi-robot.bini--habla .bn-pinza--i .bn-dedo--a { animation: bp-pinza-a-i .5s ease-in-out infinite; }
.bp .bi-robot.bini--habla .bn-pinza--i .bn-dedo--b { animation: bp-pinza-b-i .5s ease-in-out infinite; }
.bp .bi-robot.bini--habla .bn-pinza--d .bn-dedo--a { animation: bp-pinza-a-d .62s ease-in-out infinite; }
.bp .bi-robot.bini--habla .bn-pinza--d .bn-dedo--b { animation: bp-pinza-b-d .62s ease-in-out infinite; }

/* pregunta: cabeza ladeada, ojos que crecen y el signo de interrogacion */
.bp .bi-robot.bini--pregunta .bn-cabeza { transform: rotate(-9deg) translateY(-3px); }
.bp .bi-robot.bini--pregunta .bn-ojo { animation: bp-curioso 1.6s ease-in-out infinite; }
.bp .bi-robot.bini--pregunta .bn-ceja--i { transform: translateY(-4px) rotate(-12deg); }
.bp .bi-robot.bini--pregunta .bn-ceja--d { transform: translateY(-6px) rotate(10deg); }
.bp .bi-robot.bini--pregunta .bn-pregunta { animation: bp-aparece .5s .15s forwards; }
.bp .bi-robot.bini--pregunta .bn-brazo--i { animation: bp-duda-i 1.6s ease-in-out infinite; }
.bp .bi-robot.bini--pregunta .bn-brazo--d { animation: bp-duda-d 1.6s ease-in-out infinite; }
.bp .bi-robot.bini--pregunta .bn-pinza--i .bn-dedo--a { transform: rotate(22deg); }
.bp .bi-robot.bini--pregunta .bn-pinza--i .bn-dedo--b { transform: rotate(-22deg); }
.bp .bi-robot.bini--pregunta .bn-pinza--d .bn-dedo--a { transform: rotate(-22deg); }
.bp .bi-robot.bini--pregunta .bn-pinza--d .bn-dedo--b { transform: rotate(22deg); }

/* piensa: mientras el pago se confirma o el enlace no deja pagar */
.bp .bi-robot.bini--piensa .bn-pupila { animation: bp-pensar 1.4s ease-in-out infinite; }
.bp .bi-robot.bini--piensa .bn-cabeza { transform: rotate(6deg); }
.bp .bi-robot.bini--piensa .bn-brazo--d { animation: bp-rasca .7s ease-in-out infinite; }
.bp .bi-robot.bini--piensa .bn-brazo--i { transform: rotate(-10deg); }
.bp .bi-robot.bini--piensa .bn-pinza--d .bn-dedo--a { animation: bp-pinza-a-d .35s ease-in-out infinite; }

/* feliz: cuando el pago quedo */
.bp .bi-robot.bini--feliz .bn-todo { animation: bp-brinco 1s ease-in-out 3; }
.bp .bi-robot.bini--feliz .bn-parpado { animation: none; transform: scaleY(0); }
.bp .bi-robot.bini--feliz .bn-risa { opacity: 1; transform: translateY(0); }
.bp .bi-robot.bini--feliz .bn-brazo--i { animation: bp-festeja-i .5s ease-in-out 6; }
.bp .bi-robot.bini--feliz .bn-brazo--d { animation: bp-festeja-d .5s ease-in-out 6 .25s; }
.bp .bi-robot.bini--feliz .bn-pinza--i .bn-dedo--a { transform: rotate(26deg); }
.bp .bi-robot.bini--feliz .bn-pinza--i .bn-dedo--b { transform: rotate(-26deg); }
.bp .bi-robot.bini--feliz .bn-pinza--d .bn-dedo--a { transform: rotate(-26deg); }
.bp .bi-robot.bini--feliz .bn-pinza--d .bn-dedo--b { transform: rotate(26deg); }

/* saluda: al llegar */
.bp .bi-robot.bini--saluda .bn-brazo--d { animation: bp-saludo 1.1s ease-in-out 2; }
.bp .bi-robot.bini--saluda .bn-pinza--d .bn-dedo--a { animation: bp-pinza-a-d .55s ease-in-out 4; }
.bp .bi-robot.bini--saluda .bn-pinza--d .bn-dedo--b { animation: bp-pinza-b-d .55s ease-in-out 4; }

/* senala: el brazo del lado del objetivo apunta hacia el; el angulo lo pone
   binipago.js en --apunta, acotado para que el brazo no se esconda. */
.bp .bi-robot.bini--senala-i .bn-brazo--i { animation: bp-apunta-i 1.2s ease-in-out infinite; }
.bp .bi-robot.bini--senala-d .bn-brazo--d { animation: bp-apunta-d 1.2s ease-in-out infinite; }
.bp .bi-robot.bini--senala-i .bn-cabeza,
.bp .bi-robot.bini--senala-d .bn-cabeza { transform: rotate(-4deg); }

/* ---------------------------------------------------------------------------
   Sin movimiento para quien lo pidio, y fuera de la impresion.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bp .bi-robot *,
    .bp-globo,
    .bp-burbuja,
    .bp-op,
    .bp-foco,
    .bp-foco::after {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .bp,
    .bp-foco {
        display: none !important;
    }
}