/* =========================================================
   INGPRO — CONTROLES DE ZOOM
   Archivo: css/catalogo-zoom.css
========================================================= */

/* =========================================================
   DISTRIBUCIÓN DE LA BARRA
========================================================= */

.catalog-viewer__toolbar {
    grid-template-columns:
        auto minmax(0, 1fr) auto auto !important;
}

/* =========================================================
   GRUPO DE ZOOM
========================================================= */

.catalog-zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    padding: 0.3rem;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    background-color:
        rgba(255, 255, 255, 0.055);
}

.catalog-zoom__button,
.catalog-zoom__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;
    margin: 0;
    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    background-color:
        rgba(255, 255, 255, 0.07);

    color: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        opacity 0.25s ease;
}

.catalog-zoom__button {
    width: 38px;

    border-radius: 50%;
}

.catalog-zoom__reset {
    min-width: 68px;
    padding-inline: 0.7rem;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 850;
}

/* Iconos */

.catalog-zoom__button svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.catalog-zoom__button:hover:not(:disabled),
.catalog-zoom__reset:hover:not(:disabled) {
    border-color: #fdb427;

    background-color: #fdb427;
    color: #06142f;

    transform: translateY(-2px);
}

.catalog-zoom__button:focus-visible,
.catalog-zoom__reset:focus-visible {
    outline: 3px solid #fdb427;
    outline-offset: 3px;
}

.catalog-zoom__button:disabled,
.catalog-zoom__reset:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .catalog-viewer__toolbar {
        grid-template-columns:
            auto minmax(0, 1fr) auto !important;
    }

    .catalog-viewer__status {
        display: none;
    }
}

/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 760px) {
    .catalog-viewer__toolbar {
        grid-template-columns:
            auto minmax(0, 1fr) !important;

        gap: 0.7rem;
    }

    .catalog-viewer__toolbar>p {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-zoom {
        grid-column: 1 / -1;

        justify-self: center;

        margin-top: 0.2rem;
    }

    .catalog-zoom__button {
        width: 42px;
        height: 42px;
    }

    .catalog-zoom__reset {
        height: 42px;
        min-width: 82px;

        font-size: 0.78rem;
    }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .catalog-zoom__button,
    .catalog-zoom__reset {
        transition: none;
    }
}