@import "../common/css/variables.css";

.map-title {
    background: linear-gradient(to right, var(--color-vermelho900), var(--color-vermelho700));
}

.underline {
    background-color: transparent;
}

.map-title .h2, .map-title .h1 {
    color: var(--color-txt4);
    font-weight: 600;
}

.menu-description {
    background: var(--color-bg-light2) ;
}

.gradient-rectangle {
  background: linear-gradient(to top, #E7FFC7, #6ABD7C, #2A6159); 
}

.maplibre-canvas {
    font-family: var(--font-secondary);
}

.maplibregl-ctrl-scale {
    font: var(--font-h3);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-txt2);
    border-color: var(--color-txt2);
    border-bottom-left-radius: calc(var(--button-border-radius)/2);
    border-bottom-right-radius: calc(var(--button-border-radius)/2);
    user-select: none;
}

/* Estilo: Balão de Clique (claro, maior, com botão) */
.click-popup .maplibregl-popup-content {
    background-color: #ffffff;
    color: var(--color-txt1);
    border-radius: 4px;
    padding: 0px;
    font-family: var(--font-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 200px;
}

.click-popup .maplibregl-popup-close-button {
    font-size: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 8px;
    margin-right: 8px;
    width: 12px;
    height: 12px;
    color:var(--color-txt4);
    background-color: var(--color-txt3);
    border-radius: 50%;  
}

.map-popup span {
    font-family: var(--font-secondary);
}

.maplibregl-popup-content {
    padding: 0px;
    border-radius: 4px;
}

.img-container {
    width: 100%; 
    height: 60px; 
    overflow: hidden; 
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.img-container img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    object-position: center;
}

.tooltip-text {
    padding: 12px 12px;
}

.scrollable-item {
    max-height: 100px;
    overflow-y: auto;
    scrollbar-color: var(--color-bg-light3) white;
    scrollbar-width: thin;
}

.click-popup a {
    text-decoration:none
}

.balloon-link.color3 {
    font: var(--font-label);
    justify-content: center;
    text-align: center;
    background-color: var(--color3);
    color: var(--color-txt4);
    border-radius: 4px;
    padding: 8px;
    margin-top: 8px;
    
}

.balloon-link.color3:hover {
    background-color: var( --color-magenta700);
}

.hidden {
    display: none;
}

.cor-remocao {
    color: var(--color-vermelho)
}

.cor-ameaca {
    color: var(--color-amarelo)
}