/* Loader inicial pre-dashboard con logo Vozenter
 * Inspirado en el spinner multicapa de Control de Gastos (informe-modals.css).
 * Se muestra mientras Blazor Server arranca el circuito; lo controla el atributo
 * data-kt-app-page-loading="on" que ya gestiona Metronic.
 */

.vzt-page-loader {
    text-align: center;
}

.vzt-page-loader .vzt-loader-logo {
    height: 56px;
    width: auto;
    margin-bottom: 1.5rem;
    animation: vzt-loader-logo-pulse 2.4s ease-in-out infinite;
}

.vzt-loader-spinner-container {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 1.5rem auto;
}

.vzt-loader-spinner {
    position: relative;
    width: 100%;
    height: 100%;
}

.vzt-spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-radius: 50%;
    animation: vzt-loader-spin 1s linear infinite;
}

.vzt-spinner-ring:nth-child(1) {
    border-top-color: var(--bs-primary, #0d6efd);
    animation-delay: 0s;
}

.vzt-spinner-ring:nth-child(2) {
    width: 78%;
    height: 78%;
    top: 11%;
    left: 11%;
    border-top-color: var(--bs-success, #17C653);
    animation-delay: 0.12s;
}

.vzt-spinner-ring:nth-child(3) {
    width: 56%;
    height: 56%;
    top: 22%;
    left: 22%;
    border-top-color: var(--bs-info, #7239EA);
    animation-delay: 0.24s;
}

.vzt-spinner-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--bs-danger, #DC3545);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: vzt-loader-pulse 1s ease-in-out infinite;
}

.vzt-loader-text {
    color: var(--bs-text-muted, #6c757d);
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0;
    letter-spacing: 0.02em;
}

.vzt-loader-text .vzt-loader-dots::after {
    display: inline-block;
    content: '';
    width: 1.5em;
    text-align: left;
    animation: vzt-loader-dots 1.4s steps(4, end) infinite;
}

.vzt-loader-progress {
    max-width: 220px;
    height: 6px;
    margin: 1.25rem auto 0 auto;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.vzt-loader-progress-bar {
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, var(--bs-primary, #0d6efd), var(--bs-info, #7239EA));
    border-radius: 999px;
    animation: vzt-loader-progress 1.6s ease-in-out infinite;
}

@keyframes vzt-loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes vzt-loader-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50%      { transform: translate(-50%, -50%) scale(0.7); opacity: 0.6; }
}

@keyframes vzt-loader-logo-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(0.97); }
}

@keyframes vzt-loader-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

@keyframes vzt-loader-progress {
    0%   { transform: translateX(-100%); width: 35%; }
    50%  { width: 60%; }
    100% { transform: translateX(220%); width: 35%; }
}