/* Loader global de página (ver resources/views/components/page-loader.blade.php) */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000; /* por encima de navbar (1030) y modales de Bootstrap (1050) */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(248, 250, 252, 0.7);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
    cursor: progress;
}

#page-loader.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s;
}

#page-loader.no-transition,
#page-loader.no-transition .page-loader-card {
    transition: none;
}

#page-loader .page-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 200px;
    max-width: calc(100vw - 32px);
    padding: 28px 32px 24px;
    background-color: var(--nubelfon-surface, #FFFFFF);
    border: 1px solid var(--nubelfon-border-clr, #E2E8F0);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    font-family: 'Poppins', sans-serif;
    text-align: center;
    transform: translateY(6px) scale(.98);
    transition: transform .2s ease;
}

#page-loader.is-visible .page-loader-card {
    transform: none;
}

/* Isotipo de Nubelfon: círculo corporativo con la "n" trazándose en bucle */
#page-loader .page-loader-logo {
    display: block;
    width: 56px;
    height: 56px;
    overflow: visible;
}

#page-loader .page-loader-logo-bg {
    fill: var(--primary-clr, #01ab8e);
    transform-origin: 56px 56px;
    animation: page-loader-pulse 1.6s ease-in-out infinite;
}

#page-loader .page-loader-logo-n-ghost,
#page-loader .page-loader-logo-n {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 14.5;
}

#page-loader .page-loader-logo-n-ghost {
    opacity: .3;
}

#page-loader .page-loader-logo-n {
    stroke-dasharray: 100 100;
    animation: page-loader-draw 1.6s cubic-bezier(.65, 0, .35, 1) infinite;
}

#page-loader .page-loader-text {
    margin: 0;
    color: var(--nubelfon-text-dark, #1E293B);
    font-size: .95rem;
    font-weight: 400;
}

#page-loader .page-loader-slow {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--nubelfon-text-muted, #64748B);
    font-size: .8rem;
}

#page-loader.is-slow .page-loader-slow {
    display: flex;
}

#page-loader .page-loader-dismiss {
    padding: 2px 12px;
    background: none;
    border: 1px solid var(--nubelfon-border-clr, #E2E8F0);
    border-radius: 6px;
    color: var(--link-clr, #0F766E);
    font-size: .8rem;
    cursor: pointer;
}

#page-loader .page-loader-dismiss:hover {
    border-color: var(--primary-clr, #01ab8e);
}

/* La "n" se dibuja de pata a pata, se mantiene y se borra en el mismo sentido */
@keyframes page-loader-draw {
    0%       { stroke-dashoffset: 100; }
    45%, 60% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: -100; }
}

@keyframes page-loader-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
    #page-loader .page-loader-logo-bg {
        animation: none;
    }

    #page-loader .page-loader-logo-n {
        animation-duration: 3.2s;
    }
}