/*#imagemMaquete{
    width: 100%;
    object-fit: scale-down;
}*/
#imagemMaquete {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain; /* Ajusta a imagem para manter a proporção sem cortar */
    transform-origin: center;
    transition: transform 0.1s ease-out;
    cursor: grab;
    position: relative;
    z-index: -1;
}

#imagemMaquete:active {
    cursor: grabbing;
}

/* Container para as marcações de lotes */
#icones {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permite que os eventos passem através */
    transform-origin: center;
    transition: transform 0.1s ease-out;
}

/* Marcações dos lotes */
.lote-marcacao {
    pointer-events: auto; /* Reabilita eventos para as marcações */
}

.lote-marcacao:hover {
    z-index: 20 !important;
}

.circulo {
    width: 20px;            /* Largura do círculo */
    height: 20px;           /* Altura do círculo */
    border-radius: 50%;      /* Faz o elemento ter forma circular */
  /* Cor inicial do círculo */
}

/* Estilo adicional para mudar a cor do círculo */
.circulo:hover {
    background-color: blue; /* Cor ao passar o mouse */
}

/* Para garantir que os blocos não sobreponham a imagem */
.content-section {
    overflow-y: auto; /* Adiciona rolagem se o conteúdo for maior que o bloco */
}

/* Para garantir que o conteúdo da imagem ocupe a área restante após os blocos */
.image-section {
    flex-grow: 1; /* Faz com que a imagem ocupe o espaço restante */
    height: auto;
    position: relative;
    overflow: hidden; /* Evita que a imagem com zoom saia dos limites */
    cursor: grab;
}

.image-section:active {
    cursor: grabbing;
}

/* Definindo o layout para o container */
.container-fluid {
    display: flex;
    /* flex-direction: column; */
    flex-direction: column-reverse;
    height: 100vh; /* Ocupa toda a altura da tela */
}

/* Linha que contém os três blocos */
.content-row {
    display: flex;
    gap: 15px;
    padding: 15px;
}

/* Ajuste para os blocos de conteúdo */
.block {
    flex-grow: 1;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .content-row {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }
    
    .block {
        min-height: auto;
    }
    
    #zoom-controls {
        bottom: 10px !important;
        right: 10px !important;
    }
    
    #zoom-controls button {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }
}

/* Prevenção de seleção de texto durante o pan */
.image-section.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Suavização para dispositivos com touch */
.image-section {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
}