/* map_studio.css - Genera Studio Edition */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

#map-container { overflow: hidden !important; background-color: #0f172a !important; }
.leaflet-container { background-color: #0f172a !important; }

#viewfinder {
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    border: 2px dashed #06b6d4; 
    /* Máscara ao redor da área de corte em azul escuro (grafite) translúcido */
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.75); 
    pointer-events: none; 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease;
    background: transparent !important;
}

.formato-quadrado { width: 220px; height: 220px; border-radius: 0; }
.formato-circulo { width: 220px; height: 220px; border-radius: 50%; }
.formato-retrato { width: 180px; height: 254px; border-radius: 0; } 
.formato-paisagem { width: 254px; height: 180px; border-radius: 0; } 
#viewfinder::after { content: '+'; color: #06b6d4; opacity: 0.8; font-size: 24px; font-weight: 300; }

.triangle-snake {
    stroke-dasharray: 80 165; 
    stroke-dashoffset: 0;
    animation: moveSnake 1.5s linear infinite;
}
@keyframes moveSnake { to { stroke-dashoffset: -245; } }

#palco-scroll { overflow: auto; position: relative; display: flex; align-items: center; justify-content: center; }
#svg-preview { transition: transform 0.2s ease-out; transform-origin: center center; }
#svg-preview svg { 
    height: 75vh; width: auto; max-width: none;
    isolation: isolate;
}

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: pointer; background: #334155; }
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; height: 14px; width: 8px; background: #06b6d4; 
    cursor: pointer; margin-top: -6px; border-radius: 0; transition: background 0.2s;
}
input[type=range]::-webkit-slider-thumb:hover { background: #67e8f9; box-shadow: 0 0 8px rgba(6,182,212,0.5); }

input[type="color"] { appearance: none; -webkit-appearance: none; border: none; width: 28px; height: 28px; border-radius: 0; cursor: pointer; padding: 0; background: transparent; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid #334155; border-radius: 0; }

.painel-inativo { filter: grayscale(100%); opacity: 0.5; pointer-events: none; }