/* Página de girar: botões de giro e miniaturas giradas por CSS (variáveis definidas em Girar.js) */
.controles-giro {
    justify-content: center;
}

.btn-giro {
    background: #fff;
    border: 1.5px solid #D1D5DB;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

    .btn-giro:hover {
        border-color: #1D6FE8;
        color: #1D6FE8;
    }

    .btn-giro[aria-pressed="true"] {
        background: #EEF6FF;
        border-color: #1D6FE8;
        color: #1D6FE8;
    }

.estado-giro {
    font-size: 0.88rem;
    color: #4B5563;
}

#preview .preview-item img {
    object-fit: contain;
    background: #F3F4F6;
    transform: rotate(var(--girar, 0deg)) scale(calc(var(--espelho-x, 1) * var(--escala, 1)), calc(var(--espelho-y, 1) * var(--escala, 1)));
    transition: transform 0.25s ease;
}