[x-cloak] {
    display: none !important;
}

#principal {
    width: 100%;
    height: 100%;
    max-width: 1400px;

    #grilla {
        position: relative;
        grid-template-columns: repeat(41, 25px);
        grid-auto-rows: 25px;
        gap: 0;
        background: #2272BD;
        padding: 0;
        outline: none;
        transform-style: preserve-3d;
        transform-origin: center center;
        transform: scale(var(--zoom, 1));

        &::before {
            content: "";
            position: absolute;
            inset: -30px;
            background: #2272BD;
            z-index: -2;
            pointer-events: none;
        }

        #marcas {
            position: absolute;
            inset: 0;
            border: 2px solid #fff;
            overflow: hidden;
            pointer-events: none;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            z-index: 40;

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: calc(50% - 1px);
                width: 2px;
                height: 100%;
                background: #fff;
            }

            #verticales {
                position: absolute;
                inset: 0;

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    width: 2px;
                    height: 100%;
                    background: #fff;
                    left: 248px;
                }

                &::after {
                    left: 773px;
                }
            }

            #circulares {
                position: absolute;
                inset: 0;

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    top: 98px;
                    left: 0;
                    width: 300px;
                    aspect-ratio: 1;
                    border-radius: 100%;
                    border: 2px solid #fff;
                    transform: translateX(-50%);
                }

                &::after {
                    left: 1023px;
                }
            }
        }

        .lote {
            position: relative;
            transform-style: preserve-3d;

            button {
                width: 25px;
                height: 25px;
                padding: 0;
                margin: 0;
                border: none;
                outline: 1px solid rgba(255, 255, 255, .10);
                outline-offset: -1px;
                backface-visibility: hidden;
                transform-style: preserve-3d;
            }
        }
    }

    #lotes.tresde {
        #grilla {
            position: relative;
            z-index: 0;
            transform-style: preserve-3d;
            transform-origin: center center;
            transform: rotateX(60deg) rotateZ(-45deg) scale(calc(1.07 * var(--zoom, 1)));
            filter: drop-shadow(0 60px 45px rgba(0, 0, 0, .35));

            #marcas {
                transform: translateZ(2px);
                z-index: 40;
            }

            .lote button {
                transform: translateZ(3px);
            }
        }
    }

    #watermark {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../img/watermark2.svg');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.1;
    }
}