/* Estilos da aplicação (antes repetidos inline em cada popup/tabela) */

/* Acordeão de histórico nos modais */
.siggarr-acordeao.accordion-item {
    margin-bottom: 5px;
    border-radius: 4px;
}
.siggarr-acordeao .accordion-header {
    margin: 0;
}
.siggarr-acordeao .accordion-button {
    width: 100%;
    padding: 10px 30px 10px 10px;
    text-align: left;
    background: #f0f0f0;
    border: none;
    outline: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    position: relative;
    user-select: none;
}
.siggarr-acordeao .accordion-button .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    font-size: 14px;
    pointer-events: none;
}
.siggarr-acordeao .accordion-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 10px;
    border-top: 1px solid #ccc;
    transition: max-height 0.6s ease-in-out, padding 0.3s ease-in-out;
}
.siggarr-acordeao .accordion-body.show {
    max-height: 1000px;
    padding: 10px;
}

/* Botão "Baixar camada" dos popups */
.siggarr-baixar-feicao {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.siggarr-baixar-feicao label {
    margin: 0;
}
.siggarr-baixar-feicao button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}

/* Janela da tabela de atributos */
.janela-tabela {
    padding: 15px;
    font-family: sans-serif;
    font-size: 12px;
    background-color: #f8f9fa;
}
.janela-tabela .table-container {
    background: #fff;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.janela-tabela .table td,
.janela-tabela .table th {
    width: auto;
    font-size: 12px;
}
.janela-tabela tr.selected td {
    background-color: #d1e7dd !important;
}
.janela-tabela .search-box {
    max-width: 250px;
}

/* Login */
.pagina-login {
    background: #f6f9ff;
    font-family: "Open Sans", sans-serif;
}

/* Legenda por condição: checkbox para mostrar/ocultar cada condição */
.line-with-text .legenda-categoria {
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.line-with-text.categoria-oculta {
    opacity: 0.45;
}
.line-with-text.categoria-vazia .text {
    color: #9aa0a6;
}
.line-with-text .categoria-total {
    color: #6c757d;
}

/* Botão "ampliar região" ativo (aguardando a seleção no mapa) */
.leaflet-bar a.zoom-area-ativo {
    background-color: #cfe8ff !important;
    box-shadow: inset 0 0 0 2px #0d6efd;
}

/* ==========================================================================
   Celular e tablet (até 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Mapa ocupando toda a área abaixo do cabeçalho */
    #main.main {
        padding: 0;
    }
    #main .section,
    #main .row,
    #main .col-lg-6 {
        margin: 0;
        padding: 0;
    }
    #map {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        border-radius: 0;
        box-shadow: none;
    }

    /* Cabeçalho compacto */
    .header {
        padding-left: 8px;
        z-index: 1000002 !important;
    }
    .header .logo span {
        font-size: 20px;
    }
    .header .btn {
        padding: 4px 10px;
        margin-right: 6px !important;
        font-size: 13px;
    }
    .header-nav .nav-profile img {
        max-height: 32px;
    }

    /* Menu lateral acima do mapa e dos controles, com fundo escurecido */
    .sidebar {
        z-index: 1000001;
        width: min(88vw, 360px);
        left: calc(-1 * min(88vw, 360px) - 30px);
        padding: 12px;
    }
    body.toggle-sidebar .sidebar {
        left: 0;
    }
    body.toggle-sidebar::after {
        content: '';
        position: fixed;
        inset: 60px 0 0 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1000000;
    }
    .sidebar .nav-tabs .nav-link {
        font-size: 13px;
        padding: 8px 4px;
    }
    .sidebar-nav .nav-link {
        font-size: 14px;
        padding: 10px 12px;
    }
    .sidebar-nav .nav-content a {
        padding: 8px 0 8px 20px;
    }
    .sidebar .table input.form-control,
    .sidebar .consulta {
        font-size: 16px; /* evita zoom automático do iOS ao focar */
    }
    .pontoGms {
        padding: 8px 10px;
    }

    /* Legenda como painel inferior recolhível */
    #movableDiv.draggable {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: 100% !important;
        max-width: none !important; /* a largura inicial do computador não vale aqui */
        height: auto !important;
        max-height: 45vh;
        border-radius: 12px 12px 0 0;
        z-index: 999999;
    }
    #movableDiv .draggable-header {
        cursor: pointer;
        padding: 8px;
        border-radius: 12px 12px 0 0;
    }
    #movableDiv .draggable-header::after {
        content: ' ▼';
    }
    #movableDiv.legenda-recolhida .draggable-header::after {
        content: ' ▲';
    }
    #movableDiv #texto {
        max-height: calc(45vh - 40px);
        height: auto;
    }
    #movableDiv.legenda-recolhida #texto {
        display: none;
    }
    #movableDiv .resize-handle,
    #mapCoordDIV {
        display: none !important;
    }

    /* Controles do mapa menores e escala acima da legenda recolhida */
    .leaflet-touch .leaflet-bar a {
        width: 32px;
        height: 32px;
        line-height: 32px;
    }
    .leaflet-bottom.leaflet-left {
        bottom: 42px;
    }
    .leaflet-control-attribution {
        font-size: 9px;
    }

    /* Modais quase em tela cheia */
    .modal-dialog {
        margin: 8px;
    }
    .modal-dialog-scrollable .modal-content {
        max-height: calc(100dvh - 16px);
    }
    .modal-body {
        word-break: break-word;
    }
    #borderedTabJustified {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    #borderedTabJustified .nav-link {
        font-size: 12px;
        white-space: nowrap;
        padding: 6px 8px;
    }

    /* Itens da legenda quebram linha em vez de estourar a largura */
    #texto .flex-container {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Janela da tabela de atributos */
    .janela-tabela {
        padding: 6px;
    }
    .janela-tabela .search-box {
        max-width: none;
        flex: 1 1 140px;
    }
}

/* ---------------------------------------------------------------- estilo das camadas (🎨) */
.siggarr-icone { background: transparent; border: none; }
.siggarr-icone svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.siggarr-ponto { display: inline-block; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #333; box-sizing: border-box; }
.siggarr-simbolo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); box-sizing: border-box; }
.siggarr-amostra { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; margin-right: 10px; }
.categoria-editavel .color-box, .categoria-editavel .line, .categoria-editavel img, .categoria-editavel .siggarr-amostra { cursor: pointer; }
.categoria-editavel .color-box:hover, .categoria-editavel .line:hover, .categoria-editavel img:hover, .categoria-editavel .siggarr-amostra:hover { outline: 2px solid #0d6efd; outline-offset: 1px; }
.siggarr-painel-estilo { position: fixed; z-index: 1000006; width: 300px; max-width: calc(100vw - 16px); max-height: 75vh; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 8px 10px; font-size: 13px; }
.siggarr-painel-estilo .pe-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 6px; }
.siggarr-painel-estilo .pe-cabecalho b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siggarr-painel-estilo .pe-fechar { border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.siggarr-painel-estilo .pe-linha { margin-bottom: 8px; }
.siggarr-painel-estilo label { display: block; font-weight: 600; margin-bottom: 2px; }
.siggarr-painel-estilo input[type=range] { width: calc(100% - 45px); vertical-align: middle; }
.siggarr-painel-estilo .pe-cor { width: 40px; height: 28px; padding: 0; border: 1px solid #ccc; vertical-align: middle; }
.siggarr-painel-estilo .pe-cores { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; width: calc(100% - 48px); }
.siggarr-painel-estilo .pe-cor-rapida { width: 18px; height: 18px; border: 1px solid #999; border-radius: 3px; padding: 0; cursor: pointer; }
.siggarr-painel-estilo .pe-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.siggarr-painel-estilo .pe-simbolo { height: 30px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.siggarr-painel-estilo .pe-simbolo[data-tipo=original] { grid-column: span 2; font-size: 11px; }
.siggarr-painel-estilo .pe-simbolo img { max-width: 22px; max-height: 22px; }
.siggarr-painel-estilo .pe-simbolo.ativo { border-color: #0d6efd; background: #e7f0ff; box-shadow: 0 0 0 1px #0d6efd; }
.siggarr-painel-estilo .pe-acoes { text-align: right; }
.line-with-text .categoria-estilo { border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 0 4px; margin-left: 2px; opacity: .55; }
.line-with-text .categoria-estilo:hover, .line-with-text .categoria-estilo:focus { opacity: 1; }

/* ---------------------------------------------------------------- pasta "Textos" da legenda */
.texto-legenda { align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.texto-legenda .texto-legenda-nome { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13px; white-space: nowrap; }
.texto-legenda > button { padding: 0 3px; }
.texto-legenda .texto-amostra { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; border: 1px solid #bbb; border-radius: 4px; font-size: 13px; margin-right: 4px; flex: none; }
.texto-legenda > button, .texto-legenda > input[type=checkbox] { flex: none; }
.texto-legenda .texto-legenda-campo { flex: 1 1 100%; width: 100%; margin-left: 22px; max-width: calc(100% - 22px); min-height: 26px; resize: vertical; font-size: 13px; padding: 2px 6px; border: 1px solid #ccc; border-radius: 4px; }
.texto-legenda .texto-legenda-campo:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.2); }

/* ---------------------------------------------------------------- ordem das camadas (arrastar ⠿) */
.legenda-item-movel { position: relative; padding-left: 16px; }
.legenda-alca { position: absolute; left: 0; top: 1px; width: 14px; text-align: center; cursor: grab; touch-action: none; user-select: none; color: #9aa0a6; font-size: 14px; line-height: 1.3; }
.legenda-alca:hover { color: #0d6efd; }
.legenda-arrastando { opacity: .75; background: #eef4ff; outline: 1px dashed #0d6efd; border-radius: 4px; }
.legenda-arrastando > .legenda-alca { cursor: grabbing; color: #0d6efd; }
@media (max-width: 768px) { .legenda-alca { font-size: 18px; width: 18px; } .legenda-item-movel { padding-left: 20px; } }

/* ---------------------------------------------------------------- abrir/fechar condições (▾/▸) */
.legenda-recolher { border: none; background: transparent; cursor: pointer; padding: 0 4px 0 0; font-size: 13px; line-height: 1; color: #555; width: 16px; flex: none; }
.legenda-recolher:hover { color: #0d6efd; }
.line-with-text.condicao-recolhida { display: none !important; }

/* ---------------------------------------------------------------- ⚙️ opções da entrada da legenda */
#texto .flex-container { flex-wrap: wrap; }
.legenda-config { opacity: .7; flex: none; }
.legenda-config:hover, .legenda-config.ativo { opacity: 1; }
.legenda-config.ativo { background: #e7f0ff !important; border-radius: 4px; }
/* ícones na própria linha, logo após o ⚙️, abrindo da esquerda para a direita */
.legenda-acoes { display: inline-flex; flex-wrap: nowrap; align-items: center; max-width: 0; overflow: hidden; opacity: 0; visibility: hidden; white-space: nowrap; vertical-align: middle; flex: none;
  transition: max-width .3s ease, opacity .2s ease, visibility 0s linear .3s; }
.legenda-acoes.aberta { max-width: 400px; opacity: 1; visibility: visible; transition-delay: 0s; }
.legenda-acoes > button { flex: none; }
.legenda-acoes > input[type=range] { flex: none; }
.legenda-acoes .form-switch { margin-left: 8px; min-height: 0; margin-bottom: 0; flex: none; }
.line-with-text .categoria-estilo { display: none; }
.opcoes-abertas .line-with-text .categoria-estilo { display: inline-block; }

/* liga/desliga alinhado ao ⚙️ e ao X */
.legenda-visivel { margin: 0 0 0 6px; width: 14px; height: 14px; flex: none; vertical-align: middle; position: relative; top: 0; }
.legenda-visivel + .legenda-config, .legenda-config { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 3px; }
.legenda-remover { display: inline-flex; align-items: center; height: 22px; padding: 0 4px !important; flex: none; }

/* ---------------------------------------------------------------- coluna do símbolo (alinha as camadas) */
.legenda-simbolo { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-width: 32px; height: 22px; margin-right: 8px; flex: none; vertical-align: middle; }
.legenda-simbolo > * { margin: 0 !important; }
.legenda-simbolo > img { max-width: 30px !important; max-height: 22px !important; }
.legenda-simbolo > .color-box { min-width: 24px !important; width: 24px; }
.legenda-recolher { margin-left: 4px; }
.legenda-detalhada { margin-left: 5px; }

/* ---------------------------------------------------------------- 📝 editor de atributos (tabela embaixo) */
.editor-atributos { position: fixed; left: 0; right: 0; bottom: 0; height: 38vh; min-height: 160px; z-index: 1000003; background: #fff; border-top: 2px solid #0d6efd; box-shadow: 0 -4px 16px rgba(0,0,0,.18); display: none; flex-direction: column; font-size: 13px; }
.editor-atributos.aberto { display: flex; }
.ea-redimensionar { height: 6px; cursor: ns-resize; background: linear-gradient(#e9ecef, #fff); flex: none; touch-action: none; }
.ea-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 10px 6px; flex: none; }
.ea-topo .ea-titulo { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ea-topo .ea-busca { width: 180px; }
.ea-fechar { border: none; background: transparent; font-size: 22px; line-height: 1; padding: 0 6px; cursor: pointer; }
.ea-form { display: none; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 10px 6px; background: #f5f8ff; border-top: 1px solid #e3e8f2; flex: none; }
.ea-form.aberto { display: flex; }
.ea-form .form-control, .ea-form .form-select { width: auto; min-width: 150px; }
.ea-corpo { flex: 1; overflow: auto; border-top: 1px solid #dee2e6; }
.ea-tabela { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.ea-tabela th { position: sticky; top: 0; z-index: 1; background: #f1f3f5; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid #ced4da; border-right: 1px solid #e9ecef; white-space: nowrap; }
.ea-tabela td { padding: 0; border-bottom: 1px solid #f1f3f5; border-right: 1px solid #f1f3f5; }
.ea-tabela td.ea-num { padding: 0 6px; color: #6c757d; text-align: right; }
.ea-tabela tr.ea-foco td { background: #fff7cc; }
.ea-celula { border: none; background: transparent; padding: 3px 6px; width: 100%; min-width: 110px; font-size: 13px; }
.ea-celula:focus { outline: 2px solid #0d6efd; background: #fff; }
.ea-ir { border: none; background: transparent; cursor: pointer; padding: 0 4px; }
.ea-remover-campo { border: none; background: transparent; color: #dc3545; cursor: pointer; padding: 0 2px; font-weight: bold; }
.ea-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 10px; border-top: 1px solid #dee2e6; flex: none; }
.feicao-destaque { filter: drop-shadow(0 0 6px #ffea00) drop-shadow(0 0 3px #ffea00); }
@media (max-width: 768px) { .editor-atributos { height: 50vh; } .ea-topo .ea-titulo { max-width: 100%; flex-basis: 100%; } .ea-topo .ea-busca { flex: 1; width: auto; } }
.ea-tabela td.ea-alterada, .ea-tabela td.ea-alterada .ea-celula { background: #fff3cd; }
.ea-tabela th.ea-alterada { background: #ffe8a1; }
.ea-pendentes { color: #b26a00; white-space: nowrap; }
.ea-pendentes.ea-salvo { color: #198754; }

/* títulos longos do menu lateral quebram linha em vez de serem cortados */
.sidebar-nav .nav-link > span { min-width: 0; overflow-wrap: anywhere; }
.sidebar-nav .nav-link > .bi-chevron-down { flex: none; }

/* ---------------------------------------------------------------- coordenadas do cursor (decimal, GMS, UTM) */
.coordenadas-mapa { background: rgba(255,255,255,.92); border-radius: 7px; box-shadow: 0 1px 5px rgba(0,0,0,.25); padding: 4px 8px; font-size: 12px; line-height: 1.45; color: #222; cursor: default; }
.coordenadas-mapa .coord-linha { display: flex; gap: 8px; white-space: nowrap; cursor: copy; border-radius: 3px; padding: 0 2px; }
.coordenadas-mapa .coord-linha:hover { background: #eef4ff; }
.coordenadas-mapa .coord-linha.coord-copiada { background: #d1e7dd; }
.coordenadas-mapa .coord-rotulo { min-width: 78px; font-weight: 600; color: #555; }
.coordenadas-mapa .coord-valor { font-variant-numeric: tabular-nums; white-space: pre; }
.coordenadas-mapa::after { content: 'SIRGAS 2000'; display: block; text-align: right; font-size: 9.5px; color: #888; margin-top: 1px; }


/* ---------------------------------------------------------------- tema "Minhas Camadas" (perfil interno) */
.minhas-camadas { padding: 4px 8px 8px 18px; font-size: 13.5px; }
.minhas-camadas .mc-aviso { color: #6c757d; padding: 4px 0; }
.minhas-camadas .mc-barra { display: flex; gap: 6px; margin: 2px 0 6px; }
.minhas-camadas ul { list-style: none; margin: 0; padding: 0; }
.minhas-camadas .mc-filhos { padding-left: 16px; display: none; }
.minhas-camadas .mc-subtema.aberto > .mc-filhos { display: block; }
.minhas-camadas .mc-linha { display: flex; align-items: center; gap: 5px; padding: 3px 2px; border-radius: 4px; }
.minhas-camadas .mc-linha:hover { background: #f1f5ff; }
.minhas-camadas .mc-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.minhas-camadas .mc-subtema > .mc-linha .mc-nome { cursor: pointer; font-weight: 600; }
.minhas-camadas .mc-total { font-size: 11px; color: #6c757d; flex: none; }
.minhas-camadas .mc-seta { border: none; background: transparent; width: 14px; padding: 0; font-size: 12px; color: #555; flex: none; }
.minhas-camadas .mc-pasta { color: #c9a227; flex: none; }
.minhas-camadas .mc-tipo { color: #4154f1; flex: none; font-size: 13px; }
.minhas-camadas .mc-ligar { flex: none; margin: 0; }
.minhas-camadas .mc-acoes { display: none; flex: none; }
.minhas-camadas .mc-linha:hover .mc-acoes, .minhas-camadas .mc-linha:focus-within .mc-acoes { display: inline-flex; }
.minhas-camadas .mc-btn { border: none; background: transparent; padding: 0 2px; font-size: 12px; cursor: pointer; }
.minhas-camadas .mc-vazio { color: #8a8f98; font-style: italic; padding: 2px 0 2px 4px; font-size: 12.5px; }
@media (hover: none) { .minhas-camadas .mc-acoes { display: inline-flex; } }

/* camada salva em Minhas Camadas: sem liga/desliga, 📍, 🛡️ e X na legenda */
.oculto-camada-salva { display: none !important; }
.minhas-camadas .mc-simbolo { flex: none; min-width: 26px; width: 26px; margin-right: 2px; transform: scale(.85); transform-origin: center; }
.minhas-camadas .mc-simbolo img { max-width: 20px; max-height: 20px; }

/* botões do cabeçalho do tema "Minhas Camadas" (ao lado do nome) */
.mc-item-tema { position: relative; }
.mc-cabecalho-acoes { position: absolute; right: 42px; transform: translateY(-50%); display: inline-flex; gap: 2px; z-index: 2; }
.mc-cabecalho > span { padding-right: 64px; }
.mc-cab-btn { border: none; background: transparent; color: #6c757d; padding: 2px 5px; border-radius: 4px; font-size: 15px; line-height: 1; cursor: pointer; }
.mc-cab-btn:hover { color: #4154f1; background: #e9efff; }
.mc-cab-btn .bi { margin: 0 !important; font-size: 15px !important; color: inherit !important; }
.mc-cab-btn.girando .bi { display: inline-block; animation: mc-girar .8s linear infinite; }
@keyframes mc-girar { to { transform: rotate(360deg); } }
.minhas-camadas .mc-vazio .bi { font-size: 12px; }

/* 📝 renomear coluna: clique no nome */
.ea-tabela .ea-nome-coluna { cursor: text; border-bottom: 1px dashed transparent; }
.ea-tabela .ea-nome-coluna:hover { border-bottom-color: #0d6efd; color: #0d6efd; }
.ea-tabela .ea-renomear { display: inline-block; height: 24px; padding: 1px 6px; font-weight: 600; vertical-align: middle; }

/* ---------------------------------------------------------------- "Baixar camadas" (cabeçalho da legenda) */
#movableDiv .draggable-header { position: relative; }
.bc-lista { max-height: 50vh; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 6px; padding: 4px 8px; }
.bc-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; font-size: 14px; }
.bc-item .form-check-input { margin: 0; flex: none; }
.bc-raster { color: #8a8f98; cursor: default; }

/* ---------------------------------------------------------------- projetos (Minhas Camadas) */
.minhas-camadas .mc-icone-projeto { color: #b8860b; flex: none; width: 26px; text-align: center; font-size: 15px; }
.minhas-camadas .mc-projeto > .mc-linha .mc-nome { font-weight: 600; }
.mc-grupo-projeto .mc-icone-grupo { color: #b8860b; }
/* camada sem símbolo próprio (cores por condição): o nome começa onde fica o ícone das outras */
.legenda-simbolo:empty { width: 4px; min-width: 4px; margin-right: 0; }

/* ---------------------------------------------------------------- comparar imagens (cortina) */
.cmp-controle .cmp-botao { display: flex; align-items: center; justify-content: center; font-size: 17px; color: #333; }
.cmp-controle .cmp-botao.ativo { background: #4154f1; color: #fff; }
.cmp-painel { position: absolute; top: 10px; right: 58px; z-index: 1000; display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  background: rgba(255,255,255,.95); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.25); padding: 6px 32px 6px 10px; max-width: calc(100% - 120px); }
.cmp-lado { display: flex; align-items: center; gap: 5px; }
.cmp-lado .cmp-titulo { font-weight: 600; font-size: 12.5px; color: #333; white-space: nowrap; width: 72px; }
.cmp-lado select { width: auto; max-width: 210px; }
.cmp-lado input[type=month] { width: 140px; }
.cmp-fechar { position: absolute; right: 6px; top: 4px; border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #555; }
.cmp-barra { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; z-index: 999; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.5); cursor: ew-resize; touch-action: none; }
.cmp-alca { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #333; user-select: none; }
.cmp-rotulo { position: absolute; top: calc(50% + 26px); white-space: nowrap; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; pointer-events: none; }
.cmp-rotulo-esquerda { right: 10px; }
.cmp-rotulo-direita { left: 10px; }
@media (max-width: 768px) {
  .cmp-painel { top: 6px; right: 50px; max-width: calc(100% - 60px); padding: 4px 28px 4px 6px; gap: 3px; }
  .cmp-lado .cmp-titulo { width: auto; }
  .cmp-lado select { max-width: 150px; }
  .cmp-lado input[type=month] { width: 120px; }
  .cmp-rotulo { top: calc(50% + 24px); }
}

/* ---------------------------------------------------------------- botões do cabeçalho da legenda (unir, projeto, baixar) */
.legenda-cab-acoes { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 4px; }
.legenda-cab-btn { border: none; background: rgba(255,255,255,.18); color: #fff; border-radius: 5px; padding: 1px 7px; line-height: 1.4; cursor: pointer; font-size: 15px; }
.legenda-cab-btn:hover { background: rgba(255,255,255,.35); }
@media (max-width: 768px) { .legenda-cab-acoes { right: 40px; } }

/* ---------------------------------------------------------------- unir / recortar */
.geo-tipos { display: flex; gap: 14px; flex-wrap: wrap; }
.geo-tipo { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.geo-tipo input:disabled + .bi, .geo-tipo input:disabled ~ * { opacity: .5; }
.geo-aviso { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1001; background: rgba(33,37,41,.9); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 13px; max-width: calc(100% - 140px); text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.geo-aviso-fixo { background: rgba(220,53,69,.92); }

/* ---------------------------------------------------------------- 🎨 ícone enviado pelo usuário */
.siggarr-painel-estilo .pe-enviar { border: 1px dashed #6c757d; background: #f8f9fa; border-radius: 5px; font-size: 12px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.siggarr-painel-estilo .pe-enviar:hover { background: #e9ecef; }
.siggarr-painel-estilo .pe-enviados .pe-simbolo img { max-width: 22px; max-height: 22px; }
.siggarr-painel-estilo .pe-enviado { position: relative; display: inline-flex; }
.siggarr-painel-estilo .pe-excluir-icone { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%; background: #dc3545; color: #fff; font-size: 11px; line-height: 15px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.siggarr-painel-estilo .pe-enviado:hover .pe-excluir-icone, .siggarr-painel-estilo .pe-excluir-icone:focus { opacity: 1; }
@media (hover: none) { .siggarr-painel-estilo .pe-excluir-icone { opacity: 1; } }
.siggarr-painel-estilo .pe-limpar-icones { font-size: 12px; color: #dc3545; text-decoration: none; align-self: flex-start; }

/* ---------------------------------------------------------------- imprimir mapa */
.imp-controle .imp-botao { display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; }