/* El Peruanito en la esquina de la portada.
 *
 * Abajo a la DERECHA, porque el aviso de cookies ocupa la izquierda y no pueden
 * coincidir: los dos aparecen en la primera visita y taparse el uno al otro
 * sería estrenar el portal con dos cosas peleándose.
 *
 * Por debajo del aviso de cookies en la pila (1300): si los dos están puestos,
 * el que hay que atender primero es el del consentimiento. */

.asfl {
    position: fixed;
    right: 1.25rem;

    /* El suelo no es el borde de la pantalla, es lo que haya debajo.
     *
     * El panel de novedades vive en esta misma esquina, y en el movil ocupa
     * TODO el ancho de abajo: ahi no hay hueco al lado, solo encima. Asi que el
     * muñeco se apoya sobre lo que haya, y el codigo mide cuanto ocupa y lo pone
     * en --asfl-suelo. Sin panel vale cero y se queda donde estaba. */
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px) + var(--asfl-suelo, 0px));
    transition: opacity 0.28s ease, transform 0.28s ease, bottom 0.2s ease;
    z-index: 1250;

    /* Tres sitios con nombre: la nube, el muñeco y la equis.
     *
     * Era una fila suelta y valia mientras la nube vivia DENTRO del enlace del
     * muñeco. Al sacarla --para que la fuente del dato se pudiera pulsar-- pasa
     * a ser un hermano mas, y en el movil tiene que colocarse encima de los
     * otros dos y no a su lado. Con sitios con nombre, eso es cambiar el dibujo
     * de la rejilla; con una fila, habria que cambiar el orden del HTML. */
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: "nube boton cerrar";
    align-items: end;
    gap: 0.25rem;

    opacity: 0;
    transform: translateY(0.75rem);
}

.asfl-nube {
    grid-area: nube;

    /* A la altura de la CABEZA, y contado desde el rastro.
     *
     * La rejilla alinea los bajos, asi que sin este margen la nube se queda al
     * ras del suelo --a la altura de los pies-- y las dos burbujas, que cuelgan
     * por debajo de ella, acaban aun mas abajo: el pensamiento salia de los
     * zapatos.
     *
     * El numero sale de la cuenta, no del ojo. El muñeco mide 3.5rem de caja y
     * se dibuja al 0.875 desde abajo, asi que su coronilla queda a 3.06rem del
     * suelo. El rastro cuelga 1.75rem bajo la nube. Poniendo el bajo de la nube
     * a 3.25rem, la burbuja grande cae hacia 2.7rem y la chica hacia 2rem:
     * las dos sobre el periodico, que es donde tiene la cara. */
    margin-bottom: 3.25rem;
}

.asfl-boton { grid-area: boton; }

.asfl-cerrar {
    grid-area: cerrar;

    /* Al lado de la CABEZA del muñeco, no arriba del todo.
     *
     * Pegada al techo de la rejilla se iba con la nube, que ahora flota tres
     * rem mas arriba: quedaba una equis suelta en el aire, lejos de lo que
     * cierra. Anclada abajo y subida hasta la cabeza, se lee como lo que es:
     * la equis del muñeco. */
    align-self: end;
    margin-bottom: 2.2rem;
}

.asfl[hidden] { display: none; }
.asfl-visible { opacity: 1; transform: none; }

/* ---------- el botón ---------- */

.asfl-boton {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    text-decoration: none;

    /* El área de toque la da el muñeco más su relleno; el enlace no pinta nada
       propio para que lo que se vea sea el personaje y no una caja. */
    -webkit-tap-highlight-color: transparent;
}

.asfl-mascota {
    flex: none;
    display: block;

    /* Se fija el ALTO, no el ancho.
     *
     * Las veintiuna animaciones tienen proporciones distintas, y el paseo es
     * mucho más ancho que alto: el muñeco cruza un lienzo de 900 px. Con el
     * ancho fijo, ese paseo se vería aplastado en un cuarto de su tamaño. Con
     * el alto fijo, en todas aparece igual de grande y solo cambia lo que ocupa
     * a los lados, que es justo lo que hace que el paseo parezca un paseo. */
    /* ---- El alto lo pone la CAJA, y el dibujo se apoya dentro ----
     *
     * Antes la imagen se estiraba al alto de la caja con height: 100%. Eso ataba
     * el tamaño del muñeco al alto del LIENZO, y como cada animacion trae el
     * suyo, la mascota encogia al cambiar de pose. Ahora los lienzos vienen con
     * el muñeco ya igualado y la imagen se dibuja a su tamaño, apoyada abajo:
     * los pies en la misma linea siempre y, en las cuatro que llevan algo
     * encima, el objeto asomando por arriba. */
    height: 3.5rem;
    width: auto;
    display: flex;
    align-items: flex-end;

    /* Un poco de sombra bajo los pies: sin ella, sobre una sección clara el
       muñeco parece pegado y no apoyado. */
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
    transition: transform 0.15s ease-out;
}

/* A su tamaño, y el conjunto reducido de una vez.
 *
 * El 0.875 es 56/64: lo que medía antes la caja frente al lienzo del dibujo.
 * Se aplica igual a todas las poses --por eso no reintroduce el problema-- y
 * mantiene la mascota del portal exactamente del tamaño que tenía.
 *
 * Desde abajo, para que reducir no despegue los pies del suelo. */
.asfl-mascota img {
    height: auto;
    width: auto;
    display: block;
    transform: scale(0.875);
    transform-origin: bottom center;
}

.asfl-boton:hover .asfl-mascota { transform: translateY(-2px) scale(1.04); }
.asfl-boton:active .asfl-mascota { transform: scale(0.94); }

/* ---------- la nube ----------

   Su forma vive en components/_shared/nube.css, que es la que comparten esta
   esquina y la bienvenida del asistente. Aqui solo queda donde se pone. */

/* ---------- la equis ---------- */

.asfl-cerrar {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;

    display: grid;
    place-items: center;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;

    color: var(--tinta-suave, #6b6360);
    background: var(--superficie, #fff);
    border: 1px solid var(--borde, #e3e0dd);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.asfl-cerrar:hover,
.asfl-cerrar:focus-visible {
    color: var(--tinta, #241f1f);
    border-color: var(--tinta-suave, #6b6360);
}

/* La equis está siempre, también cuando no hay globo: es la forma de quitarlo,
   no un adorno del mensaje. Si solo saliera con el globo, quien quisiera cerrarlo
   tendría que esperar a que le hablara. */

/* El rótulo que se oye y no se ve. */
.asfl-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- pantallas pequeñas ---------- */

@media (max-width: 520px) {
    .asfl {
        right: 0.9rem;
        bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px) + var(--asfl-suelo, 0px));
    }

    .asfl-mascota { height: 3rem; }

    /* La nube se pone ENCIMA, no al lado.
     *
     * Al lado de un muñeco de 48 px le quedaban unos 11 rem de ancho, y una
     * frase de siete palabras salia en cinco lineas o recortada. Encima dispone
     * de la pantalla entera menos los margenes, y se lee de una pasada.
     *
     * El muñeco se queda abajo del todo, pegado a la esquina, que es donde el
     * dedo lo espera. */
    /* El muñeco pasa a la DERECHA y la equis a su izquierda.
     *
     * Al reves --que es como estaba-- la nube se queda pegada al borde derecho
     * y su rastro de burbujas baja sobre la equis, no sobre la cabeza: el
     * pensamiento parecia salir del boton de cerrar. Cambiando el orden de la
     * fila de abajo, lo que queda justo debajo del rastro es el muñeco. */
    .asfl {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "nube   nube"
            "cerrar boton";
        justify-items: end;
    }

    /* Y la equis, a la altura de la cabeza igual que en pantalla ancha. */
    .asfl-cerrar { margin-bottom: 1.9rem; }

    .asfl-nube {
        max-width: calc(100vw - 4.5rem);

        /* Aqui la nube va en su propia fila, encima de todo, asi que el margen
           no la sube: solo tiene que dejar sitio al rastro, que son 1.75rem,
           para que las burbujas caigan sobre el muñeco y no detras de el. */
        margin-bottom: 1.4rem;

        /* El rastro, sobre el muñeco: esta pegado al borde derecho de la fila
           y el muñeco tambien, asi que el sitio de siempre vale. */
        --nube-rastro: 0.9rem;
        font-size: 0.78rem;
    }
}

/* ---------- quien no quiere movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
    .asfl,
    .asfl-nube,
    .asfl-mascota {
        transition: none;
    }
    .asfl-boton:hover .asfl-mascota,
    .asfl-boton:active .asfl-mascota { transform: none; }
}