/*
 * Loader de Mitilink: el logo simplificado (templates/_mitilink_chip.svg) se
 * "enciende" según --avance (0 a 1):
 *   - los pines primero;
 *   - las pistas, de afuera hacia el centro (stroke-dashoffset; cada pista va
 *     del pin al chip y tiene pathLength=100);
 *   - el chorito central al final;
 *   - al 100 %, un pulso.
 * Determinado: static/js/loader.js fija --avance (con transición).
 * Indeterminado (.mitil-loader--indeterminado): una animación lleva --avance
 * de 0 a 1 y el ciclo se repite.
 * Sin dependencias: lo usan base.html, el login y la app de escritorio
 * (Mitilink_Local/src/index.html lo lleva copiado, ver actualizar_index.py).
 */
@property --avance {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.mitil-loader {
    --avance: 0;
    --mitil-loader-tam: 112px;
    --mitil-loader-texto: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: --avance .35s ease-out;
}
.mitil-loader--chico { --mitil-loader-tam: 72px; gap: 10px; }
.dark .mitil-loader, .mitil-loader--oscuro { --mitil-loader-texto: #94a3b8; }

.mitil-loader__logo {
    width: var(--mitil-loader-tam);
    height: var(--mitil-loader-tam);
}
.mitil-loader__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Etapas: pines 0–12 %, pistas 5–75 %, chorito 75–100 % */
.mitil-loader .pines { opacity: calc(.3 + .7 * clamp(0, var(--avance) / .12, 1)); }
.mitil-loader .pistas { filter: drop-shadow(0 0 1.5px rgba(56, 189, 248, .55)); }
.mitil-loader .pista {
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - 100 * clamp(0, (var(--avance) - .05) / .7, 1));
}
.mitil-loader .chip { filter: saturate(calc(.35 + .65 * clamp(0, var(--avance) / .75, 1))); }
.mitil-loader .chorito {
    opacity: calc(.25 + .75 * clamp(0, (var(--avance) - .75) / .25, 1));
    filter: grayscale(calc(1 - clamp(0, (var(--avance) - .75) / .25, 1)));
    transform-origin: 50px 50px;
}

/* Pulso al 100 % */
.mitil-loader--completo .mitil-loader__logo { animation: mitil-pulso .45s ease-out; }
@keyframes mitil-pulso {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(45, 212, 191, 0)); }
    45%  { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(45, 212, 191, .7)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(45, 212, 191, 0)); }
}

/* Indeterminado: el ciclo se repite, con el pulso al llegar al 100 % */
.mitil-loader--indeterminado { animation: mitil-ciclo 2.4s ease-in-out infinite; }
.mitil-loader--indeterminado .mitil-loader__logo { animation: mitil-pulso-ciclo 2.4s ease-in-out infinite; }
@keyframes mitil-ciclo {
    0%   { --avance: 0; }
    78%  { --avance: 1; }
    100% { --avance: 1; }
}
@keyframes mitil-pulso-ciclo {
    0%, 78% { transform: scale(1); }
    86%     { transform: scale(1.07); filter: drop-shadow(0 0 8px rgba(45, 212, 191, .6)); }
    100%    { transform: scale(1); }
}

.mitil-loader__barra {
    width: calc(var(--mitil-loader-tam) * 1.45);
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .25);
    overflow: hidden;
}
.mitil-loader__relleno {
    height: 100%;
    width: calc(var(--avance) * 100%);
    border-radius: inherit;
    background: linear-gradient(90deg, #1d6fd1, #2dd4bf);
}

.mitil-loader__texto {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--mitil-loader-texto);
    text-align: center;
}
.mitil-loader__porcentaje { font-variant-numeric: tabular-nums; }
.mitil-loader--indeterminado .mitil-loader__porcentaje { display: none; }

/* Capa de pantalla completa (MitilLoader.pagina) */
.mitil-loader-capa {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 243, 246, .78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s ease;
}
.dark .mitil-loader-capa, .mitil-loader-capa--oscura { background: rgba(15, 23, 42, .78); }
.mitil-loader-capa--oscura .mitil-loader { --mitil-loader-texto: #cbd5e1; }
.mitil-loader-capa[hidden] { display: none; }
.mitil-loader-capa.visible { opacity: 1; }

/* Movimiento reducido: sin ciclo ni pulso ni transiciones. Indeterminado =
   logo encendido y la barra entera, tenue (no es un 100 %). */
@media (prefers-reduced-motion: reduce) {
    .mitil-loader, .mitil-loader *, .mitil-loader-capa { animation: none !important; transition: none !important; }
    .mitil-loader--indeterminado { --avance: 1; }
    .mitil-loader--indeterminado .mitil-loader__relleno { opacity: .35; }
}