/**
 * ==============================================================================
 * SINASSC 728 - VISOR FOTOGRÁFICO INSTITUCIONAL PREMIUM (LIGHTBOX)
 * ==============================================================================
 * Paleta Institucional:
 *   - Azul Institucional: #0662D9
 *   - Azul Oscuro:        #0A2540 / #061224
 *   - Blanco Puro:        #FFFFFF
 *   - Acentos:            #00F0FF / #38BDF8
 * ==============================================================================
 */

/* 1. CONTENEDOR PRINCIPAL Y FONDO BLUR OSCURO */
.fancybox-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    z-index: 99999 !important;
}

/* Fondo con gradiente radial institucional profundo y desenfoque */
.fancybox-container .fancybox-bg {
    background: radial-gradient(circle at center, rgba(14, 38, 68, 0.95) 0%, rgba(5, 16, 32, 0.98) 100%) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    opacity: 0 !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fancybox-container.fancybox-is-open .fancybox-bg {
    opacity: 1 !important;
}

/* Bloqueo suave del scroll del documento mientras el visor esté activo */
body.fancybox-active,
body.sinassc-lb-active {
    overflow: hidden !important;
}

/* 2. CABECERA INSTITUCIONAL SUPERIOR */
.sinassc-lb-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(7, 24, 46, 0.92) 0%, rgba(7, 24, 46, 0.75) 80%, rgba(7, 24, 46, 0) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(6, 98, 217, 0.25);
    z-index: 99999;
    box-sizing: border-box;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sinassc-lb-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}

/* Icono insignia institucional */
.sinassc-lb-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0662D9 0%, #00F0FF 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 14px rgba(6, 98, 217, 0.45);
    flex-shrink: 0;
}

/* Título de la cabecera */
.sinassc-lb-title {
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* Contador de fotografías */
.sinassc-lb-counter {
    background: rgba(6, 98, 217, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #E0F2FE;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sinassc-lb-counter .sinassc-lb-sep {
    color: rgba(224, 242, 254, 0.5);
    font-size: 12px;
}

/* 3. TOOLBAR Y BOTONES SUPERIORES (ZOOM Y CIERRE) */
.fancybox-container .fancybox-toolbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Botones genéricos de la barra de herramientas */
.fancybox-container .sinassc-lb-control-btn,
.fancybox-container .fancybox-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    background: rgba(10, 37, 64, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.fancybox-container .sinassc-lb-control-btn svg,
.fancybox-container .fancybox-button svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
}

/* Hover en botón Zoom y controles generales */
.fancybox-container .sinassc-lb-control-btn:hover,
.fancybox-container .fancybox-button:hover {
    background: #0662D9 !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 18px rgba(6, 98, 217, 0.5) !important;
}

/* Botón de cierre destacado */
.fancybox-container .sinassc-lb-control-btn--close,
.fancybox-container .fancybox-button--close {
    background: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #FECACA !important;
}

.fancybox-container .sinassc-lb-control-btn--close:hover,
.fancybox-container .fancybox-button--close:hover {
    background: #DC2626 !important;
    border-color: #F87171 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.55) !important;
}

/* Ocultar botones no requeridos de la toolbar por defecto */
.fancybox-container .fancybox-button--play,
.fancybox-container .fancybox-button--fullscreen,
.fancybox-container .fancybox-button--thumbs,
.fancybox-container .fancybox-button--share,
.fancybox-container .fancybox-button--download {
    display: none !important;
}

/* 4. FLECHAS DE NAVEGACIÓN (ANTERIOR / SIGUIENTE) */
.fancybox-container .fancybox-navigation {
    display: block !important;
}

.fancybox-container .fancybox-navigation .fancybox-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(10, 37, 64, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 99998 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(6, 98, 217, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Remover pseudo-elementos predeterminados de fancybox */
.fancybox-container .fancybox-navigation .fancybox-button:before {
    display: none !important;
}

.fancybox-container .fancybox-navigation .fancybox-button--arrow_left {
    left: 28px !important;
}

.fancybox-container .fancybox-navigation .fancybox-button--arrow_right {
    right: 28px !important;
}

.fancybox-container .fancybox-navigation .fancybox-button svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    fill: none !important;
}

/* Hover de flechas con azul institucional y aura de luz */
.fancybox-container .fancybox-navigation .fancybox-button:hover:not([disabled]) {
    background: #0662D9 !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 10px 28px rgba(6, 98, 217, 0.65), 0 0 24px rgba(6, 98, 217, 0.5) !important;
}

.fancybox-container .fancybox-navigation .fancybox-button[disabled] {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
}

/* 5. PRESENTACIÓN DE LA FOTOGRAFÍA (CENTRO, PROPORCIÓN Y ESTILO) */
.fancybox-container .fancybox-stage {
    top: 64px !important;
    bottom: 50px !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
}

.fancybox-container .fancybox-slide {
    padding: 24px !important;
}

.fancybox-container .fancybox-slide--image {
    padding: 20px 80px !important; /* Espacio para que las flechas nunca tapen la foto en escritorio */
}

/* Envoltura de la imagen */
.fancybox-container .fancybox-image-wrap {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 65px -12px rgba(0, 0, 0, 0.85),
                0 0 0 1px rgba(255, 255, 255, 0.14),
                0 0 40px rgba(6, 98, 217, 0.22) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* La fotografía en sí */
.fancybox-container .fancybox-image {
    border-radius: 14px !important;
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
    image-rendering: -webkit-optimize-contrast !important;
}

/* Estados de cursor para interacción y zoom */
.fancybox-can-zoomIn .fancybox-image-wrap {
    cursor: zoom-in !important;
}
.fancybox-can-zoomOut .fancybox-image-wrap {
    cursor: zoom-out !important;
}
.fancybox-can-drag .fancybox-image-wrap {
    cursor: grab !important;
}
.fancybox-is-dragging .fancybox-image-wrap {
    cursor: grabbing !important;
}

/* 6. PIE DE FOTO / DESCRIPCIÓN (SOLO SI EXISTE INFORMACIÓN) */
.fancybox-container .fancybox-caption-wrap {
    position: absolute !important;
    bottom: 16px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 24px !important;
    background: transparent !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 99998 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fancybox-container.fancybox-show-caption .fancybox-caption-wrap {
    opacity: 1 !important;
    visibility: visible !important;
}

.fancybox-container .fancybox-caption {
    display: inline-block !important;
    max-width: 720px !important;
    padding: 10px 22px !important;
    margin: 0 auto !important;
    background: rgba(7, 24, 46, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 12px !important;
    color: #F1F5F9 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    border-top: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(6, 98, 217, 0.2) !important;
    pointer-events: auto !important;
}

/* Si no hay texto de caption, asegurar que no ocupe espacio */
.fancybox-container .fancybox-caption:empty {
    display: none !important;
}

/* 7. SPINNER DE CARGA INSTITUCIONAL */
.fancybox-container .fancybox-loading {
    border: 4px solid rgba(6, 98, 217, 0.2) !important;
    border-top: 4px solid #00F0FF !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important;
}

/* 8. ADAPTABILIDAD RESPONSIVE */
@media (max-width: 991px) {
    .sinassc-lb-header {
        height: 58px;
        padding: 0 16px;
    }

    .sinassc-lb-title {
        font-size: 14px;
    }

    .fancybox-container .fancybox-stage {
        top: 58px !important;
        bottom: 50px !important;
    }

    .fancybox-container .fancybox-slide--image {
        padding: 16px 65px !important;
    }

    .fancybox-container .fancybox-navigation .fancybox-button {
        width: 46px !important;
        height: 46px !important;
    }

    .fancybox-container .fancybox-navigation .fancybox-button--arrow_left {
        left: 14px !important;
    }

    .fancybox-container .fancybox-navigation .fancybox-button--arrow_right {
        right: 14px !important;
    }
}

@media (max-width: 640px) {
    .sinassc-lb-header {
        height: 54px;
        padding: 0 12px;
    }

    .sinassc-lb-badge {
        width: 30px;
        height: 30px;
        font-size: 13px;
        border-radius: 8px;
    }

    .sinassc-lb-title {
        font-size: 13px;
        max-width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sinassc-lb-counter {
        font-size: 11px;
        padding: 2px 8px;
    }

    .fancybox-container .sinassc-lb-control-btn,
    .fancybox-container .fancybox-button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 8px !important;
    }

    .fancybox-container .sinassc-lb-control-btn svg,
    .fancybox-container .fancybox-button svg {
        width: 15px !important;
        height: 15px !important;
    }

    .fancybox-container .fancybox-stage {
        top: 54px !important;
        bottom: 40px !important;
    }

    .fancybox-container .fancybox-slide--image {
        padding: 10px 10px !important; /* Aprovechar todo el ancho en móviles */
    }

    .fancybox-container .fancybox-navigation .fancybox-button {
        width: 40px !important;
        height: 40px !important;
        background: rgba(10, 37, 64, 0.9) !important;
    }

    .fancybox-container .fancybox-navigation .fancybox-button--arrow_left {
        left: 8px !important;
    }

    .fancybox-container .fancybox-navigation .fancybox-button--arrow_right {
        right: 8px !important;
    }

    .fancybox-container .fancybox-navigation .fancybox-button svg {
        width: 18px !important;
        height: 18px !important;
    }

    .fancybox-container .fancybox-caption {
        font-size: 12px !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
    }
}