/* MisFotos - Custom Styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Prevent image dragging */
img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Gallery image protection (basic CSS overlay) */
.photo-protected {
    position: relative;
}

.photo-protected::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Chunk upload visualization */
.chunk-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.chunk-item {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: #e5e7eb;
    transition: background-color 0.2s;
}

.chunk-item.uploading {
    background: #93c5fd;
    animation: pulse 1s infinite;
}

.chunk-item.completed {
    background: #34d399;
}

.chunk-item.failed {
    background: #f87171;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Lightbox transitions */
#lightbox {
    transition: opacity 0.2s ease;
}

#lightbox img {
    transition: opacity 0.15s ease;
}

/* Upload drop zone */
.drop-zone {
    border: 2px dashed #d1d5db;
    transition: all 0.2s ease;
}

.drop-zone.dragover {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

/* PIN input tracking */
input[name="pin"] {
    letter-spacing: 0.3em;
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.3s ease;
}

/* Dashboard mobile sidebar transition */
#sidebar {
    transition: transform 0.3s ease;
}