/* IRCPode: carrusel y visor ampliado v3 */

body.page-ircpode .irc-ref-gallery figure > button {
    position: relative;
    cursor: zoom-in;
}

body.page-ircpode .irc-ref-gallery figure > button::after {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;

    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;

    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;

    color: white;
    background: rgba(2, 12, 23, .88);
    box-shadow: 0 8px 22px rgba(0,0,0,.45);

    content: "+";
    font-size: 1.25rem;
    font-weight: 800;

    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);

    transition:
        opacity .18s ease,
        transform .18s ease;
}

body.page-ircpode .irc-ref-gallery figure > button:hover::after,
body.page-ircpode .irc-ref-gallery figure > button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

body.page-ircpode .irc-ref-gallery.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

body.ircpode-viewer-open {
    overflow: hidden;
}

/* Visor */
#ircpode-viewer-v3[hidden] {
    display: none !important;
}

#ircpode-viewer-v3 {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    color: white;
    background: rgba(0, 5, 12, .96);
    backdrop-filter: blur(15px);
}

#ircpode-viewer-v3 .viewer-toolbar {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 10px 20px;
    border-bottom: 1px solid rgba(157, 201, 232, .22);
    background: rgba(3, 14, 26, .96);
}

#ircpode-viewer-v3 .viewer-title {
    overflow: hidden;
    margin: 0;

    color: #f4f8ff;
    font-size: 1.05rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ircpode-viewer-v3 .viewer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#ircpode-viewer-v3 .viewer-button {
    display: inline-grid;
    min-width: 42px;
    height: 42px;
    place-items: center;

    padding: 0 12px;
    border: 1px solid rgba(148, 195, 227, .38);
    border-radius: 11px;

    color: white;
    background: rgba(255,255,255,.05);

    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

#ircpode-viewer-v3 .viewer-button:hover:not(:disabled) {
    border-color: #2ad8f5;
    background: rgba(42, 216, 245, .12);
}

#ircpode-viewer-v3 .viewer-button:disabled {
    opacity: .35;
    cursor: default;
}

#ircpode-viewer-v3 .viewer-close {
    border-radius: 50%;
    font-size: 1.45rem;
}

#ircpode-viewer-v3 .viewer-zoom {
    min-width: 60px;
    color: #a8bbcf;
    font-size: .8rem;
    text-align: center;
}

#ircpode-viewer-v3 .viewer-viewport {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;

    overflow: auto;
    padding: 28px;

    overscroll-behavior: contain;
}

#ircpode-viewer-v3 .viewer-image {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 22px;

    background: #eef4fb;
    box-shadow: 0 35px 110px rgba(0,0,0,.78);

    cursor: zoom-in;
    image-rendering: auto;

    transition: width .15s ease;
}

#ircpode-viewer-v3[data-zoomed="true"] .viewer-image {
    cursor: zoom-out;
}

#ircpode-viewer-v3 .viewer-help {
    position: absolute;
    right: 18px;
    bottom: 14px;

    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 9px;

    color: #9fb3c8;
    background: rgba(2, 12, 23, .75);

    font-size: .72rem;
    pointer-events: none;
}

@media (max-width: 700px) {
    #ircpode-viewer-v3 .viewer-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }

    #ircpode-viewer-v3 .viewer-title {
        width: 100%;
    }

    #ircpode-viewer-v3 .viewer-controls {
        width: 100%;
        justify-content: center;
    }

    #ircpode-viewer-v3 .viewer-button {
        min-width: 39px;
        height: 38px;
        padding-inline: 9px;
    }

    #ircpode-viewer-v3 .viewer-viewport {
        padding: 12px;
    }

    #ircpode-viewer-v3 .viewer-image {
        border-radius: 15px;
    }

    #ircpode-viewer-v3 .viewer-help {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ircpode-viewer-v3 .viewer-image {
        transition: none;
    }
}