/**
 * multimedia-principal-main.css
 * Adaptado de documentos-novaltia-main.css
 * Selector: .layout-novaltiamultimedia
 *
 * Estructura DOM (override Phocagallery):
 *   #phocagallery .pg-categories-viewpage-multimedia
 *     ├── .row.page-header   ← hero (hero.css — no tocar)
 *     ├── main.content       ← tabs + grid
 *     └── aside.sidebar      ← árbol categorías
 */

/* ─── LAYOUT 2 COLUMNAS ───────────────────────────────────────── */
/* Grid solo en vista de categorías (.pg-csv), NO en vista de álbum (.pg-cv) */
.theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-csv {
    display: grid !important;
    grid-template-columns: 1fr 25rem;
    grid-template-rows: auto 1fr;
    gap: 0 3rem;
    padding: 0;
    align-items: start;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Hero: fila 1, ambas columnas, sin restricción lateral */
.theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-csv > .page-header {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Columna — padding propio */
.theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery > main.content:not(.has-sidebar) {
    grid-column: span 2;
}

/* Sidebar */
.theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery > aside.sidebar {
    grid-column: 2;
    grid-row: 2;
    margin-top: 2.5rem;
    margin-right: 5%;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery {
        grid-template-columns: 1fr;
    }
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery > main.content {
        grid-column: 1;
        margin-top: 1.5rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery > aside.sidebar {
        grid-column: 1;
        grid-row: 3;
        margin-top: 1.5rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

@media (max-width: 768px) {
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery > main.content,
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery > aside.sidebar {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery > main.content {
        padding: 1.5rem;
    }
}

/* ─── ELEMENTOS NATIVOS NO USADOS ─────────────────────────────── */
.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-top-icons,
.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-categories-desc { display: none; }
.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-categories-items-box { display: contents; }

/* ─── TABS ────────────────────────────────────────────────────── */
.tabs-multimedia {
    display: flex;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
    width: fit-content;
    flex-wrap: wrap;
}

.tabs-multimedia .tab-btn {
    padding: 0.5rem 1.1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: #666;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid #e5e5e5;
    cursor: pointer;
    background: none;
    border-top: none;
    border-bottom: none;
    border-left: none;
}

.tabs-multimedia .tab-btn:last-child { border-right: none; }
.tabs-multimedia .tab-btn.activo { background: #6d1873; color: #fff; }
.tabs-multimedia .tab-btn:not(.activo):hover { background: rgba(109,24,115,0.08); color: #6d1873; }

.tab-badge {
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
}
.tabs-multimedia .tab-btn:not(.activo) .tab-badge { background: #f4f4f4; color: #999; }

/* ─── GRID DE TARJETAS — estilo Documentos ────────────────────── */


/* ─── TARJETA — imagen fondo + overlay + título superpuesto ────── */
#phocagallery .pg-novaltia-card {
    display: block !important;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(109,24,115,0.12);
    transition: all 0.25s ease;
    text-decoration: none;
    color: inherit;
    min-height: 140px;
    cursor: pointer;
    border: 2px solid #e5e5e5;
}

#phocagallery .pg-novaltia-card:hover {
    border-color: #6d1873;
    box-shadow: 0 4px 12px rgba(109,24,115,0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

/* Thumbnail ocupa toda la tarjeta */
#phocagallery .pg-novaltia-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0 !important;
    overflow: hidden;
}

#phocagallery .pg-novaltia-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
    opacity: 1;
}

#phocagallery .pg-novaltia-card:hover .pg-novaltia-thumb-img { transform: scale(1.04); }

/* Placeholder sin imagen */
#phocagallery .pg-novaltia-thumb-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #6d1873, #a6bc09);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay gradiente — igual que Documentos */
#phocagallery .pg-novaltia-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(109,24,115,0.85) 0%,
        rgba(109,24,115,0.55) 50%,
        rgba(166,188,9,0.75) 100%
    );
    z-index: 2;
    transition: all 0.25s ease;
}

#phocagallery .pg-novaltia-card:hover::after {
    background: linear-gradient(135deg,
        rgba(109,24,115,0.90) 0%,
        rgba(109,24,115,0.82) 50%,
        rgba(166,188,9,0.72) 100%
    );
}

/* Info: contenido superpuesto z-index:3 */
#phocagallery .pg-novaltia-info {
    position: relative;
    z-index: 3;
    padding: 1.5rem;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: none !important;
    border-top: none !important;
    flex: none !important;
}

#phocagallery .pg-novaltia-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #fff !important;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#phocagallery .pg-novaltia-meta { display: none; }

/* ─── BADGE TIPO ──────────────────────────────────────────────── */
#phocagallery .pg-novaltia-badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
    backdrop-filter: blur(4px);
}
#phocagallery .pg-novaltia-badge:hover { transform: scale(1.08); }
#phocagallery .pg-novaltia-badge--fotos  { background: rgba(109,24,115,0.88); }
#phocagallery .pg-novaltia-badge--videos { background: rgba(166,188,9,0.92); }

/* ─── CONTADOR THUMBNAIL ──────────────────────────────────────── */
#phocagallery .pg-novaltia-count-thumb {
    position: absolute;
    bottom: 0.65rem;
    right: 0.65rem;
    z-index: 4;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 10px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    backdrop-filter: blur(4px);
}

/* ─── OVERLAY "VER ÁLBUM" ─────────────────────────────────────── */
#phocagallery .pg-novaltia-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
#phocagallery .pg-novaltia-card:hover .pg-novaltia-overlay { opacity: 1; }
#phocagallery .pg-novaltia-overlay-btn {
    background: rgba(255,255,255,0.92);
    color: #6d1873;
    padding: 0.45rem 1.2rem;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ─── BOTÓN PLAY VÍDEOS ───────────────────────────────────────── */
#phocagallery .pg-novaltia-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}
#phocagallery .pg-novaltia-play-circle {
    width: 48px;
    height: 48px;
    background: rgba(166,188,9,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(166,188,9,0.4);
    transition: all 0.25s ease;
}
#phocagallery .pg-novaltia-card:hover .pg-novaltia-play-circle { background: #8a9c07; transform: scale(1.08); }

/* ─── TARJETA OCULTA POR FILTRO ───────────────────────────────── */
#phocagallery .pg-novaltia-card.pg-oculta { display: none !important; }

/* ─── PAGINACIÓN ──────────────────────────────────────────────── */
#phocagallery .pg-pagination,
#phocagallery .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    list-style: none;
    padding: 0;
}
#phocagallery .pg-pagination li a,
#phocagallery .pg-pagination li span,
#phocagallery .pagination li a,
#phocagallery .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    transition: all 0.25s ease;
}
#phocagallery .pg-pagination li a:hover,
#phocagallery .pagination li a:hover { border-color: #6d1873; color: #6d1873; }
#phocagallery .pg-pagination li.active span,
#phocagallery .pagination li.active span { background: #6d1873; border-color: #6d1873; color: #fff; }

/* ─── CABECERA DE CONTENIDO (título + descripción) ────────────── */
/* Igual que Documentos: .content-header */
.theme-novaltia.layout-novaltiamultimedia #t4-phoca .content-header {
    /* margin-bottom: 2.5rem; */
    margin-bottom: 2rem;
}

.theme-novaltia.layout-novaltiamultimedia #t4-phoca .content-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #6d1873;
    margin-bottom: 1rem;
    margin-top:0;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #6d1873;
    display: inline-block;
}

.theme-novaltia.layout-novaltiamultimedia #t4-phoca .content-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.theme-novaltia.layout-novaltiamultimedia #t4-phoca .content-description strong {
    color: #6d1873;
    font-weight: 600;
}


/* ─── FIX PHOTOSWIPE LIGHTBOX ─────────────────────────────────────
   Selector de alta especificidad para ganar sobre photoswipe.css
   independientemente del orden de carga.
──────────────────────────────────────────────────────────────────── */
body .pswp.pswp--open {
    display: block !important;
}

/* ─── LAYOUT 2 COLUMNAS — vista category (.pg-cv) ────────────────
   Mismo layout que .pg-csv pero para la vista de subcategoría     */
.theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-cv {
    display: grid !important;
    grid-template-columns: 1fr 25rem;
    grid-template-rows: auto 1fr;
    gap: 0 3rem;
    padding: 0;
    align-items: start;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-cv > .page-header {
    grid-column: 1 / -1;
    grid-row: 1;
}

.theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-cv > aside.sidebar {
    grid-column: 2;
    grid-row: 2;
    margin-top: 3rem;
    margin-right: 5%;
}

/* Subcategorías dentro de category view — mismo grid */
/* ─── GRID DE CATEGORÍAS — unificado con contexto completo ──────── */

/* Vista raíz (pg-csv): 2 tarjetas con ancho máximo controlado */
.theme-novaltia.layout-novaltiamultimedia #phocagallery.pg-csv .pg-novaltia-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 380px));
    gap: 1.5rem;
    justify-content: start;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery .content {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Vistas de subcategorías (pg-cv): grid auto-fill */
.theme-novaltia.layout-novaltiamultimedia #phocagallery.pg-cv .pg-novaltia-grid,
.theme-novaltia.layout-novaltiamultimedia #phocagallery.pg-cv .pg-category-categories-top-box {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* Descripción de la categoría */
.theme-novaltia.layout-novaltiamultimedia #phocagallery.pg-cv .pg-category-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery.pg-cv .pg-category-desc strong {
    color: #6d1873;
}

@media (max-width: 1024px) {
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-cv {
        grid-template-columns: 1fr;
    }
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-cv > main.content,
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-cv > aside.sidebar {
        grid-column: 1;
        margin-top: 1.5rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
    .theme-novaltia.layout-novaltiamultimedia #t4-phoca #phocagallery.pg-cv > aside.sidebar {
        grid-row: 3;
    }
}

/* ─── VISTA CATEGORY — ajustes específicos ────────────────────── */

/* Ocultar botón volver — el sidebar tiene el árbol jerárquico */
.theme-novaltia.layout-novaltiamultimedia #phocagallery.pg-cv .pg-back-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
}

/* pg-novaltia-meta oculto globalmente — el contador está en pg-novaltia-count-thumb */

/* ─── VISTA ÁLBUM INDIVIDUAL (imágenes/vídeos) ────────────────────
   Estiliza el grid masonry de Phocagallery con tarjetas que
   muestran thumbnail + título debajo
──────────────────────────────────────────────────────────────────── */

/* Convertir el contenedor masonry en grid regular */
.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-photoswipe.pg-masonry,
.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-photoswipe {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1.5rem;
}

/* Cada figure es una tarjeta */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figure {
    display: flex !important;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
    cursor: pointer;
    margin: 0 !important;
    width: auto !important;
    position: relative;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figure:hover {
    box-shadow: 0 8px 24px rgba(109,24,115,0.15);
    transform: translateY(-2px);
}

/* El enlace ocupa toda la thumbnail */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figure a.pg-photoswipe-button {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #1a1a1a;
}

/* La imagen ocupa el enlace al 100% */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figure a.pg-photoswipe-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figure:hover a img {
    transform: scale(1.04);
}

/* Overlay sutil en hover */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figure a.pg-photoswipe-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(109,24,115,0.0);
    transition: background 0.25s ease;
    pointer-events: none;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figure:hover a.pg-photoswipe-button::after {
    background: rgba(109,24,115,0.2);
}

/* Icono play para vídeos */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figure a.pg-photoswipe-button[data-type="video"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(166,188,9,0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='5,3 19,12 5,21'/%3E%3C/svg%3E") center/18px no-repeat;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: transform 0.25s ease, background 0.25s ease;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figure:hover a[data-type="video"]::before {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: #8a9c07;
}

/* ─── FIGCAPTION — información debajo de la thumbnail ─────────── */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.875rem;
    background: #fff;
    border-top: 2px solid transparent;
    transition: border-color 0.25s ease;
    min-height: 44px;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figure:hover figcaption {
    border-top-color: #6d1873;
}

/* Texto del título */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge de tipo en figcaption */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption::before {
    content: '▶';
    font-size: 0.6rem;
    color: #a6bc09;
    flex-shrink: 0;
}

/* Para fotos cambiar el icono */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figure a[data-type="image"] ~ figcaption::before,
.theme-novaltia.layout-novaltiamultimedia #phocagallery figure a:not([data-type]) ~ figcaption::before {
    content: '◉';
    color: #6d1873;
}

/* Número de página/posición eliminado si existe */
.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-image-count {
    display: none;
}

/* Reset del masonry inline styles */
.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-msnr-container figure {
    left: auto !important;
    top: auto !important;
    position: relative !important;
}

/* ─── FIGCAPTION — información bajo cada imagen/vídeo ────────────── */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption {
    display: flex !important;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 0.875rem 0.75rem;
    background: #fff;
    border-top: 2px solid transparent;
    transition: border-color 0.25s ease;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figure:hover figcaption {
    border-top-color: #6d1873;
}

/* Primera línea: icono tipo + título */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption {
    font-family: 'Montserrat', sans-serif;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery .pg-item-type-icon {
    color: #6d1873;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0.3rem;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption .pg-item-caption-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Descripción — texto secundario */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption .pg-item-caption-desc {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.4;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fecha */
.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption .pg-item-caption-date {
    font-size: 0.72rem;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1rem;
}

.theme-novaltia.layout-novaltiamultimedia #phocagallery figcaption .pg-item-caption-date svg {
    color: #a6bc09;
    flex-shrink: 0;
}