/**
 * leaflet-custom.css
 * 
 * Estilos customizados para o mapa Leaflet do SACE
 * Sobrescreve estilos padrão do Leaflet
 * 
 * @version 1.3
 * @since 16/02/2026
 */

/* ===== FORÇA OPACIDADE 100% APENAS NOS PONTOS ===== */

/* Usa classe específica para garantir opacidade apenas nos pontos */
.ponto-monitoramento {
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
    opacity: 1 !important;
}

/* Garante opacidade em hover */
.ponto-monitoramento:hover {
    fill-opacity: 1 !important;
    opacity: 1 !important;
}

/* Garante opacidade em estados ativos */
.ponto-monitoramento:active,
.ponto-monitoramento:focus {
    fill-opacity: 1 !important;
    opacity: 1 !important;
}

/* Garante opacidade em markers (icons) */
.leaflet-marker-icon {
    opacity: 1 !important;
}

/* ===== TEXTO DOS PONTOS (SEM BOX) ===== */

/* Estilo do texto puro abaixo do ponto */
.leaflet-marker-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.leaflet-marker-label div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== TOOLTIP (CASO AINDA EXISTA) ===== */

/* Remove sombra excessiva e ajusta estilo */
.leaflet-tooltip-nome {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #000000 !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    color: #000000 !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8),
                 0 0 3px rgba(255, 255, 255, 0.6) !important;
}

.leaflet-tooltip-nome.leaflet-tooltip-bottom:before {
    border-bottom-color: #000000 !important;
}

.leaflet-tooltip-nome .leaflet-tooltip-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== POPUP ===== */

/* Ajusta estilo do popup */
/* ======================================================
   Popup customizado - Ponto de Monitoramento
   ====================================================== */
.leaflet-popup-content-wrapper {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.4;
}
.leaflet-popup-tip-container {
    margin-top: -1px;
}


/* ===== Z-INDEX PARA ORDEM DAS CAMADAS ===== */

/* Garante que pontos fiquem sempre no topo */
.leaflet-overlay-pane svg {
    z-index: auto;
}

/* Pontos ficam acima de tudo */
.leaflet-marker-pane {
    z-index: 600 !important;
}

/* Tooltips acima dos markers */
.leaflet-tooltip-pane {
    z-index: 650 !important;
}

/* Popups no topo absoluto */
.leaflet-popup-pane {
    z-index: 700 !important;
}

/* ===== CONTROLES DO MAPA ===== */

/* Ajusta controle de zoom */
.leaflet-control-zoom {
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
}

.leaflet-control-zoom a {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.leaflet-control-zoom a:hover {
    background-color: #f4f4f4 !important;
}

/* ===== LEGENDA CUSTOMIZADA ===== */

.legend {
    padding: 10px;
    background: white;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    line-height: 20px;
    color: #555;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.9;
}

.legend-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}