/* ═══ La perrovaquita — INTERFAZ Y ADAPTACIÓN ══════════════════════════════
   Lo que RODEA al personaje: la barra de acciones, los corazones de la caricia, los
   dos estados de "quítamela de en medio", el responsive y el menos movimiento.

   SE CARGA LA ÚLTIMA de las tres, y el orden importa: el bloque de
   prefers-reduced-motion apaga animaciones y transiciones declaradas en las otras
   dos, y con la misma especificidad gana la hoja que se cargue después. Puesta
   antes, la mascota seguiría moviéndose para quien pidió que no lo hiciera.

   AQUÍ SÍ MANDA LA PALETA. Al revés que el personaje —cuyos colores van escritos
   porque son suyos y no de la interfaz—, la barra es interfaz de la plataforma y
   sale de --edu-*, así que acompaña al tema como cualquier otro panel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Corazones de la caricia ──────────────────────────────────────────────── */
/* Seis nodos FIJOS que el JS recicla, no creados al vuelo: crear y destruir
   elementos en cada movimiento del ratón genera basura para el recolector y saltos
   de fotograma en un móvil modesto.

   En HTML y no en SVG para que colocarlos donde está el cursor no exija convertir
   coordenadas del viewBox: basta un translate en píxeles. */
.edu-mascota__corazones {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.edu-mascota__corazon {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--pv-corazon);
    font-size: .9rem;
    opacity: 0;
    /* translate3d: cada corazón vive en su capa y moverlo no toca el diseño. */
    transform: translate3d(var(--pv-cx, 0px), var(--pv-cy, 0px), 0) scale(.4);
    will-change: transform, opacity;
}

/* La clase la pone y la quita el JS para relanzar la animación en el mismo nodo. */
.edu-mascota__corazon--vivo {
    animation: edu-pv-corazon 1.1s ease-out forwards;
}

@keyframes edu-pv-corazon {
    0% {
        opacity: 0;
        transform: translate3d(var(--pv-cx, 0px), var(--pv-cy, 0px), 0) scale(.3) rotate(-12deg);
    }

    20% {
        opacity: 1;
        transform: translate3d(var(--pv-cx, 0px), calc(var(--pv-cy, 0px) - 6px), 0) scale(1.15) rotate(6deg);
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(var(--pv-cx, 0px) + 10px), calc(var(--pv-cy, 0px) - 42px), 0) scale(.85) rotate(-8deg);
    }
}

/* ── Barra de acciones ────────────────────────────────────────────────────── */
/* FUERA DEL FLUJO, y ese es el arreglo de la esquina. Antes era un hijo más del
   contenedor flex, así que RESERVABA SU ANCHO aunque estuviera invisible: el animal
   quedaba empujado a la izquierda tantos píxeles como midiera ella y no llegaba
   nunca al borde derecho. No era que la barra interceptara los clics —con
   visibility:hidden no lo hace—, era que ocupaba sitio.

   En absoluto, el contenedor mide lo que mide el animal y este sí alcanza la
   esquina. La barra se coloca respecto a él, que es lo que se quería. */
.edu-mascota__acciones {
    position: absolute;
    bottom: 0;
    /* Por defecto a la IZQUIERDA del animal. Es lo correcto en la esquina inferior
       derecha, que es donde arranca: hacia la derecha se saldría de la pantalla. */
    right: 100%;
    margin-right: .5rem;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .5rem;
    border: 1px solid var(--edu-borde);
    border-radius: 999px;
    background: var(--edu-fondo-panel, #fff);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
    /* Sin envolver: al estar en absoluto no la limita el ancho del contenedor, y
       sin esto se partiría en dos líneas al quedarle poco sitio. */
    white-space: nowrap;
    opacity: 0;
    transform: translateY(.4rem);
    transition: opacity .2s ease, transform .2s ease;
    /* Mientras está oculta no debe capturar clics de lo que haya debajo. */
    visibility: hidden;
}

/* AL OTRO LADO cuando el animal está en la mitad IZQUIERDA de la pantalla. La clase
   la pone movimiento-paseo.js, que es quien sabe dónde está: el CSS no puede
   consultar una posición.

   Sin esto, paseando por la izquierda la barra se saldría por el borde y quedaría
   medio cortada. */
.edu-mascota--acciones-derecha .edu-mascota__acciones {
    right: auto;
    left: 100%;
    margin-right: 0;
    margin-left: .5rem;
}

.edu-mascota--abierta .edu-mascota__acciones {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* SOLO se retira al caminar. Ocultarla al acariciar era un error: el usuario quitaba
   la mano del animal para llegar a un botón y la barra desaparecía con ella, así que
   los botones eran inalcanzables mientras se acariciaba. */
.edu-mascota--caminando .edu-mascota__acciones {
    opacity: 0;
    visibility: hidden;
}

.edu-mascota__nombre {
    max-width: 7rem;
    padding: 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--edu-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edu-mascota__accion {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem .45rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--edu-texto-suave);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .edu-mascota__accion:hover {
        background: rgba(var(--bs-primary-rgb), .12);
        color: var(--edu-primario);
    }

/* El botón de comida cuando está saciada. La clase la pone nucleo.js al pintar:
   atenuado y con cursor de "ahora no", pero SIGUE recibiendo el clic a propósito:
   pulsar enseña el aviso del servidor con el motivo. No es disabled porque
   interacciones.js usa disabled como bloqueo transitorio de la petición y lo
   repone en su finally, pisando cualquier disabled puesto por el pintado. */
.edu-mascota__accion--bloqueada {
    opacity: .45;
    cursor: not-allowed;
}

    .edu-mascota__accion--bloqueada:hover {
        background: transparent;
        color: var(--edu-texto-suave);
    }

.edu-mascota__raciones {
    font-size: .72rem;
    font-weight: 700;
}

/* Campo para renombrar. Lo crea interacciones.js, de ahí que viva en un componente
   global y no en un .cshtml.css: el CSS aislado no alcanza al marcado del JS. */
.edu-mascota__campo-nombre {
    width: 7rem;
    padding: 0 .25rem;
    border: 1px solid var(--edu-primario);
    border-radius: .25rem;
    background: transparent;
    color: var(--edu-texto);
    font-size: .78rem;
    font-weight: 700;
}

/* ── Recogida y apagada ───────────────────────────────────────────────────── */
/* Minimizada no la esconde: la deja pequeña en la esquina. Tampoco pasea, y por eso
   el desplazamiento vuelve a cero. */
.edu-mascota--minimizada {
    --pv-x: 0px;
}

    .edu-mascota--minimizada .edu-mascota__svg {
        width: 3.8rem;
    }

    .edu-mascota--minimizada .edu-mascota__acciones {
        display: none;
    }

    /* Recogida, el cuerpo ES el botón de volver: la barra está oculta y con ella el
       botón que la restauraría. El cursor y el aumento al pasar por encima son la
       única pista de que ahí se puede pulsar; la etiqueta la pone nucleo.js. */
    .edu-mascota--minimizada .edu-mascota__cuerpo-boton {
        cursor: pointer;
        transition: transform .18s ease;
    }

        .edu-mascota--minimizada .edu-mascota__cuerpo-boton:hover,
        .edu-mascota--minimizada .edu-mascota__cuerpo-boton:focus-visible {
            transform: scale(1.12);
        }

.edu-mascota--apagada {
    display: none;
}

/* ── El visitante ─────────────────────────────────────────────────────────── */
/* Sin barra y sin datos, pero SÍ se le puede acariciar: es lo que la hace memorable
   en el Home, y no cuesta nada porque no toca el servidor. Tampoco tiene los dos
   estados de arriba: sin barra no hay botones que los pongan. */
.edu-mascota--visitante .edu-mascota__cuerpo-boton {
    cursor: grab;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLAS ESTRECHAS
   ═══════════════════════════════════════════════════════════════════════════ */

/* AQUÍ NO CAMINA. El corte de 47.99rem son 768 px, el mismo valor que
   OpcionesMascota.AnchoMinimoPaseoPx: movimiento.js no arranca el paseo por debajo
   de él. Están atados por convención porque el CSS no puede leer el appsettings; si
   mueves uno, mueve el otro. */
@media (max-width: 47.99rem) {
    .edu-mascota {
        right: .6rem;
        bottom: .6rem;
        gap: .3rem;
        --pv-x: 0px;
    }

    .edu-mascota__svg {
        width: 5.2rem;
    }

    .edu-mascota--minimizada .edu-mascota__svg {
        width: 3rem;
    }

    .edu-mascota__nombre {
        max-width: 5rem;
    }

    .edu-mascota__corazon {
        font-size: .75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENOS MOVIMIENTO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Quien lo pidió en su sistema tiene la mascota quieta, con su estado legible en la
   POSTURA: las orejas caídas y la pose siguen ahí, porque son transform y no
   animación. Desaparece todo lo que se repite, el paseo, los corazones, la burbuja
   del sueño y su reventón.

   Este bloque apaga cosas declaradas en las OTRAS hojas, así que solo funciona
   si esta se carga la última. */
@media (prefers-reduced-motion: reduce) {
    .edu-mascota {
        --pv-x: 0px;
    }

    .edu-mascota__svg,
    .edu-mascota__vista,
    .edu-mascota__cola,
    .edu-mascota__aliento,
    .edu-mascota__cabeza-aliento,
    .edu-mascota__cabeza-gesto,
    .edu-mascota__cabeza-ladeo,
    .edu-mascota__parpado-parpadeo,
    .edu-mascota__morro,
    .edu-mascota__tronco,
    .edu-mascota__oreja,
    .edu-mascota__colgante,
    .edu-mascota__corazon,
    .edu-mascota__p-pata,
    .edu-mascota__p-cuerpo,
    .edu-mascota__p-cabeza,
    .edu-mascota__p-collar,
    .edu-mascota__p-oreja,
    .edu-mascota--pose-echado .edu-mascota__vista--echada,
    .edu-mascota--pose-echado .edu-mascota__cabeza-ladeo,
    .edu-mascota--pose-echado .edu-mascota__cola,
    .edu-mascota--pose-durmiendo .edu-mascota__vista--dormida,
    .edu-mascota--pose-durmiendo .edu-mascota__zeta,
    .edu-mascota--pose-durmiendo .edu-mascota__burbuja,
    .edu-mascota--burbuja-pop .edu-mascota__burbuja {
        animation: none;
    }

    .edu-mascota__corazon,
    .edu-mascota__zeta {
        opacity: 0;
    }

    /* Las transiciones entre poses también desaparecen: la pose cambia de golpe. */
    .edu-mascota__cabeza,
    .edu-mascota__parpado,
    .edu-mascota__mirada,
    .edu-mascota__morro,
    .edu-mascota__oreja,
    .edu-mascota__p-oreja,
    .edu-mascota__colgante,
    .edu-mascota__ceja,
    .edu-mascota__pestana,
    .edu-mascota__cuerpo-boton,
    .edu-mascota--minimizada .edu-mascota__cuerpo-boton,
    .edu-mascota__acciones {
        transition: none;
    }
}