/* Galería de Recuerdos - Estilos públicos */

:root {
    --oga-primary: #0d6efd;
    --oga-secondary: #6c757d;
    --oga-font-primary: 'Caveat', cursive;
    --oga-font-secondary: 'Inter', sans-serif;
}

* { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

html, body { height: 100%; font-family: var(--oga-font-secondary); }

/* Hero */
.hero-media { z-index: 0; }
.object-fit-cover { object-fit: cover; }

/* Countdown */
.countdown .digit-box {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 64px;
    display: inline-block;
    margin: 0 4px;
}
.countdown .digit { font-size: 1.8rem; font-weight: 700; line-height: 1; color: #fff; }
.countdown .label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); }

/* Upload */
.upload-zone { transition: all .2s; cursor: pointer; border-style: dashed !important; }
.upload-zone.dragover { border-color: var(--oga-primary) !important; background: rgba(13,110,253,.05); }

#queue .file-row {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
#queue .thumb-preview { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: #e9ecef; }
#queue .file-info { flex: 1; min-width: 0; }
#queue .file-progress { height: 4px; border-radius: 2px; background: #e9ecef; overflow: hidden; }
#queue .file-progress .bar { height: 100%; background: var(--oga-primary); width: 0; transition: width .2s; }

/* Galería masonry */
.masonry-grid { column-count: 2; column-gap: .5rem; }
@media (min-width: 768px) { .masonry-grid { column-count: 3; } }
@media (min-width: 1200px) { .masonry-grid { column-count: 4; } }

.gallery-item { break-inside: avoid; margin-bottom: .5rem; }
.gallery-item img, .gallery-item video { transition: transform .3s; width: 100%; display: block; border-radius: 8px; }
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.02); }

/* Lightbox (estilos base) */
.lightbox { position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; }
.lightbox-media { max-width: 95%; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.8); }

/* Prevenir descarga */
.prevent-save img, .prevent-save video {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

/* Responsive para lightbox */
@media (max-width: 576px) {
    .lightbox-media { max-width: 98%; max-height: 80vh; }
    .lightbox .lightbox-close { font-size: 2rem; top: 5px; right: 10px; }
    .lightbox .lightbox-nav { font-size: 1.5rem; padding: 8px 12px; }
}