/**
 * Seleções Carnavalescas - Viewer Mobile Optimizations v1.2.1
 * 
 * CSS adicional para otimizações mobile:
 * - Barra de progresso de download
 * - Skeleton loading para percepção de velocidade
 * - will-change e contain para performance
 * - Redução de paint em mobile
 * - Touch-action para swipe
 * 
 * Carregue APÓS viewer.css
 * 
 * @package Selecoes_Edicoes
 * @since 1.1.0
 * @updated 1.2.1
 */

/* ==========================================================================
   Skeleton Loading - Melhora percepção de velocidade
   ========================================================================== */

/* Placeholder visual enquanto PDF carrega */
.sc-viewer-container {
    position: relative;
}

.sc-viewer-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 350px;
    aspect-ratio: 0.7 / 1; /* Proporção de página A4-ish */
    background: linear-gradient(
        90deg,
        #3a3d40 0%,
        #4a4d50 50%,
        #3a3d40 100%
    );
    background-size: 200% 100%;
    animation: sc-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

/* Esconde skeleton quando canvas tem dimensões */
.sc-pdf-viewer[data-initialized="true"] .sc-viewer-container::before {
    display: none;
}

/* Também esconde quando loading está oculto */
.sc-viewer-loading.hidden ~ .sc-viewer-container::before,
.sc-viewer-loading.hidden + .sc-viewer-error-msg + .sc-viewer-container::before {
    display: none;
}

@keyframes sc-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Barra de Progresso de Download
   ========================================================================== */

.sc-viewer-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 200px;
    margin-top: 0.5rem;
}

.sc-viewer-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.sc-viewer-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--sc-primary, #151aca) 0%, #3a3fd9 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.sc-viewer-progress-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   Otimizações de Renderização
   ========================================================================== */

/* Promote canvas e container para compositing layer própria */
.sc-viewer-canvas {
    will-change: auto; /* Ativado via JS quando necessário */
    contain: layout paint; /* NÃO usar strict/size — impede redimensionamento do canvas */
}

/* Isolamento de pintura do container */
.sc-viewer-container {
    contain: layout style;
    -webkit-overflow-scrolling: touch;
}

/* Permite swipe horizontal no viewer mobile */
@media (max-width: 768px) {
    .sc-viewer-container {
        touch-action: pan-y pinch-zoom;
    }
}


/* ==========================================================================
   Device Tier: Low (conexão lenta / dispositivo fraco)
   Aplicado via JS: container.dataset.deviceTier = 'low'
   ========================================================================== */

[data-device-tier="low"] .sc-viewer-canvas {
    image-rendering: optimizeSpeed;
}

[data-device-tier="low"] .sc-viewer-container {
    /* Desabilita scrollbar smooth em dispositivos fracos */
    scroll-behavior: auto;
}

[data-device-tier="low"] .sc-viewer-progress-fill {
    /* Desabilita transição de progresso em dispositivos fracos */
    transition: none;
}

[data-device-tier="low"] .sc-viewer-btn {
    /* Simplifica transições em dispositivos fracos */
    transition: none;
}


/* ==========================================================================
   Otimizações Mobile Adicionais
   ========================================================================== */

@media (max-width: 768px) {
    /* Toolbar mais compacta em mobile */
    .sc-viewer-toolbar {
        padding: 0.5rem;
        gap: 0.25rem;
    }

    /* Botões maiores para touch (min 44px tap target) */
    .sc-viewer-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Reduz info de zoom em mobile (menos útil) */
    .sc-viewer-zoom-level {
        display: none;
    }

    /* Container do viewer com altura otimizada */
    .sc-viewer-container {
        padding: 0.5rem;
    }

    /* Loading centralizado com menor padding */
    .sc-viewer-progress {
        width: 160px;
    }
}

@media (max-width: 400px) {
    /* Telas muito pequenas */
    .sc-viewer-toolbar-group {
        gap: 0.25rem;
    }

    .sc-viewer-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 0.35rem;
    }

    .sc-viewer-page-info {
        font-size: 0.8rem;
        min-width: auto;
        padding: 0;
    }
}


/* ==========================================================================
   Fullscreen Melhorado
   ========================================================================== */

.sc-fullscreen .sc-viewer-container {
    height: calc(100vh - 60px); /* Desconta toolbar */
    max-height: none;
}

@media (max-width: 768px) {
    .sc-fullscreen .sc-viewer-container {
        height: calc(100vh - 50px);
        height: calc(100dvh - 50px); /* Dynamic viewport height (iOS Safari) */
    }
}


/* ==========================================================================
   Animação de Loading Otimizada
   ========================================================================== */

/* Usa transform ao invés de propriedades que causam layout/paint */
@keyframes sc-spin {
    to { transform: rotate(360deg); }
}

.sc-viewer-spinner {
    will-change: transform;
}

/* Reduz animações quando usuário prefere (a11y) */
@media (prefers-reduced-motion: reduce) {
    .sc-viewer-spinner {
        animation-duration: 1.5s;
    }

    .sc-viewer-progress-fill {
        transition: none;
    }
    
    .sc-viewer-container::before {
        animation: none;
        background: #4a4d50;
    }
}


/* ==========================================================================
   Navigation Mobile Melhorada
   ========================================================================== */

@media (max-width: 768px) {
    /* Nav mobile sticky */
    .sc-viewer-mobile-nav {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 0.75rem 1rem;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }
    
    .sc-viewer-mobile-nav .sc-viewer-btn {
        min-width: 52px;
        min-height: 52px;
        border-radius: 50%;
        background: #f5f5f5;
    }
    
    .sc-viewer-mobile-nav .sc-viewer-btn:active {
        background: #e0e0e0;
        transform: scale(0.95);
    }
    
    .sc-viewer-mobile-nav .sc-viewer-page-info {
        font-size: 1rem;
        font-weight: 600;
    }
}