/* =====================================================================
 * squadflow-motion.css — PICHANGUEO
 *
 * Capa de movimiento y estados de carga. Nace para resolver dos cosas que
 * la auditoria dejo medidas:
 *
 *   · El sistema tenia DOS animaciones propias (sf-pulse, sf-spin) y CERO
 *     reglas de prefers-reduced-motion.
 *   · Convivian tres formas de decir "espera": 11 archivos con
 *     .spinner-border, 38 con un texto "Cargando...", y uno solo con
 *     skeleton. Tres dialectos para el mismo estado.
 *
 * Se carga desde layouts/head-style.php, DESPUES de squadflow-components.css
 * (para poder ajustar sin !important) y ANTES de squadflow-nav.css.
 *
 * Va junto con assets/js/utils/sk-ui.js, que es quien pinta los skeletons y
 * dispara las animaciones.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. TOKENS
 * Duraciones y curvas en un solo lugar. Si el sistema se siente lento o
 * apurado, se ajusta aca y no animacion por animacion.
 * ------------------------------------------------------------------- */
:root {
    --sk-dur-rapida: 140ms;   /* respuesta a un clic: tiene que ser invisible */
    --sk-dur-media:  260ms;   /* entrada de una fila, apertura de un panel */
    --sk-dur-lenta:  520ms;   /* celebraciones y conteos */

    /* Salida rapida, llegada suave: se siente que el elemento "aterriza". */
    --sk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------
 * 2. SKELETONS
 *
 * Reemplazan al texto "Cargando...". La diferencia no es estetica: el
 * skeleton muestra la FORMA de lo que viene, asi la pagina no da un salto
 * cuando llegan los datos y la espera se percibe mas corta.
 *
 * El brillo se hace con background-position sobre un gradiente y no con
 * opacidad ni con left: asi la animacion corre en el compositor y no
 * dispara relayout en cada frame.
 * ------------------------------------------------------------------- */
.sk-skel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background-color: rgba(184, 87, 255, 0.07);
    background-image: linear-gradient(
        90deg,
        rgba(184, 87, 255, 0.00) 0%,
        rgba(184, 87, 255, 0.13) 50%,
        rgba(184, 87, 255, 0.00) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: sk-brillo 1.4s ease-in-out infinite;
}

@keyframes sk-brillo {
    from { background-position: -100% 0; }
    to   { background-position:  100% 0; }
}

/* Lineas de texto. La ultima sale mas corta, como un parrafo de verdad. */
.sk-skel-linea {
    height: 0.72rem;
    margin-bottom: 0.55rem;
}
.sk-skel-linea:last-child {
    margin-bottom: 0;
    width: 62%;
}

.sk-skel-titulo { height: 1.15rem; width: 45%; margin-bottom: 0.9rem; }
.sk-skel-cifra  { height: 1.7rem;  width: 55%; }

/* Avatar / escudo. */
.sk-skel-circulo { border-radius: 50%; width: 38px; height: 38px; flex: none; }

/* Fila de lista: circulo + dos lineas. La arma skSkeleton() desde JS. */
.sk-skel-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sk-border, rgba(184, 87, 255, 0.20));
}
.sk-skel-fila:last-child { border-bottom: none; }
.sk-skel-fila > div { flex: 1; }

/* ---------------------------------------------------------------------
 * 3. ENTRADA Y SALIDA
 *
 * Para cuando aparece una fila nueva (un jugador, una deuda, una reserva).
 * Confirma que la accion ocurrio sin necesidad de un toast.
 * ------------------------------------------------------------------- */
.sk-entra {
    animation: sk-entrar var(--sk-dur-media) var(--sk-ease) both;
}
@keyframes sk-entrar {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

.sk-sale {
    animation: sk-salir var(--sk-dur-media) var(--sk-ease) both;
}
@keyframes sk-salir {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-7px); }
}

/* Cuando entran varias juntas, se escalonan apenas para que se lea el
   orden en vez de aparecer todas de golpe. Mas de ~8 no escalona: el
   ultimo tardaria demasiado y parece que la pagina se colgo. */
.sk-entra-lista > *          { animation: sk-entrar var(--sk-dur-media) var(--sk-ease) both; }
.sk-entra-lista > *:nth-child(1) { animation-delay: 0ms; }
.sk-entra-lista > *:nth-child(2) { animation-delay: 35ms; }
.sk-entra-lista > *:nth-child(3) { animation-delay: 70ms; }
.sk-entra-lista > *:nth-child(4) { animation-delay: 105ms; }
.sk-entra-lista > *:nth-child(5) { animation-delay: 140ms; }
.sk-entra-lista > *:nth-child(6) { animation-delay: 175ms; }
.sk-entra-lista > *:nth-child(7) { animation-delay: 210ms; }
.sk-entra-lista > *:nth-child(8) { animation-delay: 245ms; }

/* ---------------------------------------------------------------------
 * 4. DESTACAR UN CAMBIO
 *
 * Un valor que se acaba de actualizar (el marcador, un saldo). Sin esto,
 * en una pantalla con muchos numeros, el que cambio pasa desapercibido.
 * ------------------------------------------------------------------- */
.sk-destaca {
    animation: sk-destacar var(--sk-dur-lenta) var(--sk-ease) both;
}
@keyframes sk-destacar {
    0%   { background-color: rgba(184, 87, 255, 0.28); }
    100% { background-color: transparent; }
}

/* Pulso del marcador al gol. Es la pantalla que se mira de lejos desde la
   banca: el gol tiene que leerse sin que nadie alcance a leer el numero. */
.sk-pulso {
    animation: sk-pulsar var(--sk-dur-lenta) var(--sk-ease) both;
}
@keyframes sk-pulsar {
    0%   { transform: scale(1);    text-shadow: none; }
    35%  { transform: scale(1.16); text-shadow: 0 0 22px rgba(184, 87, 255, 0.85); }
    100% { transform: scale(1);    text-shadow: none; }
}

/* ---------------------------------------------------------------------
 * 5. BOTON OCUPADO
 * El spinner lo inyecta skFetch (sk-fetch.js) con las clases de Bootstrap;
 * esto solo evita que el boton "salte" al cambiarle el contenido y deja
 * claro que no se puede volver a apretar.
 * ------------------------------------------------------------------- */
[aria-busy="true"] {
    cursor: progress;
    opacity: 0.85;
}
button[aria-busy="true"] {
    /* El ancho no se recalcula al reemplazar el texto por el spinner. */
    min-width: var(--sk-boton-ancho, auto);
}

/* ---------------------------------------------------------------------
 * 6. TRANSICION ENTRE PAGINAS — PROBADA Y DESCARTADA
 *
 * Se probo `@view-transition { navigation: auto; }` para cruzar con un
 * fundido el parpadeo que deja la navegacion server-rendered. Funciona,
 * pero en cada navegacion interrumpida —o sea, cada vez que alguien hace
 * clic antes de que termine la anterior, que es lo normal— Chrome tira al
 * console un "DOMException: AbortError: Transition was skipped".
 *
 * No rompe nada, pero es ruido rutinario en la consola, y una consola
 * ruidosa es la razon por la que nadie noto los 216 fetch sin manejo de
 * error. El fundido no vale ese precio.
 *
 * Si se quiere reponer, son estas cuatro reglas:
 *   @view-transition { navigation: auto; }
 *   ::view-transition-old(root) { animation: ... }
 *   ::view-transition-new(root) { animation: ... }
 * y hay que sumarlas tambien al bloque de prefers-reduced-motion de abajo.
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * 7. prefers-reduced-motion
 *
 * VA AL FINAL Y PISA TODO LO DE ARRIBA. No es un extra: quien activa esta
 * preferencia suele hacerlo por vertigo o migraña, y esta es una app que
 * se usa parada al borde de una cancha, mirando el celular a contraluz.
 *
 * Ojo con la diferencia: las animaciones DECORATIVAS se apagan, pero el
 * skeleton conserva su fondo (sin el brillo). Si se apagara del todo
 * quedaria un bloque invisible y el usuario no sabria que algo esta
 * cargando — apagar el movimiento no puede significar apagar la
 * informacion.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sk-skel {
        animation: none;
        background-image: none;
        background-color: rgba(184, 87, 255, 0.10);
    }

    .sk-entra,
    .sk-sale,
    .sk-entra-lista > *,
    .sk-destaca,
    .sk-pulso {
        animation: none !important;
    }

    /* El destacado sigue existiendo, pero como un borde fijo que se queda:
       cumple la misma funcion (señalar que ESTE valor cambio) sin movimiento. */
    .sk-destaca {
        box-shadow: inset 0 0 0 2px var(--sk-accent, #b857ff);
        border-radius: 4px;
    }
}