/* ═══════════════════════════════════════════════════════════════
   Mapa Pinda – Estilos Principais
   Sindicato Rural de Pindamonhangaba
═══════════════════════════════════════════════════════════════ */

/* ── Variáveis de cor ───────────────────────────────────────── */
:root {
    --srp-verde:       #2e7d32;
    --srp-verde-claro: #4caf50;
    --srp-verde-escuro:#1b5e20;
    --srp-amarelo:     #f9a825;
    --srp-amarelo-cl:  #ffd600;
    --srp-branco:      #ffffff;
    --srp-cinza-cl:    #f5f5f5;
    --srp-cinza:       #757575;
    --srp-sombra:      0 4px 20px rgba(0,0,0,.18);
    --srp-radius:      10px;
    --srp-trans:       .25s ease;
}

/* ══════════════════════════════════════════════════════════════
   BARRA DE NAVEGAÇÃO SRP — GeoAgro
   Usa os mesmos seletores do navbar-partial compartilhado (.srp-navbar, .srp-nav-menu, etc.)
   Estilos escopados em #mapa-pinda-wrap para não conflitar com outras páginas.
══════════════════════════════════════════════════════════════ */

/* Navbar principal — escopo GeoAgro */
#mapa-pinda-wrap .srp-top-bar {
    display: none; /* top-bar não é exibida na página do mapa */
}
#mapa-pinda-wrap .srp-navbar {
    flex-shrink:    0;
    position:       relative;   /* necessário para z-index ter efeito e para os dropdowns se posicionarem corretamente */
    background:     linear-gradient(135deg, var(--srp-verde-escuro) 0%, var(--srp-verde) 100%);
    border-bottom:  1px solid rgba(255,255,255,.10);
    z-index:        11;
    box-shadow:     0 2px 12px rgba(0,0,0,.22);
    overflow:       visible; /* permite que os dropdowns apareçam fora dos limites da navbar */
}
#mapa-pinda-wrap .srp-navbar .srp-inner {
    height:         52px;
    padding:        0 16px;
    gap:            0;
    max-width:      100%;
    overflow:       visible; /* mesma razão — dropdowns são filhos absolutos do .srp-inner */
}
/* Logo */
#mapa-pinda-wrap .srp-nav-logo { flex-shrink: 0; display: flex; align-items: center; margin-right: 20px; }
#mapa-pinda-wrap .srp-nav-logo img { height: 38px; width: auto; object-fit: contain;
                     filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

/* Menu desktop */
#mapa-pinda-wrap .srp-nav-menu {
    display:        flex;
    align-items:    center;
    list-style:     none;
    margin:         0; padding: 0;
    gap:            0;
    flex:           1;
    /* REMOVIDO: overflow:hidden — esse valor clipava os dropdowns com position:absolute,
       tornando os submenus de Institucional, Serviços, SENAR e Circulares invisíveis.
       O padrão da homepage (#srp-root .srp-nav-menu) nunca usou overflow:hidden. */
    overflow:       visible;
}
#mapa-pinda-wrap .srp-nav-menu > li { position: relative; }
#mapa-pinda-wrap .srp-nav-menu > li > a {
    display:        flex;
    align-items:    center;
    gap:            4px;
    padding:        0 11px;
    height:         52px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.82);
    text-decoration: none;
    white-space:    nowrap;
    border-bottom:  2px solid transparent;
    transition:     color .2s, border-color .2s;
}
#mapa-pinda-wrap .srp-nav-menu > li > a:hover,
#mapa-pinda-wrap .srp-nav-menu > li > a.active {
    color:         var(--srp-amarelo-cl);
    border-bottom-color: var(--srp-amarelo);
}
#mapa-pinda-wrap .srp-nav-menu > li > a svg { transition: transform .2s; opacity: .7; }
#mapa-pinda-wrap .srp-nav-menu > li.srp-has-drop:hover > a svg { transform: rotate(180deg); }

/* Dropdown */
#mapa-pinda-wrap .srp-dropdown {
    position:    absolute;
    top:         calc(100% + 1px);
    left:        0;
    min-width:   200px;
    background:  var(--srp-verde-escuro);
    border:      1px solid rgba(255,255,255,.12);
    border-top:  2px solid var(--srp-amarelo);
    border-radius: 0 0 8px 8px;
    box-shadow:  0 16px 40px rgba(0,0,0,.35);
    opacity:     0;
    visibility:  hidden;
    transform:   translateY(-6px);
    transition:  all .22s;
    z-index:     200;
    overflow:    hidden;
}
#mapa-pinda-wrap .srp-nav-menu > li.srp-has-drop:hover .srp-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
#mapa-pinda-wrap .srp-dropdown a {
    display:     block;
    padding:     9px 16px;
    font-size:   12px;
    font-weight: 400;
    color:       rgba(255,255,255,.78);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition:  all .18s;
}
#mapa-pinda-wrap .srp-dropdown a:hover {
    background:      rgba(255,255,255,.08);
    border-left-color: var(--srp-amarelo);
    color:           var(--srp-amarelo-cl);
    padding-left:    20px;
}

/* Área de CTA / hamburger */
#mapa-pinda-wrap .srp-nav-cta {
    margin-left: auto;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    gap:         6px;
}
#mapa-pinda-wrap .srp-btn-fale-conosco {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     6px 14px;
    background:  rgba(255,255,255,.10);
    border:      1px solid rgba(255,255,255,.22);
    border-radius: 6px;
    color:       rgba(255,255,255,.85);
    font-size:   11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:  background .2s, color .2s;
}
#mapa-pinda-wrap .srp-btn-fale-conosco:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* Hamburger */
#mapa-pinda-wrap .srp-hamburger {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     none;
    border:         1px solid rgba(255,255,255,.28);
    border-radius:  6px;
    padding:        7px 8px;
    cursor:         pointer;
}
#mapa-pinda-wrap .srp-hamburger span {
    display:        block;
    width:          20px;
    height:         2px;
    background:     rgba(255,255,255,.85);
    border-radius:  2px;
    transition:     transform .2s, opacity .2s;
}
#mapa-pinda-wrap .srp-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mapa-pinda-wrap .srp-hamburger.open span:nth-child(2) { opacity: 0; }
#mapa-pinda-wrap .srp-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Responsivo da navbar ── */
@media (max-width: 960px) {
    #mapa-pinda-wrap .srp-nav-menu { display: none; }
    #mapa-pinda-wrap .srp-hamburger { display: flex; }
}
@media (max-width: 600px) {
    #mapa-pinda-wrap .srp-btn-fale-conosco span { display: none; }
    #mapa-pinda-wrap .srp-btn-fale-conosco { padding: 6px 10px; }
}

/* Menu aberto (mobile) */
#mapa-pinda-wrap .srp-nav-menu.srp-mobile-open {
    display:        flex !important;
    flex-direction: column;
    align-items:    flex-start;
    position:       fixed;
    top:            52px;
    left:           0; right: 0;
    background:     var(--srp-verde-escuro);
    border-bottom:  2px solid var(--srp-amarelo);
    box-shadow:     0 16px 40px rgba(0,0,0,.4);
    z-index:        1000;
    max-height:     calc(100vh - 52px);
    overflow-y:     auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
}
#mapa-pinda-wrap .srp-nav-menu.srp-mobile-open > li { width: 100%; }
#mapa-pinda-wrap .srp-nav-menu.srp-mobile-open > li > a {
    height:        auto;
    padding:       13px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-left:   none;
    width:         100%;
    box-sizing:    border-box;
}
#mapa-pinda-wrap .srp-nav-menu.srp-mobile-open .srp-dropdown {
    position:   static;
    opacity:    1;
    visibility: visible;
    transform:  none;
    box-shadow: none;
    border:     none;
    border-radius: 0;
    background: rgba(0,0,0,.2);
    min-width:  100%;
}
#mapa-pinda-wrap .srp-nav-menu.srp-mobile-open .srp-dropdown a {
    padding-left: 32px;
    border-left: none;
}
#mapa-pinda-wrap .srp-nav-menu.srp-mobile-open .srp-dropdown a:hover {
    padding-left: 36px;
}

/* ── Tela cheia ─────────────────────────────────────────────── */
html, body {
    margin:   0 !important;
    padding:  0 !important;
    overflow: hidden !important;
    height:   100% !important;
}

/* ── Wrapper: 100% da viewport ──────────────────────────────── */
#mapa-pinda-wrap {
    position:       fixed;
    inset:          0;
    z-index:        9990;
    display:        flex;
    flex-direction: column;
    width:          100%;
    height:         100%;
    overflow:       hidden;
    font-family:    'Segoe UI', Arial, sans-serif;
    background:     var(--srp-branco);
}

/* ══════════════════════════════════════════════════════════════
   CABEÇALHO — hierarquia visual e comportamento responsivo
══════════════════════════════════════════════════════════════ */
#mapa-pinda-header {
    display:        flex;
    align-items:    center;
    gap:            12px;
    background:     linear-gradient(135deg, var(--srp-verde-escuro) 0%, var(--srp-verde) 100%);
    color:          var(--srp-branco);
    padding:        8px 16px;
    flex-shrink:    0;
    z-index:        10;
    box-shadow:     0 2px 10px rgba(0,0,0,.3);
    overflow:       hidden;
    border-bottom:  2px solid rgba(255,255,255,.08);
    /* Colapsa altura + opacidade — sem deixar barra branca */
    max-height:     80px;
    transition:     max-height .3s ease, opacity .3s ease, padding .3s ease;
}

/* Estado oculto — colapsa completamente, mapa ocupa o espaço */
#mapa-pinda-header.srp-header-oculto {
    max-height:     0;
    padding-top:    0;
    padding-bottom: 0;
    opacity:        0;
    pointer-events: none;
    border-bottom:  none;
}

/* Botão flutuante para restaurar o cabeçalho — sempre acessível */
#btn-restaurar-header {
    position:        absolute;
    top:             6px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         1100;
    background:      linear-gradient(135deg, var(--srp-verde-escuro), var(--srp-verde));
    color:           var(--srp-branco);
    border:          none;
    border-radius:   20px;
    padding:         6px 16px;
    font-size:       13px;
    font-weight:     700;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    gap:             5px;
    box-shadow:      0 3px 12px rgba(0,0,0,.45);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .25s ease, transform .25s ease;
    white-space:     nowrap;
    letter-spacing:  .3px;
    /* Garante que nunca saia da tela */
    max-width:       calc(100vw - 32px);
}
#btn-restaurar-header.srp-btn-restaurar-visivel {
    opacity:        1;
    pointer-events: auto;
}
#btn-restaurar-header:active {
    transform: translateX(-50%) scale(.95);
}

/* Logo */
#srp-logo {
    height:      42px;
    width:       auto;
    object-fit:  contain;
    filter:      drop-shadow(0 1px 3px rgba(0,0,0,.4));
    flex-shrink: 0;
}

/* Hierarquia textual: título > subtítulo */
#srp-header-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
#srp-header-text h1,
#srp-header-text h2 {
    margin:      0;
    font-size:   26px;
    font-weight: 800;
    color:       var(--srp-branco);
    line-height: 1.1;
    letter-spacing: -.4px;
    white-space: nowrap;
}
#srp-header-text p {
    margin:         0;
    font-size:      11px;
    font-weight:    400;
    opacity:        .75;
    color:          var(--srp-amarelo-cl);
    letter-spacing: .2px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

/* ── Botão admin ────────────────────────────────────────────── */
#btn-admin-mapa {
    background:      rgba(255,255,255,.12);
    border:          1px solid rgba(255,255,255,.25);
    color:           var(--srp-branco);
    border-radius:   50%;
    width:           34px;
    height:          34px;
    font-size:       18px;
    cursor:          pointer;
    transition:      background var(--srp-trans);
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    flex-shrink:     0;
}
#btn-admin-mapa:hover { background: rgba(255,255,255,.25); }

/* ── Grupo de botões no lado direito do header ─── */
#srp-header-btns {
    margin-left:  auto;
    display:      flex;
    align-items:  center;
    gap:          4px;
    flex-shrink:  0;
}

/* Botões do header — ícone SVG + label texto abaixo */
#srp-header-btns button {
    background:      rgba(255,255,255,.10);
    border:          1px solid rgba(255,255,255,.20);
    color:           var(--srp-branco);
    border-radius:   8px;
    padding:         6px 10px;
    cursor:          pointer;
    transition:      background var(--srp-trans), transform .12s;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    min-width:       54px;
    flex-shrink:     0;
    font-family:     inherit;
}
#srp-header-btns button svg     { flex-shrink: 0; }
#srp-header-btns button:hover   { background: rgba(255,255,255,.22); transform: translateY(-1px); }
#srp-header-btns button:active  { transform: translateY(0); }
#srp-header-btns button.ativo   { background: #1565c0; border-color: #1565c0; }
#srp-header-btns button:disabled{ opacity: .5; cursor: not-allowed; transform: none; }

/* Botão de localização pública — herda o estilo acima */
#btn-localizar-publico { /* sem sobrescrita — compartilha o estilo geral */ }
#btn-localizar-publico.ativo { background: #1565c0; border-color: #1565c0; }

/* ══════════════════════════════════════════════════════════════
   PAINEL ADMINISTRATIVO
══════════════════════════════════════════════════════════════ */
#painel-admin-srp {
    background:     var(--srp-verde-escuro);
    flex-shrink:    0;
    z-index:        10;
    box-shadow:     0 3px 8px rgba(0,0,0,.25);
    transition:     max-height .35s ease, opacity .35s ease;
    max-height:     600px;  /* generoso para wrap no mobile */
    overflow:       hidden;
    border-top:     1px solid rgba(255,255,255,.08);
}

/* Ocultar painel admin junto com o header (apenas quando não logado) */
#painel-admin-srp.srp-header-oculto {
    max-height:     0;
    opacity:        0;
    pointer-events: none;
    overflow:       hidden;
}

/* ── Linha do título (sempre visível) ── */
#painel-admin-header {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

#srp-admin-titulo-row {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        7px 16px;
    border-bottom:  1px solid rgba(255,255,255,.10);
}

#srp-admin-titulo-label {
    font-size:      12px;
    font-weight:    700;
    color:          rgba(255,255,255,.6);
    letter-spacing: .8px;
    text-transform: uppercase;
    flex:           1;
}

#srp-dica-edicao {
    display:       none;
    background:    rgba(249,168,37,.92);
    color:         #1b5e20;
    font-size:     11px;
    font-weight:   700;
    padding:       3px 8px;
    border-radius: 4px;
    letter-spacing:.3px;
}
#srp-dica-edicao.visivel { display: inline-block; }

/* Toggle de recolher (visível apenas em mobile) */
#btn-toggle-admin-menu {
    display:         none;
    background:      rgba(255,255,255,.1);
    border:          1px solid rgba(255,255,255,.2);
    color:           rgba(255,255,255,.8);
    border-radius:   50%;
    width:           26px;
    height:          26px;
    font-size:       14px;
    cursor:          pointer;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    flex-shrink:     0;
    transition:      transform .25s ease, background var(--srp-trans);
}
#btn-toggle-admin-menu:hover  { background: rgba(255,255,255,.2); }
#btn-toggle-admin-menu.aberto { transform: rotate(180deg); }

/* ── Grupos de ações ── */
#srp-admin-acoes {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         6px;
    padding:     8px 16px;
    transition:  max-height .3s ease, opacity .3s ease, padding .3s ease;
    max-height:  500px;
    overflow:    hidden;
}
#srp-admin-acoes.recolhido {
    max-height:     0;
    padding-top:    0;
    padding-bottom: 0;
    opacity:        0;
    pointer-events: none;
}

.srp-admin-grupo {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

/* Divisor vertical entre grupos */
.srp-admin-divisor {
    width:        1px;
    height:       24px;
    background:   rgba(255,255,255,.2);
    flex-shrink:  0;
    margin:       0 2px;
}

/* Botão Sair — destaque sutil */
.srp-btn-sair {
    opacity: .75;
}
.srp-btn-sair:hover { opacity: 1 !important; }

/* Medir ativo */
#btn-medir-admin.ativo,
#btn-medir-mapa.ativo {
    background:   var(--srp-amarelo) !important;
    color:        #1b5e20 !important;
    border-color: var(--srp-amarelo) !important;
    font-weight:  700;
}

/* ── Responsivo: mobile ── */
@media (max-width: 768px) {
    /* Mostrar botão de toggle */
    #btn-toggle-admin-menu { display: flex; }

    /* Título menor */
    #srp-admin-titulo-row  { padding: 6px 12px; }
    #srp-admin-titulo-label { font-size: 11px; }

    /* Ações em grid 2 colunas quando visível */
    #srp-admin-acoes {
        display:         grid;
        grid-template-columns: 1fr 1fr;
        padding:         10px 12px;
        gap:             8px;
    }
    #srp-admin-acoes.recolhido {
        display: grid; /* mantém grid, mas hidden via max-height */
    }
    /* Divisores somem no grid */
    .srp-admin-divisor { display: none; }
    /* Grupos somem, botões ficam direto no grid */
    .srp-admin-grupo {
        display:  contents; /* filhos participam do grid pai */
    }
    /* Novo Pin ocupa linha inteira (destaque) */
    #btn-novo-pin { grid-column: 1 / -1; }
}



/* Botão editar limites em modo ativo */
#btn-editar-limites.editando {
    background:  var(--srp-amarelo) !important;
    color:       #1b5e20 !important;
    border-color:var(--srp-amarelo) !important;
    animation:   srp-pulse 1.5s ease-in-out infinite;
}

@keyframes srp-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(249,168,37,.5); }
    50%      { box-shadow: 0 0 0 6px rgba(249,168,37,.0); }
}

/* ── Container do mapa: preenche o restante ─────────────────── */
#mapa-pinda-container {
    position:   relative;
    flex:       1;
    width:      100%;
    min-height: 0;   /* crítico para flex */
}

#mapa-pinda {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    z-index:    1;
    background: #e8f5e9;
}

/* ── Rodapé ─────────────────────────────────────────────────── */
#mapa-pinda-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      linear-gradient(135deg, var(--srp-verde-escuro), var(--srp-verde));
    color:           var(--srp-branco);
    padding:         6px 18px;
    font-size:       12px;
    flex-shrink:     0;
    z-index:         10;
    flex-wrap:       wrap;
    gap:             6px;
}

#mapa-pinda-footer span { opacity: .9; }

#srp-coords-display {
    font-family:   monospace;
    font-size:     11px;
    background:    rgba(255,255,255,.12);
    padding:       2px 8px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAIS
═══════════════════════════════════════════════════════════════ */
/* ── Modal: display:none por padrão — NUNCA visível no frontend sem ação JS ── */
.srp-modal {
    display:         none;
    align-items:     center;
    justify-content: center;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index:         99999;
    transition:      opacity var(--srp-trans);
}
/* Ao abrir via JS (.addClass('aberto')), torna visível */
.srp-modal.aberto {
    display:        flex;
    pointer-events: auto;
}

.srp-modal-box {
    background:     var(--srp-branco);
    border-radius:  var(--srp-radius);
    box-shadow:     var(--srp-sombra);
    padding:        30px 28px 24px;
    width:          min(380px, 94vw);
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    max-height:     90vh;
    overflow-y:     auto;
}
.srp-modal-large { width: min(620px, 96vw); }

.srp-modal-close {
    position:    absolute;
    top:         10px;
    right:       12px;
    background:  none;
    border:      none;
    font-size:   19px;
    cursor:      pointer;
    color:       var(--srp-cinza);
    line-height: 1;
}

.srp-modal-logo { height: 48px; display: block; margin: 0 auto 4px; object-fit: contain; }

.srp-modal-box h3 { text-align: center; margin: 0; font-size: 18px; color: var(--srp-verde-escuro); }

/* ── Login modal redesenhado ─────────────────────────────── */
.srp-login-box {
    padding: 0 !important;
    gap: 0 !important;
    flex-direction: row !important;
    width: min(520px, 94vw) !important;
    min-height: 280px;
    overflow: hidden;
    border-radius: var(--srp-radius) !important;
}

/* Painel esquerdo verde */
.srp-login-side {
    background: #1b5e20;
    width: 160px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.srp-login-side-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    position: relative;
    z-index: 1;
}
.srp-login-logo {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(1.05);
}
.srp-login-side-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.srp-login-side-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    text-align: center;
}
.srp-login-side-sub {
    font-size: 10px;
    color: #a5d6a7;
    text-align: center;
    line-height: 1.35;
}
.srp-login-side-deco {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Painel direito: formulário */
.srp-login-form {
    flex: 1;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}
.srp-login-titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--srp-verde-escuro);
    margin: 0;
    line-height: 1.2;
}
.srp-login-hint {
    font-size: 12px;
    color: var(--srp-cinza);
    margin: 0;
    line-height: 1.4;
}
.srp-login-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.srp-login-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--srp-verde-escuro);
    letter-spacing: .02em;
}
.srp-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.srp-login-input-icon {
    position: absolute;
    left: 10px;
    color: #888;
    pointer-events: none;
    flex-shrink: 0;
}
.srp-login-input {
    width: 100%;
    padding: 10px 12px 10px 34px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    box-sizing: border-box;
    transition: border-color .18s;
    background: #fafafa;
}
.srp-login-input:focus {
    outline: none;
    border-color: var(--srp-verde) !important;
    background: #fff;
}
.srp-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #1b5e20;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .1s;
    letter-spacing: .02em;
}
.srp-login-btn:hover { background: #2e7d32; }
.srp-login-btn:active { transform: scale(.98); }

/* Mobile: empilha verticalmente */
@media (max-width: 480px) {
    .srp-login-box { flex-direction: column !important; }
    .srp-login-side { width: 100% !important; min-height: 90px; }
    .srp-login-side-inner { flex-direction: row; padding: 14px 20px; }
    .srp-login-logo { height: 36px; }
    .srp-login-side-deco { display: none; }
}

.srp-modal-box input[type="text"],
.srp-modal-box input[type="password"] {
    width:         100%;
    padding:       9px 12px;
    border:        1.5px solid #ccc;
    border-radius: 6px;
    font-size:     14px;
    box-sizing:    border-box;
    transition:    border-color var(--srp-trans);
}
.srp-modal-box input:focus { outline: none; border-color: var(--srp-verde); }

/* ── Botões ─────────────────────────────────────────────────── */
.srp-btn-primary {
    background:    var(--srp-verde);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    padding:       8px 16px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--srp-trans);
    white-space:   nowrap;
}
.srp-btn-primary:hover { background: var(--srp-verde-claro); }

.srp-btn-secondary {
    background:    transparent;
    color:         var(--srp-branco);
    border:        1.5px solid rgba(255,255,255,.5);
    border-radius: 6px;
    padding:       7px 14px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--srp-trans);
    white-space:   nowrap;
}
.srp-btn-secondary:hover { background: rgba(255,255,255,.15); border-color: var(--srp-branco); }

/* Variante modal (fundo branco) */
.srp-modal .srp-btn-secondary { color: var(--srp-verde); border-color: var(--srp-verde); }
.srp-modal .srp-btn-secondary:hover { background: var(--srp-verde); color: #fff; }

.srp-alert { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 8px 12px; font-size: 14px; color: #7a5a00; }
.srp-alert.erro { background: #fce4e4; border-color: #e53935; color: #b71c1c; }

/* ── Formulário de pin ──────────────────────────────────────── */
.srp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.srp-form-group { display: flex; flex-direction: column; gap: 4px; }
.srp-form-group.full { grid-column: 1 / -1; }
.srp-form-group label { font-size: 13px; font-weight: 600; color: var(--srp-verde-escuro); }
.srp-form-group input,
.srp-form-group textarea { padding: 8px 10px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; transition: border-color var(--srp-trans); box-sizing: border-box; width: 100%; }
.srp-form-group input:focus,
.srp-form-group textarea:focus { outline: none; border-color: var(--srp-verde); }
.srp-form-group small { font-size: 12px; color: var(--srp-cinza); }
.srp-form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }

/* ── Upload de imagens ──────────────────────────────────────── */
.srp-upload-area { border: 2px dashed var(--srp-verde); border-radius: 8px; padding: 14px; text-align: center; cursor: pointer; transition: background var(--srp-trans); background: var(--srp-cinza-cl); }
.srp-upload-area:hover { background: #e8f5e9; }
.srp-upload-label { font-size: 14px; color: var(--srp-verde); cursor: pointer; font-weight: 600; }
.srp-img-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); gap: 8px; margin-top: 8px; }
.srp-img-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; border: 1px solid #ddd; }
.srp-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.srp-img-thumb .srp-rem { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   POPUP DO LEAFLET — Card de Divulgação
═══════════════════════════════════════════════════════════════ */

/* ── Zera padding/margin padrão do Leaflet para o nosso popup ──
   Os estilos de tamanho/forma do balão são definidos mais abaixo,
   na seção "BALÃO INFORMATIVO". Esta regra apenas garante base. ── */
.srp-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0 !important;
    overflow: hidden !important;
}
.srp-leaflet-popup .leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}
.srp-popup-header {
    background: var(--srp-verde);
    color: #fff;
    padding: 11px 44px 10px 14px;
    border-radius: 10px 10px 0 0;
    margin: 0;
    /* Mantém o cabeçalho visível enquanto o body rola */
    position: sticky;
    top: 0;
    z-index: 5;
    flex-shrink: 0;
}
.srp-popup-header h4 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srp-popup-produto {
    font-size: 11.5px;
    opacity: .9;
    color: var(--srp-amarelo-cl);
    font-weight: 600;
}
.srp-popup-body { padding: 10px 14px 10px; }

/* Slideshow ocupa a largura total do popup, ignorando o padding lateral do body */
.srp-popup-body .srp-slideshow {
    margin-left: -14px;
    margin-right: -14px;
    border-radius: 0;
}
.srp-popup-body .srp-slideshow .srp-slides-track {
    border-radius: 0;
}
.srp-popup-info { font-size: 12.5px; color: #444; margin: 3px 0; }
.srp-popup-info strong { color: var(--srp-verde-escuro); }

/* ── Full-bleed hero (foto + identidade sobreposta) ─────────── */
.srp-popup-fb {
    min-width: 280px;
    max-width: 420px;
}
.srp-popup-fb .srp-popup-body {
    padding: 10px 12px 12px;
}
.srp-fb-hero {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
}
.srp-fb-track {
    position: absolute;
    inset: 0;
    border-radius: 0 !important;
    height: 100% !important;
}
.srp-fb-track .srp-slide,
.srp-fb-track .srp-slide img {
    height: 220px !important;
    object-fit: cover;
    width: 100%;
    display: block;
}
.srp-fb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0)   30%,
        rgba(0,0,0,.62) 100%
    );
    pointer-events: none;
    z-index: 1;
}
.srp-fb-identity {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 10px 12px 10px;
}
.srp-fb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 5px;
}
.srp-fb-tag {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .02em;
    backdrop-filter: blur(2px);
}
.srp-fb-nome {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.srp-fb-sub {
    font-size: 11px;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 4px;
}
.srp-fb-sub svg {
    opacity: .8;
    flex-shrink: 0;
}
/* Setas de navegação sobre o hero — isoladas do .srp-ss-nav do slideshow clássico */
.srp-fb-hero .srp-fb-nav-prev,
.srp-fb-hero .srp-fb-nav-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    background: rgba(0,0,0,.38) !important;
    border: none !important;
    color: #fff !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: background .15s !important;
}
.srp-fb-hero .srp-fb-nav-prev { left: 8px !important; right: auto !important; }
.srp-fb-hero .srp-fb-nav-next { right: 8px !important; left: auto !important; }
.srp-fb-hero .srp-fb-nav-prev:hover,
.srp-fb-hero .srp-fb-nav-next:hover { background: rgba(0,0,0,.65) !important; }
/* Dots sobre o hero */
.srp-fb-dots {
    position: absolute;
    bottom: 8px;
    right: 12px;
    z-index: 3;
    display: flex;
    gap: 4px;
    align-items: center;
}
/* WhatsApp como botão primário no full-bleed */
.srp-ctabtn-wpp-primary {
    background: #1b5e20 !important;
    color: #fff !important;
    border-color: #1b5e20 !important;
    flex: 2 !important;
}
.srp-ctabtn-wpp-primary:hover { filter: brightness(.88); }

.srp-popup-desc {
    font-size: 12.5px;
    color: #555;
    margin: 6px 0 2px;
    line-height: 1.45;
    border-left: 3px solid var(--srp-verde);
    background: #f9fafb;
    border-radius: 0 5px 5px 0;
    padding: 5px 8px;
}

/* ── Slideshow ───────────────────────────────────────────── */
/*
 * Wrapper externo: empilha a track de imagens + a barra de navegação
 * em coluna. Nenhum overflow:visible necessário — as setas ficam fora
 * da área da imagem, na barra abaixo.
 */
.srp-slideshow {
    display: flex;
    flex-direction: column;
    margin: 10px 0 4px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    line-height: 0;
    flex-shrink: 0;
}

/* Track que contém as imagens — altura fixa, clipa o conteúdo */
.srp-slides-track {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    /* Placeholder cinza visível enquanto a imagem carrega */
    background: #c8d8c8;
    flex-shrink: 0;
}

/* Animação de shimmer no placeholder */
.srp-slides-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.35) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: srp-shimmer 1.4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}
/* Remove shimmer quando há pelo menos 1 imagem carregada */
.srp-slides-track.srp-img-loaded::before {
    display: none;
}

@keyframes srp-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Em telas muito curtas (landscape mobile) reduz a altura do slide */
@media (max-height: 500px) {
    .srp-slides-track { height: 110px; }
    .srp-slide img    { height: 110px; }
}

/* Slides com posição absoluta — troca sem colapsar o container */
.srp-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.srp-slide.ativo {
    opacity: 1;
    pointer-events: auto;
}
.srp-slide img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

/*
 * Barra de navegação: fica ABAIXO da imagem, completamente fora da track.
 * Contém setas (esq/dir) e contador/dots ao centro.
 */
.srp-ss-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1b5e20;
    border-radius: 0 0 8px 8px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
}

/* Setas: blocos laterais na nav-bar — sem position:absolute */
.srp-ss-nav {
    background: rgba(0,0,0,.25);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    width: 38px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.srp-ss-nav:hover { background: rgba(0,0,0,.5); }
.srp-ss-prev { border-radius: 0 0 0 8px; }
.srp-ss-next { border-radius: 0 0 8px 0; }

/* Área central da nav-bar: dots + contador */
.srp-ss-nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    padding: 4px 4px;
}

.srp-ss-counter {
    color: rgba(255,255,255,.85);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
}
.srp-ss-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}
.srp-ss-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: background .15s, transform .15s;
    display: inline-block;
}
.srp-ss-dot.ativo {
    background: #fff;
    transform: scale(1.35);
}

/* ── Botões de contato/CTA ───────────────────────────────── */
.srp-popup-contatos {
    margin: 8px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.srp-cta-row {
    display: flex;
    gap: 6px;
}
.srp-ctabtn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: filter .15s, transform .1s;
    white-space: nowrap;
    line-height: 1;
}
.srp-ctabtn:hover { filter: brightness(.9); transform: translateY(-1px); }
.srp-ctabtn svg   { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Botões com contraste aprimorado ── */
.srp-ctabtn-tel  { background: #fff;    color: #1b5e20; border: 2px solid #2e7d32; }
.srp-ctabtn-wpp  { background: #25d366; color: #fff;    border: 2px solid #128c7e; }
.srp-ctabtn-gmaps{ background: #fff;    color: #1b5e20; border: 2px solid #2e7d32; }
.srp-ctabtn-waze { background: #fff;    color: #0d47a1; border: 2px solid #1565c0; }
/* CORREÇÃO: fundo branco + texto verde-escuro para contraste WCAG AA (4.5:1+) */
.srp-ctabtn-site { background: #fff; color: var(--srp-verde-escuro); border: 2px solid var(--srp-verde); }
.srp-ctabtn-site:hover { filter: none; background: #e8f5e9; transform: translateY(-1px); }
.srp-ctabtn-full { flex: 1; width: 100%; }

/* ── Admin actions ───────────────────────────────────────── */
.srp-popup-admin-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
.srp-popup-admin-actions button {
    flex: 1;
    padding: 5px;
    font-size: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}
.srp-btn-editar  { background: var(--srp-verde); color: #fff; }
.srp-btn-deletar { background: #e53935; color: #fff; }

/* ── Ícone pin ──────────────────────────────────────────────── */
.srp-pin-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

/* ── Spinner ────────────────────────────────────────────────── */
.srp-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999; }
.srp-spinner { width: 36px; height: 36px; border: 4px solid rgba(46,125,50,.2); border-top-color: var(--srp-verde); border-radius: 50%; animation: srp-spin .8s linear infinite; }
@keyframes srp-spin { to { transform: rotate(360deg); } }

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .srp-form-grid { grid-template-columns: 1fr; }
    .srp-form-group.full { grid-column: auto; }
    #srp-header-text h2 { font-size: 17px; }
    #srp-header-text p  { font-size: 11px; }
    #srp-logo           { height: 34px; }
    #painel-admin-header{ font-size: 12px; }
    .srp-btn-primary,
    .srp-btn-secondary  { font-size: 12px; padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   LAYERS – Painel Flutuante
═══════════════════════════════════════════════════════════════ */

#painel-layers-srp {
    position:   absolute;
    top:        10px;
    right:      10px;
    width:      300px;
    max-height: calc(100% - 20px);
    background: #fff;
    border-radius: var(--srp-radius);
    box-shadow: var(--srp-sombra);
    z-index:    1001;
    display:    flex;
    flex-direction: column;
    overflow:   hidden;
    font-size:  13px;
}

.srp-painel-layers-header {
    display:      flex;
    align-items:  center;
    justify-content: space-between;
    background:   var(--srp-verde-escuro);
    color:        #fff;
    padding:      10px 14px;
    font-weight:  700;
    font-size:    14px;
    flex-shrink:  0;
}

.srp-painel-layers-header button {
    background: none;
    border:     none;
    color:      rgba(255,255,255,.8);
    font-size:  16px;
    cursor:     pointer;
    line-height: 1;
    padding:    2px 4px;
}
.srp-painel-layers-header button:hover { color: #fff; }

#lista-layers-srp {
    flex:       1;
    overflow-y: auto;
    padding:    6px 0;
}

/* ── Item de layer ──────────────────────────────────────────── */
.srp-layer-item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    padding:     10px 14px;
    border-bottom: 1px solid #f0f0f0;
    transition:  background var(--srp-trans);
}
.srp-layer-item:last-child    { border-bottom: none; }
.srp-layer-item:hover         { background: var(--srp-cinza-cl); }

.srp-layer-cor-dot {
    width:        14px;
    height:       14px;
    border-radius: 50%;
    flex-shrink:  0;
    margin-top:   3px;
    border:       2px solid rgba(0,0,0,.15);
}

.srp-layer-info {
    flex:         1;
    min-width:    0;
}

.srp-layer-nome {
    font-weight: 600;
    color:       #222;
    font-size:   13px;
    word-break:  break-word;
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.srp-badge-principal {
    background:    var(--srp-verde);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    padding:       1px 6px;
    border-radius: 10px;
    white-space:   nowrap;
}

.srp-layer-resp,
.srp-layer-ha {
    font-size:  12px;
    color:      var(--srp-cinza);
    margin-top: 2px;
}

.srp-layer-actions {
    display:    flex;
    gap:        4px;
    flex-shrink: 0;
    align-items: flex-start;
}

.srp-layer-actions button {
    background:    none;
    border:        1px solid #ddd;
    border-radius: 5px;
    width:         28px;
    height:        28px;
    cursor:        pointer;
    font-size:     13px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all var(--srp-trans);
    color:         #555;
    line-height:   1;
}
.srp-layer-actions button:hover           { background: #f5f5f5; border-color: #aaa; }
.srp-layer-btn-del:hover                  { background: #fce4e4 !important; border-color: #e53935 !important; color: #e53935 !important; }
.srp-layer-btn-vertices:hover             { background: #e8f5e9 !important; border-color: var(--srp-verde) !important; color: var(--srp-verde) !important; }

.srp-layer-empty {
    padding:   20px 14px;
    color:     var(--srp-cinza);
    font-size: 13px;
    text-align: center;
}

/* ── Estado de edição de vértices (dentro do painel) ─────────── */
.srp-vertex-edit-state {
    padding:    14px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.srp-vertex-edit-hint {
    background:    rgba(249,168,37,.15);
    border:        1px solid var(--srp-amarelo);
    border-radius: 6px;
    padding:       8px 10px;
    font-size:     12px;
    color:         #7a5a00;
    font-weight:   600;
}

.srp-vertex-edit-name {
    font-weight: 700;
    font-size:   14px;
    color:       var(--srp-verde-escuro);
}

.srp-vertex-edit-btns {
    display: flex;
    gap:     8px;
}

.srp-btn-primary-sm {
    background:    var(--srp-verde);
    color:         #fff;
    border:        none;
    border-radius: 5px;
    padding:       6px 14px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    flex:          1;
    transition:    background var(--srp-trans);
}
.srp-btn-primary-sm:hover { background: var(--srp-verde-claro); }

.srp-btn-secondary-sm {
    background:    transparent;
    color:         var(--srp-cinza);
    border:        1px solid #ddd;
    border-radius: 5px;
    padding:       6px 14px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    flex:          1;
    transition:    all var(--srp-trans);
}
.srp-btn-secondary-sm:hover { background: #f5f5f5; border-color: #aaa; }

/* ── Color picker inline ────────────────────────────────────── */
.srp-color-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.srp-color-input {
    width:         40px;
    height:        36px;
    border:        1.5px solid #ddd;
    border-radius: 6px;
    cursor:        pointer;
    padding:       2px;
    background:    none;
    flex-shrink:   0;
}

.srp-color-label {
    font-size:   13px;
    color:       var(--srp-cinza);
    font-family: monospace;
}

/* ── Tooltip de layer no mapa ───────────────────────────────── */
.srp-layer-tooltip {
    background:    rgba(46,125,50,.9);
    border:        none;
    color:         #fff;
    font-size:     12px;
    font-weight:   600;
    padding:       4px 8px;
    border-radius: 4px;
    box-shadow:    none;
}
.srp-layer-tooltip::before { display: none; }

/* ── Dica de edicao (agora texto dinâmico) ─────────────────── */
#srp-dica-edicao {
    display:       none;
    background:    rgba(249,168,37,.92);
    color:         #1b5e20;
    font-size:     12px;
    font-weight:   600;
    padding:       4px 10px;
    border-radius: 4px;
}
#srp-dica-edicao.visivel { display: inline-block; }

/* ── Botão Novo Layer pulsando enquanto desenha ─────────────── */
#btn-novo-layer.desenhando {
    background:   var(--srp-amarelo) !important;
    color:        #1b5e20 !important;
    border-color: var(--srp-amarelo) !important;
    animation:    srp-pulse 1.5s ease-in-out infinite;
}


/* responsivo */
@media (max-width: 600px) {
    #painel-layers-srp { width: calc(100% - 20px); }
}

/* ═══════════════════════════════════════════════════════════════
   FERRAMENTA DE MEDIÇÃO
═══════════════════════════════════════════════════════════════ */

/* Botão no header */
#btn-medir-mapa {
    background:      rgba(255,255,255,.12);
    border:          1px solid rgba(255,255,255,.25);
    color:           var(--srp-branco);
    border-radius:   50%;
    width:           34px;
    height:          34px;
    font-size:       16px;
    cursor:          pointer;
    transition:      background var(--srp-trans);
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    flex-shrink:     0;
}
#btn-medir-mapa:hover         { background: rgba(255,255,255,.25); }
#btn-medir-mapa.ativo         { background: var(--srp-amarelo); color: #1b5e20; border-color: var(--srp-amarelo); }

/* Painel flutuante de medição */
#painel-medicao-srp {
    position:        absolute;
    top:             0;
    right:           0;
    bottom:          0;
    width:           240px;
    background:      #fff;
    border-left:     2px solid #c8e6c9;
    box-shadow:      -3px 0 14px rgba(0,0,0,.12);
    z-index:         1001;
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
    font-size:       13px;
    transition:      width .25s ease;
}

/* Estado minimizado: vira uma aba estreita na lateral */
#painel-medicao-srp.srp-medicao-minimizado {
    width: 36px;
}
#painel-medicao-srp.srp-medicao-minimizado .srp-medicao-body {
    display: none;
}
#painel-medicao-srp.srp-medicao-minimizado .srp-medicao-header {
    writing-mode:     vertical-rl;
    text-orientation: mixed;
    padding:          14px 8px;
    justify-content:  flex-start;
    height:           100%;
    cursor:           pointer;
    gap:              8px;
}
#painel-medicao-srp.srp-medicao-minimizado .srp-painel-header-btns {
    flex-direction: column;
    margin-top:     auto;
}

.srp-medicao-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--srp-verde-escuro);
    color:           #fff;
    padding:         10px 14px;
    font-weight:     700;
    font-size:       14px;
    flex-shrink:     0;
}
.srp-medicao-header button {
    background: none;
    border:     none;
    color:      rgba(255,255,255,.8);
    font-size:  16px;
    cursor:     pointer;
    line-height: 1;
    padding:    2px 4px;
}
.srp-medicao-header button:hover { color: #fff; }

.srp-medicao-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Botões de modo */
#srp-medicao-modos {
    display: flex;
    gap:     6px;
}
.srp-btn-modo {
    flex:          1;
    padding:       7px 6px;
    font-size:     12px;
    font-weight:   600;
    border:        1.5px solid #ddd;
    border-radius: 6px;
    background:    #f9f9f9;
    color:         #555;
    cursor:        pointer;
    transition:    all var(--srp-trans);
}
.srp-btn-modo:hover { border-color: var(--srp-verde); color: var(--srp-verde); }
.srp-btn-modo.ativo {
    background:   var(--srp-verde);
    color:        #fff;
    border-color: var(--srp-verde);
}

/* Instrução */
#srp-medicao-instrucao {
    font-size:   12px;
    color:       var(--srp-cinza);
    text-align:  center;
    padding:     4px 0;
    line-height: 1.4;
}

/* Resultados */
#srp-medicao-resultados {
    background:    var(--srp-cinza-cl);
    border-radius: 7px;
    padding:       10px 12px;
    display:       flex;
    flex-direction: column;
    gap:           8px;
}
.srp-res-label {
    font-size:   11px;
    font-weight: 600;
    color:       var(--srp-cinza);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.srp-res-valor {
    font-size:   22px;
    font-weight: 700;
    color:       var(--srp-verde-escuro);
    line-height: 1.1;
}
.srp-res-sub {
    display:     flex;
    gap:         10px;
    margin-top:  4px;
    flex-wrap:   wrap;
}
.srp-res-sub span {
    font-size:     12px;
    color:         var(--srp-cinza);
    background:    #fff;
    border-radius: 4px;
    padding:       2px 7px;
    border:        1px solid #e0e0e0;
}

/* Segmentos */
#srp-lista-segmentos {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    max-height:     120px;
    overflow-y:     auto;
}
.srp-seg-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       12px;
    padding:         3px 0;
    border-bottom:   1px solid #e8e8e8;
    color:           #444;
}
.srp-seg-item:last-child { border-bottom: none; }
.srp-seg-num  { font-weight: 600; color: var(--srp-verde-escuro); min-width: 22px; }
.srp-seg-dist { color: var(--srp-cinza); }

/* Ações */
.srp-medicao-acoes {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   5px;
}
.srp-btn-medicao-sec {
    padding:       6px 4px;
    font-size:     11px;
    font-weight:   600;
    border:        1px solid #ddd;
    border-radius: 6px;
    background:    #fff;
    color:         #555;
    cursor:        pointer;
    transition:    all var(--srp-trans);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.srp-btn-medicao-sec:hover { background: #f5f5f5; border-color: #aaa; }

/* Dica */
.srp-medicao-dica {
    font-size:  10px;
    color:      #bbb;
    text-align: center;
}

/* Cursor do mapa durante medição */
#mapa-pinda.modo-medicao { cursor: crosshair !important; }

/* Tooltip de medição no mapa */
.srp-medicao-tooltip {
    background:    rgba(30,30,30,.85);
    border:        none;
    color:         #fff;
    font-size:     12px;
    font-weight:   600;
    padding:       4px 9px;
    border-radius: 5px;
    box-shadow:    none;
    white-space:   nowrap;
}
.srp-medicao-tooltip::before { display: none; }

@media (max-width: 600px) {
    #painel-medicao-srp {
        top:        auto;
        right:      0;
        left:       0;
        bottom:     56px;
        width:      100% !important;
        max-height: 46vh;
        border-left: none;
        border-top:  2px solid #c8e6c9;
    }
    #painel-medicao-srp.srp-medicao-minimizado {
        max-height:  36px;
        overflow:    hidden;
    }
    #painel-medicao-srp.srp-medicao-minimizado .srp-medicao-header {
        writing-mode: horizontal-tb;
        height:       auto;
        padding:      8px 12px;
    }
    #btn-medir-mapa { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   SELETOR DE CAMADAS BASE (Satélite / Vegetação)
═══════════════════════════════════════════════════════════════ */
#srp-basemap-selector {
    position:        absolute;
    bottom:          48px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         1000;
    display:         flex;
    gap:             6px;
    background:      rgba(255, 255, 255, 0.97);
    border:          1px solid rgba(0,0,0,.13);
    border-radius:   12px;
    padding:         7px 10px;
    box-shadow:      0 4px 18px rgba(0,0,0,.18);
    backdrop-filter: blur(6px);
    pointer-events:  all;
}

.srp-bm-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             3px;
    background:      #f4f5f7;
    border:          1.5px solid transparent;
    border-radius:   9px;
    padding:         7px 14px 6px;
    cursor:          pointer;
    transition:      background .18s, border-color .18s, transform .12s, box-shadow .18s;
    min-width:       64px;
    font-family:     inherit;
}

.srp-bm-btn:hover {
    background:  #e8edf3;
    border-color:#a0b4c8;
    transform:   translateY(-2px);
    box-shadow:  0 3px 10px rgba(0,0,0,.12);
}

.srp-bm-btn.ativo {
    background:   #1e6e42;
    border-color: #155432;
    box-shadow:   0 3px 12px rgba(30,110,66,.35);
    transform:    translateY(-2px);
}

.srp-bm-icon {
    font-size: 20px;
    line-height: 1;
}

.srp-bm-label {
    font-size:   10.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color:       #3a4a5a;
    white-space: nowrap;
}

.srp-bm-btn.ativo .srp-bm-label {
    color: #fff;
}

@media (max-width: 600px) {
    #srp-basemap-selector {
        bottom:  42px;
        padding: 5px 7px;
        gap:     4px;
    }
    .srp-bm-btn {
        min-width: 52px;
        padding:   5px 9px 5px;
    }
    .srp-bm-icon  { font-size: 17px; }
    .srp-bm-label { font-size: 9.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   GEOLOCALIZAÇÃO & PIN NO MAPA
═══════════════════════════════════════════════════════════════ */

/* Cursor crosshair quando modo de inserção está ativo */
#mapa-pinda.srp-cursor-crosshair,
#mapa-pinda.srp-cursor-crosshair .leaflet-container {
    cursor: crosshair !important;
}

/* Botões de estado ativo no painel admin */
#btn-pin-no-mapa.ativo,
#btn-localizar-usuario.ativo {
    background:   #1e6e42;
    color:        #fff;
    border-color: #155432;
}

/* ── Marcador "Você está aqui" ── */
.srp-icone-usuario {
    position:   relative;
    background: transparent;
    border:     none;
}

.srp-pulse-dot {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         14px;
    height:        14px;
    background:    #1565c0;
    border:        2.5px solid #fff;
    border-radius: 50%;
    box-shadow:    0 2px 6px rgba(21,101,192,.5);
    z-index:       2;
}

.srp-pulse-ring {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         28px;
    height:        28px;
    border:        2px solid #1976d2;
    border-radius: 50%;
    opacity:       0;
    animation:     srp-pulse 1.8s ease-out infinite;
    z-index:       1;
}

@keyframes srp-pulse {
    0%   { transform: translate(-50%, -50%) scale(.4); opacity: .9; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* ── Popup da localização ── */
.srp-popup-localizacao {
    font-size:   13px;
    line-height: 1.5;
    min-width:   170px;
}

.srp-popup-localizacao strong {
    display:     block;
    margin-bottom: 2px;
    font-size:   14px;
}

.srp-btn-pin-aqui {
    margin-top:    8px;
    width:         100%;
    padding:       7px 0;
    font-size:     13px;
    border-radius: 7px;
    cursor:        pointer;
}

@media (max-width: 600px) {
    #btn-pin-no-mapa,
    #btn-localizar-usuario { font-size: 12px; padding: 5px 9px; }
}

/* ── Painel de medição compacto em mobile ── */
@media (max-width: 768px) {
    .srp-medicao-body {
        padding: 8px 10px;
        gap:     7px;
    }
    .srp-btn-modo {
        font-size: 11px;
        padding:   6px 4px;
    }
    #srp-medicao-resultados {
        padding: 8px 10px;
    }
    .srp-res-valor { font-size: 18px; }
    .srp-res-label { font-size: 10px; }
    .srp-res-sub span { font-size: 11px; padding: 2px 5px; }
    /* Header logo e texto menores */
    #srp-logo           { height: 30px; }
    #srp-header-text h2 { font-size: 18px; }
    #srp-header-text p  { display: none; }
    /* Botões do header menores */
    #btn-localizar-publico,
    #btn-medir-mapa,
    #btn-admin-mapa {
        width:     30px;
        height:    30px;
        font-size: 15px;
    }
    #srp-header-btns { gap: 4px; }
}

/* iPhone 6 e telas muito pequenas (≤ 375px) */
@media (max-width: 375px) {
    #mapa-pinda-header {
        padding: 6px 10px;
        gap:     8px;
    }
    #srp-logo           { height: 26px; }
    #srp-header-text h2 { font-size: 16px; }
    .srp-medicao-header { padding: 8px 12px; font-size: 13px; }
    .srp-btn-modo       { font-size: 10px; padding: 5px 3px; }
    .srp-res-valor      { font-size: 16px; }
    #srp-medicao-modos  { gap: 3px; }
    /* Basemap selector compacto */
    #srp-basemap-selector {
        padding: 4px 6px;
        gap:     3px;
        bottom:  38px;
    }
    .srp-bm-btn    { min-width: 46px; padding: 4px 6px; }
    .srp-bm-icon   { font-size: 15px; }
    .srp-bm-label  { font-size: 9px; }
    /* Footer compacto */
    #mapa-pinda-footer {
        padding:   4px 10px;
        font-size: 10px;
    }
    #srp-coords-display { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════
   GPS WALK — controles e status
═══════════════════════════════════════════════════════════════ */
#srp-gps-controles {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin:         4px 0;
}

.srp-gps-status {
    font-size:     12px;
    text-align:    center;
    color:         #1565c0;
    background:    #e3f2fd;
    border:        1.5px solid #90caf9;
    border-radius: 7px;
    padding:       7px 10px;
    font-weight:   700;
    line-height:   1.4;
    transition:    border-color .4s;
}

.srp-gps-acoes {
    display:         flex;
    gap:             5px;
    justify-content: center;
    flex-wrap:       wrap;
}

/* Botão Iniciar GPS */
.srp-btn-gps-iniciar {
    padding:       10px 20px;
    border-radius: 8px;
    cursor:        pointer;
    border:        1.5px solid #1b5e20;
    background:    linear-gradient(135deg, #2e7d32, #1b5e20);
    color:         #fff;
    font-weight:   700;
    font-size:     14px;
    transition:    all .15s;
    min-height:    44px;
    flex:          1;
    box-shadow:    0 2px 8px rgba(27,94,32,.3);
}
.srp-btn-gps-iniciar:hover { background: linear-gradient(135deg,#1b5e20,#0a3d11); transform: translateY(-1px); }

/* Botão Ponto Manual */
.srp-btn-gps-ponto {
    padding:       10px 14px;
    border-radius: 8px;
    cursor:        pointer;
    border:        1.5px solid #0277bd;
    background:    linear-gradient(135deg, #0288d1, #01579b);
    color:         #fff;
    font-weight:   700;
    font-size:     13px;
    transition:    all .15s;
    min-height:    44px;
    flex:          1;
    box-shadow:    0 2px 8px rgba(1,87,155,.3);
}
.srp-btn-gps-ponto:hover    { background: linear-gradient(135deg,#01579b,#003c6e); transform: translateY(-1px); }
.srp-btn-gps-ponto:active   { transform: scale(.95); }
.srp-btn-gps-ponto:disabled { opacity: .5; cursor: not-allowed; }

/* Botão Finalizar GPS */
.srp-btn-gps-parar {
    padding:       10px 14px;
    border-radius: 8px;
    cursor:        pointer;
    border:        1.5px solid #b71c1c;
    background:    linear-gradient(135deg, #c62828, #b71c1c);
    color:         #fff;
    font-weight:   700;
    font-size:     13px;
    transition:    all .15s;
    min-height:    44px;
    flex:          1;
    box-shadow:    0 2px 8px rgba(183,28,28,.3);
}
.srp-btn-gps-parar:hover { background: linear-gradient(135deg,#b71c1c,#7f0000); transform: translateY(-1px); }

/* Toggle registro automático */
.srp-gps-auto-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    color:       #555;
    cursor:      pointer;
    padding:     4px 6px;
    background:  #f5f5f5;
    border:      1px solid #e0e0e0;
    border-radius: 6px;
}
.srp-gps-auto-label input[type="checkbox"] {
    width:  15px;
    height: 15px;
    cursor: pointer;
    accent-color: #2e7d32;
}

/* ═══════════════════════════════════════════════════════════════
   LABELS DE SEGMENTO NO MAPA (distâncias nos lados do polígono)
═══════════════════════════════════════════════════════════════ */
.srp-seg-label {
    background:    rgba(30, 30, 30, 0.82) !important;
    border:        none !important;
    border-radius: 5px !important;
    color:         #ffffff !important;
    font-size:     12px !important;
    font-weight:   700 !important;
    padding:       3px 8px !important;
    white-space:   nowrap !important;
    box-shadow:    0 2px 6px rgba(0,0,0,.3) !important;
    pointer-events: none !important;
}
.srp-seg-label::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   CARD DE RESULTADO NO MAPA — DEPRECATED v2.3.0
   O card flutuante foi removido. Os estilos abaixo são mantidos
   por compatibilidade mas não são mais renderizados.
═══════════════════════════════════════════════════════════════ */
.srp-card-medicao-icon { display: none !important; }  /* segurança extra */
.srp-card-medicao { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   BÚSSOLA NORTE (leaflet control, top-right)
═══════════════════════════════════════════════════════════════ */
.srp-bussola {
    width:          44px;
    height:         44px;
    cursor:         pointer;
    border-radius:  50%;
    background:     transparent;
    border:         none;
    padding:        0;
    filter:         drop-shadow(0 1px 3px rgba(0,0,0,.30));
    transition:     filter .15s, transform .15s;
}
.srp-bussola:hover {
    filter:    drop-shadow(0 2px 7px rgba(0,0,0,.40));
    transform: scale(1.08);
}
.srp-bussola-svg    { display: block; }
.srp-bussola-agulha { transition: transform .35s cubic-bezier(.4,0,.2,1); }

/* ═══════════════════════════════════════════════════════════════
   ALÇA DE ARRASTO — medições salvas
═══════════════════════════════════════════════════════════════ */
.srp-drag-handle             { cursor: grab !important; }
.srp-drag-handle:active      { cursor: grabbing !important; }
.srp-drag-handle-inner {
    width:            28px;
    height:           28px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       transform .12s;
    filter:           drop-shadow(0 1px 4px rgba(0,0,0,.30));
}
.srp-drag-handle-inner:hover { transform: scale(1.18); }

/* ═══════════════════════════════════════════════════════════════
   BOTÃO "SALVAR NO MAPA" — destaque após finalizar medição
═══════════════════════════════════════════════════════════════ */
.srp-btn-medicao-finalizar {
    width:         100%;
    padding:       7px 6px;
    font-size:     12px;
    font-weight:   700;
    border:        1.5px solid #1565c0;
    border-radius: 7px;
    background:    linear-gradient(135deg, #1976d2, #1565c0);
    color:         #fff;
    cursor:        pointer;
    transition:    all .18s;
    box-shadow:    0 2px 7px rgba(21,101,192,.25);
}
.srp-btn-medicao-finalizar:hover {
    background: linear-gradient(135deg, #1565c0, #0d47a1);
    box-shadow: 0 4px 10px rgba(21,101,192,.35);
}

.srp-btn-medicao-salvar {
    width:         100%;
    padding:       7px 6px;
    font-size:     12px;
    font-weight:   700;
    border:        1.5px solid #1b5e20;
    border-radius: 7px;
    background:    linear-gradient(135deg, #2e7d32, #1b5e20);
    color:         #fff;
    cursor:        pointer;
    transition:    all .18s;
    box-shadow:    0 2px 7px rgba(27,94,32,.25);
}
.srp-btn-medicao-salvar:hover {
    background: linear-gradient(135deg, #1b5e20, #0a3d11);
    box-shadow: 0 4px 10px rgba(27,94,32,.35);
}

/* Botão Limpar em vermelho suave */
#btn-medicao-limpar {
    color:        #c62828 !important;
    border-color: #e57373 !important;
}
#btn-medicao-limpar:hover { background: #ffebee !important; border-color: #c62828 !important; }

/* Resultado de perímetro — estilo igual ao resultado de área */
#srp-resultado-perimetro .srp-res-label { color: #5d4037; }
#srp-val-perimetro,
.srp-res-valor-sm {
    font-size:   17px;
    font-weight: 700;
    color:       var(--srp-verde-escuro);
}

/* Resultado de elevação no painel */
#srp-resultado-elevacao .srp-res-label { color: #37474f; }
#srp-resultado-elevacao .srp-res-valor { color: #263238; }

/* Sub-unidade da distância */
#srp-val-distancia-alt {
    font-size: 11px;
    color:     var(--srp-cinza);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   BOTÃO DE MODO GPS — destaque igual aos outros modos
═══════════════════════════════════════════════════════════════ */
#btn-modo-gps { position: relative; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — ajustes do painel de medição e GPS
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .srp-gps-acoes { gap: 4px; }

    .srp-btn-gps-iniciar,
    .srp-btn-gps-ponto,
    .srp-btn-gps-parar {
        font-size:  12px;
        padding:    9px 10px;
        min-height: 42px;
    }

    .srp-seg-label { font-size: 11px !important; }

    #srp-medicao-modos { gap: 4px; }
    .srp-btn-modo {
        padding:   7px 6px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CORREÇÕES DE ACESSIBILIDADE — header / zoom / painel admin
═══════════════════════════════════════════════════════════════ */

/* Em desktop: header nunca se oculta */
@media (min-width: 769px) {
    #mapa-pinda-header.srp-header-oculto {
        max-height:     80px !important;
        padding-top:    8px !important;
        padding-bottom: 8px !important;
        opacity:        1 !important;
        pointer-events: auto !important;
        border-bottom:  2px solid rgba(255,255,255,.08) !important;
    }
    #btn-restaurar-header {
        display: none !important;
    }
    #painel-admin-srp.srp-header-oculto {
        max-height:     600px !important;
        opacity:        1 !important;
        pointer-events: auto !important;
    }
}

/* Zoom control: posicionado no canto inferior esquerdo via JS (bottomleft) */
.leaflet-bottom.leaflet-left .leaflet-control-zoom {
    margin-bottom: 56px !important;   /* acima do basemap selector */
    margin-left:   10px !important;
}

/* Em mobile: evita sobreposição com o basemap selector maior */
@media (max-width: 768px) {
    .leaflet-bottom.leaflet-left .leaflet-control-zoom {
        margin-bottom: 66px !important;
        margin-left:   8px !important;
    }

    /* Painel admin: quando logado, nunca ultrapassa a largura da tela */
    #painel-admin-srp {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Botão restaurar: sempre visível sobre o mapa */
    #btn-restaurar-header {
        top:    8px;
        left:   50%;
        transform: translateX(-50%);
        font-size: 12px;
        padding:   5px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BADGE DE ALTITUDE
   — exibido no canto inferior direito do mapa, atualiza no zoom
═══════════════════════════════════════════════════════════════ */

#srp-altitude-badge {
    position:        absolute;
    bottom:          36px;      /* acima do footer/attribution */
    right:           10px;
    z-index:         800;

    display:         flex;
    align-items:     center;
    gap:             4px;

    background:      rgba(20, 20, 20, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color:           #e8f5e9;
    border-radius:   8px;
    padding:         5px 10px;
    font-family:     'Segoe UI', Arial, sans-serif;
    font-size:       12px;
    font-weight:     600;
    white-space:     nowrap;
    box-shadow:      0 2px 8px rgba(0,0,0,.35);
    border:          1px solid rgba(255,255,255,.12);
    pointer-events:  none;
    user-select:     none;

    transition:      opacity .3s ease;
}

.srp-alt-icon {
    font-size:   13px;
    line-height: 1;
    opacity:     .85;
}

.srp-alt-label {
    color:       rgba(200,230,200,.6);
    font-size:   10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 1px;
}

#srp-altitude-valor {
    color:       #a5d6a7;
    font-weight: 800;
    font-size:   13px;
    min-width:   32px;
    text-align:  right;
    font-variant-numeric: tabular-nums;
}

.srp-alt-unidade {
    color:       rgba(200,230,200,.65);
    font-size:   11px;
    font-weight: 500;
}

/* Pulso sutil enquanto carrega */
#srp-altitude-badge.srp-alt-carregando #srp-altitude-valor {
    animation: srp-alt-pulse .9s ease-in-out infinite alternate;
}

@keyframes srp-alt-pulse {
    from { opacity: 1; }
    to   { opacity: .35; }
}

/* ─ Mobile: sobe um pouco para não colidir com atribuição ─ */
@media (max-width: 768px) {
    #srp-altitude-badge {
        bottom:    44px;
        right:      8px;
        font-size: 11px;
        padding:    4px 8px;
    }
    #srp-altitude-valor { font-size: 12px; }
}
/* srp-card-medicao removido em v2.3.0 — redundante com painel lateral */

/* ═══════════════════════════════════════════════════════════════
   MODAL DE BACKUP — abas + tabela de auto-saves
═══════════════════════════════════════════════════════════════ */

.srp-modal-backup-box {
    max-width:  560px;
    width:      96%;
}

/* ── Abas ── */
.srp-backup-tabs {
    display:       flex;
    gap:           6px;
    margin-bottom: 14px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0;
}

.srp-backup-tab {
    background:    transparent;
    border:        none;
    border-bottom: 3px solid transparent;
    padding:       8px 14px;
    margin-bottom: -2px;
    font-size:     13px;
    font-weight:   600;
    color:         #666;
    cursor:        pointer;
    border-radius: 4px 4px 0 0;
    transition:    color .15s, border-color .15s;
}

.srp-backup-tab:hover  { color: #2e7d32; }
.srp-backup-tab.ativo  {
    color:        #2e7d32;
    border-bottom-color: #2e7d32;
    background:   #f1f8e9;
}

/* ── Painel de aba ── */
.srp-backup-tabpanel {
    animation: srp-fadein .18s ease;
}

@keyframes srp-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.srp-backup-desc {
    font-size:    13px;
    color:        #555;
    margin:       0 0 12px;
    line-height:  1.5;
}
.srp-backup-desc code {
    background:   #f5f5f5;
    border:       1px solid #ddd;
    padding:      1px 5px;
    border-radius: 3px;
    font-size:    12px;
}

/* ── Tabela de auto-saves ── */
.srp-autosave-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
    margin-bottom:   8px;
}

.srp-autosave-table thead th {
    background:   #f5f5f5;
    border-bottom: 2px solid #ddd;
    padding:       6px 10px;
    text-align:    left;
    font-weight:   700;
    color:         #444;
}

.srp-autosave-table thead th:first-child {
    width: 32px;
}

.srp-autosave-row {
    cursor:     pointer;
    transition: background .12s;
}
.srp-autosave-row:hover       { background: #f9fbe7; }
.srp-autosave-row.selecionado { background: #e8f5e9; }

.srp-autosave-row td {
    padding:       7px 10px;
    border-bottom: 1px solid #eee;
}

.srp-as-data { font-family: monospace; font-size: 12px; }
.srp-as-size { color: #888; font-size: 12px; text-align: right; }

#srp-autosave-lista-wrap {
    max-height:   260px;
    overflow-y:   auto;
    border:       1px solid #e0e0e0;
    border-radius: 6px;
    background:   #fff;
}

/* Mobile: compacta a tabela */
@media (max-width: 480px) {
    .srp-backup-tab    { font-size: 11px; padding: 7px 10px; }
    .srp-as-data       { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   BÚSSOLA NORTE (Leaflet control, top-right)
═══════════════════════════════════════════════════════════════ */
.srp-bussola {
    width:           44px;
    height:          44px;
    cursor:          pointer;
    user-select:     none;
    border-radius:   50%;
    box-shadow:      0 2px 8px rgba(0,0,0,.40);
    transition:      transform .15s, box-shadow .15s;
}
.srp-bussola:hover {
    transform:   scale(1.08);
    box-shadow:  0 4px 14px rgba(0,0,0,.50);
}
.srp-bussola-svg {
    display: block;
    width:   100%;
    height:  100%;
}
.srp-bussola-agulha {
    transform-origin: 22px 22px;
    transition:       transform .25s ease;
}

/* Cursor especial durante arraste de área salva */
.srp-cursor-grabbing,
.srp-cursor-grabbing .leaflet-container { cursor: grabbing !important; }

/* ─ Responsivo mobile ─ */
@media (max-width: 768px) {
    .srp-bussola { width: 38px; height: 38px; }
}
@media (max-width: 375px) {
    .srp-bussola { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   BOTÃO DE EDIÇÃO DE VÉRTICES DE MEDIÇÃO SALVA
═══════════════════════════════════════════════════════════════ */
.srp-drag-handle-edit-btn {
    position:        absolute;
    top:             -10px;
    right:           -10px;
    width:           20px;
    height:          20px;
    border-radius:   50%;
    background:      #1565c0;
    border:          1.5px solid #fff;
    color:           #fff;
    font-size:       11px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 1px 4px rgba(0,0,0,.4);
    transition:      background .15s;
    z-index:         10;
}
.srp-drag-handle-edit-btn:hover { background: #0d47a1; }

/* Vértice editável de medição salva */
.srp-vertex-saved {
    width:        12px;
    height:       12px;
    border-radius: 50%;
    background:   #fff;
    border:       2px solid #1565c0;
    cursor:       move;
    box-shadow:   0 1px 4px rgba(0,0,0,.35);
    transition:   transform .12s;
}
.srp-vertex-saved:hover { transform: scale(1.4); background: #bbdefb; }

/* ═══════════════════════════════════════════════════════════════
   "COMO CHEGAR" — links no popup de pin
═══════════════════════════════════════════════════════════════ */
.srp-como-chegar {
    margin-top:     8px;
    padding-top:    8px;
    border-top:     1px solid #e0e0e0;
    display:        flex;
    gap:            6px;
    flex-wrap:      wrap;
}
.srp-chegar-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         5px 10px;
    border-radius:   6px;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    border:          1.5px solid transparent;
    transition:      all .15s;
    white-space:     nowrap;
}
.srp-chegar-gmaps  { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.srp-chegar-gmaps:hover  { background: #c8e6c9; }
.srp-chegar-waze   { background: #e3f2fd; color: #0d47a1; border-color: #90caf9; }
.srp-chegar-waze:hover   { background: #bbdefb; }
.srp-chegar-wpp    { background: #e8f5e9; color: #1b5e20; border-color: #81c784; }
.srp-chegar-wpp:hover    { background: #c8e6c9; }

/* Elevação em tempo real no rodapé */
#srp-footer-elevacao {
    font-family:   monospace;
    font-size:     11px;
    background:    rgba(255,255,255,.12);
    padding:       2px 8px;
    border-radius: 4px;
    white-space:   nowrap;
}

/* ── Inputs de "Como Chegar" no formulário de pin ─ */
.srp-chegar-inputs {
    display:        flex;
    flex-direction: column;
    gap:            7px;
    margin-bottom:  4px;
}
.srp-chegar-input-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}
.srp-chegar-icone {
    font-size:   18px;
    flex-shrink: 0;
    width:       24px;
    text-align:  center;
}
.srp-chegar-input-row input[type="url"] {
    flex:         1;
    padding:      8px 10px;
    border:       1px solid #ccc;
    border-radius:6px;
    font-size:    13px;
    font-family:  inherit;
}
.srp-chegar-input-row input[type="url"]:focus {
    outline:      none;
    border-color: var(--srp-verde);
    box-shadow:   0 0 0 2px rgba(46,125,50,.15);
}

/* Botão de edição ativo (modo edição de vértices ligado) */
.srp-drag-handle-edit-ativo {
    background:   #1565c0 !important;
    border-color: #0d47a1 !important;
    color:        #fff !important;
    font-size:    10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   v3.0.0 — OVERLAY SELECTOR (hillshade / isolinhas)
═══════════════════════════════════════════════════════════════ */
#srp-overlay-selector {
    position:        absolute;
    bottom:          100px;
    right:           10px;
    z-index:         900;
    display:         flex;
    flex-direction:  column;
    gap:             5px;
}
.srp-ov-btn {
    display:         flex;
    align-items:     center;
    gap:             5px;
    padding:         6px 10px;
    border-radius:   8px;
    border:          1px solid #ccc;
    background:      rgba(255,255,255,.92);
    cursor:          pointer;
    font-size:       12px;
    font-weight:     600;
    box-shadow:      0 1px 5px rgba(0,0,0,.2);
    transition:      background .15s, border-color .15s;
    white-space:     nowrap;
}
.srp-ov-btn:hover  { background: #f0f7f0; }
.srp-ov-btn.ativo  { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
.srp-ov-icon       { font-size: 14px; }
.srp-ov-label      { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   v3.0.0 — PAINEL PERFIL DE ELEVAÇÃO
═══════════════════════════════════════════════════════════════ */
#painel-perfil-elevacao {
    position:        absolute;
    bottom:          50px;
    left:            10px;
    width:           380px;
    max-width:       calc(100vw - 20px);
    background:      rgba(255,255,255,.97);
    border-radius:   10px;
    box-shadow:      var(--srp-sombra);
    z-index:         950;
    overflow:        hidden;
    border:          1px solid rgba(46,125,50,.2);
}
.srp-perfil-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 12px;
    background:      linear-gradient(135deg, var(--srp-verde-escuro), var(--srp-verde));
    color:           #fff;
    font-weight:     700;
    font-size:       13px;
}
.srp-perfil-header button {
    background:   none;
    border:       none;
    color:        rgba(255,255,255,.8);
    cursor:       pointer;
    font-size:    14px;
    padding:      2px 6px;
    border-radius:4px;
    transition:   background .15s;
}
.srp-perfil-header button:hover { background: rgba(255,255,255,.15); }

.srp-perfil-body  { padding: 10px; }

#srp-perfil-status {
    text-align:    center;
    color:         #666;
    font-size:     12px;
    padding:       12px;
}

.srp-perfil-inner { width: 100%; }

.srp-perfil-stats {
    display:         flex;
    justify-content: space-around;
    margin-top:      6px;
    padding:         5px 4px;
    background:      #f5f5f5;
    border-radius:   6px;
    font-size:       11px;
    font-weight:     700;
    color:           #444;
    gap:             4px;
}
.srp-perfil-stats span {
    background:    white;
    padding:       3px 7px;
    border-radius: 5px;
    box-shadow:    0 1px 3px rgba(0,0,0,.08);
}

/* Botão de perfil de elevação no painel de medição */
.srp-btn-medicao-perfil {
    width:           100%;
    padding:         7px 10px;
    border-radius:   7px;
    border:          1px solid #1565c0;
    background:      #e3f2fd;
    color:           #0d47a1;
    font-weight:     700;
    font-size:       12px;
    cursor:          pointer;
    margin-top:      4px;
    transition:      background .15s;
    text-align:      center;
}
.srp-btn-medicao-perfil:hover { background: #bbdefb; }

/* ── Exportar medição (GeoJSON / KML) ──────────────────────── */
.srp-exportar-titulo {
    font-size:   10px;
    font-weight: 600;
    color:       var(--srp-cinza);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.srp-exportar-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.srp-btn-exportar {
    padding:       6px 4px;
    font-size:     11px;
    font-weight:   700;
    border:        1.5px solid var(--srp-verde);
    border-radius: 6px;
    background:    #fff;
    color:         var(--srp-verde);
    cursor:        pointer;
    text-align:    center;
    transition:    all var(--srp-trans);
}
.srp-btn-exportar:hover {
    background: var(--srp-verde);
    color:      #fff;
}


═══════════════════════════════════════════════════════════════ */
.srp-layer-btn-geojson {
    padding:      4px 7px;
    border-radius:5px;
    border:       1px solid #1565c0;
    background:   #e3f2fd;
    color:        #0d47a1;
    font-size:    13px;
    cursor:       pointer;
    transition:   background .15s;
    line-height:  1;
}
.srp-layer-btn-geojson:hover:not(:disabled) { background: #bbdefb; }
.srp-layer-btn-geojson:disabled { opacity: .5; cursor: wait; }

/* ═══════════════════════════════════════════════════════════════
   v3.0.0 — BASEMAP SELECTOR EXTRA ITEMS (mais largo)
═══════════════════════════════════════════════════════════════ */
#srp-basemap-selector {
    gap: 4px;
    flex-wrap: wrap;
}
#srp-basemap-selector .srp-bm-btn {
    min-width: 62px;
}

/* Responsivo: oculta overlay selector em tela muito pequena */
@media (max-width: 480px) {
    #srp-overlay-selector { bottom: 80px; right: 6px; }
    .srp-ov-label          { display: none; }
    .srp-ov-btn            { padding: 6px 8px; }
    #painel-perfil-elevacao{ width: calc(100vw - 12px); left: 6px; bottom: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   v4.0 — MALHA DE ELEVAÇÃO (modo área de medição)
══════════════════════════════════════════════════════════════ */

.srp-malha-tooltip {
    background: rgba(20,20,20,.85) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.srp-malha-tooltip::before { display: none !important; }
.srp-malha-tip-val { font-size: 12px; }

.srp-malha-legenda-titulo {
    font-size: 11px;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 4px;
    text-align: center;
    letter-spacing: .2px;
}

/* ══════════════════════════════════════════════════════════════
   v4.3 — DECLIVIDADE MÉDIA + HISTOGRAMA DE ALTITUDE
══════════════════════════════════════════════════════════════ */

.srp-bloco-extra {
    margin: 8px 0 2px;
    padding: 8px 10px;
    background: #f8fdf8;
    border: 1px solid #c8e6c9;
    border-radius: 7px;
}

/* — Declividade — */
.srp-declividade-val {
    color: #1565c0 !important;
    font-size: 20px !important;
}
.srp-declividade-classe {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 8px;
    background: #e3f2fd;
    color: #0d47a1;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
}
.srp-declividade-nota {
    font-size: 9px;
    color: #9e9e9e;
    margin-top: 3px;
}

/* — Histograma — */
.srp-histograma-svg {
    margin: 6px 0 2px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8f5e9;
}
.srp-histograma-nota {
    font-size: 9px;
    color: #9e9e9e;
    text-align: right;
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   v4.0 — BOTÃO 3D NO HEADER
══════════════════════════════════════════════════════════════ */

#btn-3d-mapa {
    background: linear-gradient(135deg, #1a237e, #283593);
    color: #fff;
    border: none;
    transition: background .2s, transform .15s;
}
#btn-3d-mapa:hover,
#btn-3d-mapa.ativo {
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    transform: scale(1.05);
}
#btn-3d-mapa.ativo {
    box-shadow: 0 0 0 2px #90caf9 inset;
}



/* ════════════════════════════════════════════════════════════
   OCULTAR FERRAMENTAS QUANDO POPUP ESTÁ ABERTO
   Aplica-se em telas pequenas para não obstruir o card de detalhes
════════════════════════════════════════════════════════════ */
.srp-popup-aberto #srp-basemap-selector,
.srp-popup-aberto #srp-overlay-selector,
.srp-popup-aberto #srp-altitude-badge {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

/* Em desktop (>= 769px) mantem as ferramentas visíveis */
@media (min-width: 769px) {
    .srp-popup-aberto #srp-basemap-selector,
    .srp-popup-aberto #srp-overlay-selector,
    .srp-popup-aberto #srp-altitude-badge {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ════════════════════════════════════════════════════════════
   LIGHTBOX — Tela cheia para fotos do slideshow
════════════════════════════════════════════════════════════ */
.srp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .92);
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0;
}
.srp-lightbox.aberto {
    display: flex;
}
.srp-lb-content {
    position: relative;
    max-width: calc(100vw - 120px);
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#srp-lb-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    box-shadow: 0 4px 40px rgba(0,0,0,.6);
    user-select: none;
}
.srp-lb-close {
    position: fixed;
    top: 14px;
    right: 18px;
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    font-size: 32px;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.srp-lb-close:hover { background: rgba(255,255,255,.2); }
.srp-lb-nav {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    font-size: 46px;
    line-height: 1;
    width: 56px;
    height: 80px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srp-lb-nav:hover { background: rgba(255,255,255,.25); }
.srp-lb-prev { margin-right: 10px; }
.srp-lb-next { margin-left: 10px; }
.srp-lb-counter {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
/* Ocultar nav se só 1 foto */
.srp-lightbox[data-total="1"] .srp-lb-nav { visibility: hidden; }

/* Imagem do slideshow: cursor pointer para indicar clicável */
.srp-slide img { cursor: zoom-in; }

/* ── Botão fechar do popup Leaflet — integrado ao header verde ── */
.srp-leaflet-popup .leaflet-popup-close-button {
    color: rgba(255,255,255,.9) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.18) !important;
    z-index: 20 !important;
}
.srp-leaflet-popup .leaflet-popup-close-button:hover {
    color: #fff !important;
    background: rgba(0,0,0,.40) !important;
}
/* Impede scroll do body quando o lightbox estiver aberto */
body.srp-lb-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════
   BOTTOM-SHEET MOBILE — desativado; balão Leaflet usado em todos
   os dispositivos. Elementos mantidos no HTML mas ocultos.
════════════════════════════════════════════════════════════ */
#srp-bs-backdrop,
#srp-bottom-sheet { display: none !important; }

/* ════════════════════════════════════════════════════════════
   BALÃO INFORMATIVO — popup Leaflet responsivo (mobile + desktop)
   Substitui o bottom-sheet: janela flutuante sobre o mapa,
   preservando a visualização do mapa ao fundo.
════════════════════════════════════════════════════════════ */

/* ── Wrapper do popup Leaflet ── */
.srp-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14) !important;
    /* Largura máxima: nunca ultrapassa a tela */
    max-width: min(420px, calc(100vw - 32px)) !important;
    /* Altura limitada para preservar o mapa ao fundo */
    max-height: min(72vh, 520px) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1.5px solid rgba(46,125,50,.18) !important;
    /* Sem scroll horizontal em nenhuma hipótese */
    overflow-x: hidden !important;
}

.srp-leaflet-popup .leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    /* Arredondamento interno */
    border-radius: 14px;
}

/* ── Ponteiro / cauda do balão ── */
.srp-leaflet-popup .leaflet-popup-tip-container {
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.18));
}
.srp-leaflet-popup .leaflet-popup-tip {
    background: var(--srp-verde) !important;
    box-shadow: none !important;
}

/* ── Card interno ── */
.srp-popup {
    font-family: 'Segoe UI', Arial, sans-serif;
    min-width: 240px;
    max-width: 340px;
    border-radius: 14px;
    overflow: hidden;
}

/* ── Slideshow dentro do popup: sem overflow horizontal ──
   As margens negativas do .srp-popup-body .srp-slideshow
   podem causar scroll lateral. Zeramos aqui para o contexto
   do popup balão (desktop e mobile). */
.srp-leaflet-popup .srp-popup-body .srp-slideshow {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.srp-leaflet-popup .srp-popup-body .srp-slideshow .srp-slides-track {
    border-radius: 0 !important;
}

/* ── Full-bleed dentro do balão Leaflet ── */
.srp-leaflet-popup .srp-popup-fb {
    min-width: 280px;
    max-width: 420px;
}
.srp-leaflet-popup .srp-fb-hero {
    height: 220px !important;
}
.srp-leaflet-popup .srp-fb-track,
.srp-leaflet-popup .srp-fb-track .srp-slide,
.srp-leaflet-popup .srp-fb-track .srp-slide img {
    height: 220px !important;
}

/* ── Nav bar do slideshow: garante altura mínima e flex correto ── */
.srp-leaflet-popup .srp-ss-nav-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: hidden !important;
}
.srp-leaflet-popup .srp-ss-nav {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 34px !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Responsivo mobile: popup como balão compacto ── */
@media (max-width: 768px) {
    /* Garante que o popup apareça em mobile */
    .srp-leaflet-popup {
        display: block !important;
        max-width: calc(100vw - 24px) !important;
    }

    .srp-leaflet-popup .leaflet-popup-content-wrapper {
        /* Altura menor em mobile para sempre manter mapa visível */
        max-height: min(62vh, 440px) !important;
        max-width: calc(100vw - 28px) !important;
        border-radius: 14px !important;
    }

    .srp-popup {
        min-width: min(280px, calc(100vw - 50px));
        max-width: calc(100vw - 32px);
    }

    /* Imagem do slideshow menor no mobile para preservar mapa */
    .srp-leaflet-popup .srp-slides-track { height: 140px !important; }
    .srp-leaflet-popup .srp-slide img    { height: 140px !important; }
    /* Full-bleed hero em mobile */
    .srp-leaflet-popup .srp-fb-hero { height: 155px !important; }
    .srp-leaflet-popup .srp-fb-track,
    .srp-leaflet-popup .srp-fb-track .srp-slide,
    .srp-leaflet-popup .srp-fb-track .srp-slide img { height: 155px !important; }

    /* Em landscape mobile (tela muito curta): reduz ainda mais */
    @media (max-height: 500px) {
        .srp-leaflet-popup .leaflet-popup-content-wrapper {
            max-height: 55vh !important;
        }
        .srp-leaflet-popup .srp-slides-track { height: 100px !important; }
        .srp-leaflet-popup .srp-slide img    { height: 100px !important; }
    }
}

/* ── Lightbox: z-index acima do popup Leaflet em qualquer contexto ──
   Leaflet cria stacking contexts com transform; o lightbox precisa de
   z-index alto o suficiente para aparecer acima deles. */
.srp-lightbox {
    z-index: 999999 !important;
}
.srp-lb-close {
    z-index: 1000001 !important;
}