/*
 * Skeleton overlay com spinner branded (logo + arco azul girando).
 *
 * Uso típico no HTML:
 *   <div id="appSkeleton" class="cv-skeleton" aria-hidden="true" aria-live="polite">
 *     <div class="cv-skeleton-panel" role="status">
 *       <div class="cv-spinner">
 *         <div class="cv-spinner-track"></div>
 *         <div class="cv-spinner-rotor"></div>
 *         <img class="cv-spinner-logo" src="/static/img/logo.png" alt="" onerror="this.style.display='none'">
 *       </div>
 *       <div class="cv-skeleton-text">Carregando dados<span class="cv-skeleton-dots"><span>.</span><span>.</span><span>.</span></span></div>
 *       <div class="cv-skeleton-bars" aria-hidden="true">
 *         <span class="cv-skel-bar"></span>
 *         <span class="cv-skel-bar"></span>
 *         <span class="cv-skel-bar"></span>
 *       </div>
 *     </div>
 *   </div>
 *
 * Show/hide via JS:
 *   document.getElementById('appSkeleton').classList.add('is-active');     // mostrar
 *   document.getElementById('appSkeleton').classList.remove('is-active');  // esconder
 *
 * CRÍTICO: usa visibility:hidden (não display:none) — animações CSS criadas em
 * elemento display:none ficam com timeline congelado em currentTime=0 mesmo
 * quando o display vira visible. Bug documentado do Chrome.
 *
 * Depende dos tokens V3 (--v3-bg, --v3-surface, --v3-border-str, --v3-text-muted, --v3-text).
 */

.cv-skeleton {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--v3-bg) 80%, transparent);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out, visibility 0s linear .2s;
}
.cv-skeleton.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .18s ease-out, visibility 0s linear 0s;
}

/* Painel central */
.cv-skeleton-panel {
    background: var(--v3-surface);
    border: 1px solid var(--v3-border, var(--v3-border-str));
    border-radius: 14px;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.25);
    min-width: 320px;
}

/* ===== Spinner: logo estático + rotor azul girando =====
   CSS animation em <div> HTML — GPU-acelerada pelo compositor.
   Não usa SVG/SMIL pra evitar problemas de timeline em alguns browsers. */
.cv-spinner {
    position: relative;
    width: 160px; height: 160px;
    display: block;
}
.cv-spinner-track {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 6px solid var(--v3-border-str, #94A3B8);
    opacity: .4;
    box-sizing: border-box;
}
.cv-spinner-rotor {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: #041E42;     /* azul corporate (Scania default) */
    border-right-color: #041E42;
    box-sizing: border-box;
    will-change: transform;
    animation: cv-spinner-rotate 1.1s linear infinite;
}
[data-theme="dark"] .cv-spinner-rotor {
    border-top-color: #3B82F6;
    border-right-color: #3B82F6;
}
@keyframes cv-spinner-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.cv-spinner-logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 86px; height: 86px;
    object-fit: contain;
    z-index: 1;
}
[data-theme="dark"] .cv-spinner-logo { filter: brightness(1.05); }

/* ===== Texto + dots animados ===== */
.cv-skeleton-text {
    font-size: 13px; font-weight: 600;
    color: var(--v3-text);
    letter-spacing: .2px;
}
.cv-skeleton-dots span {
    display: inline-block;
    animation: cv-skel-dot 1.4s infinite;
    opacity: 0;
}
.cv-skeleton-dots span:nth-child(1) { animation-delay: 0s; }
.cv-skeleton-dots span:nth-child(2) { animation-delay: .2s; }
.cv-skeleton-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cv-skel-dot {
    0%, 60%, 100% { opacity: 0; }
    30%           { opacity: 1; }
}

/* ===== Barras shimmer ===== */
.cv-skeleton-bars {
    display: flex; flex-direction: column; gap: 6px;
    width: 240px; align-items: stretch;
}
.cv-skel-bar {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--v3-text-muted) 12%, transparent) 0%,
        color-mix(in srgb, var(--v3-text-muted) 28%, transparent) 50%,
        color-mix(in srgb, var(--v3-text-muted) 12%, transparent) 100%);
    background-size: 200% 100%;
    animation: cv-skel-shimmer 1.4s infinite;
}
.cv-skel-bar:nth-child(1) { width: 100%; }
.cv-skel-bar:nth-child(2) { width: 80%; }
.cv-skel-bar:nth-child(3) { width: 60%; }
@keyframes cv-skel-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Acessibilidade — respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .cv-spinner-rotor,
    .cv-skeleton-dots span,
    .cv-skel-bar {
        animation: none !important;
    }
}