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

/* ── Variáveis de cor ─────────────────────────────────────────
   v214 — DEFAULTS apenas. O template (mapa-template.php) sobrescreve
   estas variáveis no <style id="srp-personalizacao-css"> com os valores
   do wp_options['mapa_pinda_config']. Não use valores literais nos
   componentes — sempre use var() para que a customização White Label
   funcione globalmente. */
: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;
    /* v35 — Tipografia institucional alinhada ao logo AgriBusiness.
       Montserrat para títulos/UI (espelha o peso bold do "AgriBusiness").
       Open Sans para corpo longo (legibilidade superior em runs longos).
       O fallback inclui system-fonts modernos para não quebrar offline. */
    --srp-fonte-titulo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --srp-fonte-corpo:  'Open Sans', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    /* v48/v49 — Tokens institucionais .agbz- para a marca AgriBusiness CIEA.
       v49: corrigida a escolha tipográfica do v48 (Playfair Display estava
       errada — o logo usa SANS-SERIF pesada, não serifa).

         --agbz-font-brand → "AgriBusiness" do logo e títulos de painel.
                             Archivo Black 900 espelha o ápice chato do A,
                             curvas geométricas do B e peso uniforme das
                             letras do logo. Fallbacks em ordem decrescente
                             de proximidade visual ao logo: Poppins Black,
                             Inter Black, Montserrat 900, depois system black.
         --agbz-font-sans  → sigla "CIEA", abas, botões, UI compacta;
                             sans geométrica com letter-spacing generoso.
         --agbz-font-body  → corpo longo, descrições, formulário.
         --agbz-font-serif → DEPRECATED (v48). Alias do --agbz-font-brand
                             apenas para retrocompatibilidade. Não use em
                             código novo. */
    --agbz-font-brand: 'Archivo Black', 'Poppins', 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --agbz-font-sans:  'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
    --agbz-font-body:  'Open Sans', 'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --agbz-font-serif: var(--agbz-font-brand);  /* DEPRECATED — alias */
}

/* v35 — Aplica tipografia institucional aos elementos-chave da UI:
   títulos principais, contadores da legenda, dropdowns/selects, busca,
   pílulas de filtro, popovers. NÃO aplica globalmente em body para
   não quebrar temas WordPress que tenham sua própria tipografia. */
#mapa-pinda-wrap,
#mapa-pinda-wrap input,
#mapa-pinda-wrap button,
#mapa-pinda-wrap select,
#mapa-pinda-wrap textarea {
    font-family: var(--srp-fonte-corpo);
}
.srp-geoagro-bv-titulo,
.srp-bv-titulo,
.srp-login-titulo,
.srp-login-side-titulo,
.srp-ap-header h2,
#srp-admin-titulo-label,
.srp-legenda-painel-titulo,
.srp-filtro-lbl,
.srp-busca-pill,
.srp-filtro-selo-chip-lbl,
.srp-pin-ta-lbl,
.srp-tipo-acesso-opt-titulo,
.srp-ap-selo-opt-lbl {
    font-family: var(--srp-fonte-titulo);
    font-weight: 600;
    letter-spacing: -.005em;
}
.srp-filtro-select,
.srp-busca-input,
#srp-busca-input,
.srp-legenda-cnt,
.srp-filtro-selo-chip-cnt {
    font-family: var(--srp-fonte-titulo);
}

/* ═══════════════════════════════════════════════════════════════
   v48 — TIPOGRAFIA INSTITUCIONAL .agbz-
   ═══════════════════════════════════════════════════════════════
   Aplicação da serifa clássica (Playfair Display) ao display name
   "AgriBusiness" — palavra-âncora do logo — e a títulos de painéis
   onde o peso visual da serifa reforça a identidade institucional.
   A sans Montserrat permanece em todo elemento de interação
   (abas, botões, inputs) onde a legibilidade compacta é prioritária. */

/* Display name principal: "AgriBusiness CIEA" na topbar.
   A palavra "AgriBusiness" recebe Archivo Black; a sigla "CIEA"
   (em <strong> no template) herda automaticamente — preserva
   coerência visual com o logo onde os dois também são display. */
.srp-geoagro-bv-titulo,
.agbz-display-name,
.agbz-display,
.srp-popup-titulo,
.agbz-popup-titulo,
.srp-ap-topbar-titulo,
.srp-login-side-titulo {
    font-family: var(--agbz-font-brand);
    font-weight: 900;
    letter-spacing: -.01em;
}

/* Subtexto/sigla "Centro de Inteligência..." e abas/botões em sans
   geométrica. O letter-spacing levemente positivo (+.02em) é
   o sinal-tipográfico do CIEA do logo. */
.srp-geoagro-bv-sub,
.agbz-display-sub,
.srp-ap-tab,
.srp-ap-topbar-sub,
.srp-popup-subtitulo,
.agbz-popup-subtitulo {
    font-family: var(--agbz-font-sans);
    letter-spacing: .02em;
}

/* Corpo longo (descrições, labels, observações) em Open Sans. */
.srp-ap-corpo,
.srp-ap-form,
.srp-popup-descricao,
.agbz-popup-descricao {
    font-family: var(--agbz-font-body);
}

/* ══════════════════════════════════════════════════════════════
   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;
}

/* v37 FIX FINAL — Estado oculto NEUTRALIZADO.
   Por solicitação do SRP, cabeçalho nunca se oculta. Esta regra antes
   colapsava o header com max-height:0 + opacity:0; agora é no-op para
   garantir visibilidade absoluta mesmo se a classe for aplicada por
   código legado. */
#mapa-pinda-header.srp-header-oculto {
    max-height:     none !important;
    padding-top:    inherit !important;
    padding-bottom: inherit !important;
    opacity:        1 !important;
    pointer-events: auto !important;
    visibility:     visible !important;
}

/* v47 — Bloco CSS de #btn-restaurar-header REMOVIDO junto com o próprio
   botão flutuante "▲ GeoAgro SRP" que existia para restaurar o cabeçalho
   oculto. Função desativada desde v37; o botão era resquício obsoleto. */

/* 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) */
/* v37 FIX FINAL — Painel admin nunca oculta */
#painel-admin-srp.srp-header-oculto {
    max-height:     none !important;
    opacity:        1 !important;
    pointer-events: auto !important;
    overflow:       visible !important;
    visibility:     visible !important;
}

/* ── 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:         var(--srp-verde-escuro, #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 ── */
/* ════════════════════════════════════════════════════════════
   v91 — TOOLBAR ADMIN COM SWIPE HORIZONTAL UNIVERSAL
   ────────────────────────────────────────────────────────────
   Antes (v45-v90): no desktop a toolbar usava flex-wrap:wrap e
   quebrava em 2 linhas conforme novos botões eram adicionados.
   v48 já tinha swipe horizontal pra mobile (≤768px), mas no
   desktop ficava feio.

   v91: swipe horizontal em TODAS as larguras. Todos os botões
   ficam numa única linha contínua; usuário desliza com touchpad,
   trackpad horizontal, ou roda do mouse (vira scroll horizontal
   automaticamente via JS em mapa.js).

   Fading edges em AMBOS os lados (esquerda e direita) sinalizam
   que tem mais conteúdo pra rolar. As bordas só ficam opacas
   quando a posição de scroll está no extremo (via classes
   .at-start e .at-end aplicadas via JS).

   Scrollbar nativa escondida em todos os engines.
═══════════════════════════════════════════════════════════════ */
#srp-admin-acoes {
    display:           flex;
    flex-direction:    row;
    flex-wrap:         nowrap;
    align-items:       center;
    overflow-x:        auto;
    overflow-y:        hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:   none;        /* Firefox */
    scroll-snap-type:  x proximity;
    scroll-padding-left: 12px;
    gap:               8px;
    padding:           10px 16px;
    transition:        max-height .3s ease, opacity .3s ease, padding .3s ease;
    max-height:        500px;

    /* Fading edges em ambos os lados — pista visual de scroll */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 28px,
        #000 calc(100% - 28px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 28px,
        #000 calc(100% - 28px),
        transparent 100%
    );
}
#srp-admin-acoes::-webkit-scrollbar { display: none; } /* WebKit/Blink */

/* Quando scroll está no extremo esquerdo, fade só na direita */
#srp-admin-acoes.at-start {
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 28px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 28px),
        transparent 100%
    );
}
/* Quando scroll está no extremo direito, fade só na esquerda */
#srp-admin-acoes.at-end {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 28px,
        #000 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 28px,
        #000 100%
    );
}
/* Sem overflow (todos botões cabem) — sem fading */
#srp-admin-acoes.no-overflow {
    -webkit-mask-image: none;
    mask-image: none;
}

#srp-admin-acoes.recolhido {
    max-height:     0;
    padding-top:    0;
    padding-bottom: 0;
    opacity:        0;
    pointer-events: none;
}

/* Grupos somem visualmente — botões fluem direto no flex pai.
   `display: contents` faz o container desaparecer da árvore
   de layout mas mantém os filhos acessíveis. */
.srp-admin-grupo {
    display: contents;
}

/* Divisor vertical entre grupos */
.srp-admin-divisor {
    display:      inline-block;
    width:        1px;
    height:       28px;
    background:   rgba(255,255,255,.25);
    flex-shrink:  0;
    margin:       0 4px;
    align-self:   center;
}

/* Cada botão preserva sua largura natural e nunca quebra.
   scroll-snap-align garante que ao parar de deslizar, o botão
   mais próximo se alinha à borda esquerda do container. */
#srp-admin-acoes button,
#srp-admin-acoes a.srp-btn-secondary {
    flex-shrink:       0;
    scroll-snap-align: start;
    white-space:       nowrap;
}

/* 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:        var(--srp-verde-escuro, #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; }

    /* v12.10 — Título "PAINEL ADMINISTRATIVO" bem menor, libera espaço vertical */
    #srp-admin-titulo-row  { padding: 5px 12px; gap: 6px; }
    #srp-admin-titulo-label { font-size: 10px; letter-spacing: .5px; }
    #btn-toggle-admin-menu { width: 22px; height: 22px; font-size: 12px; }

    /* v48/v91 — Ajustes específicos de mobile: padding compacto e
       reduzir o tamanho dos botões pra caber mais conteúdo no swipe.
       O comportamento de swipe horizontal foi promovido pra base
       CSS na v91 e funciona em qualquer largura. */
    #srp-admin-acoes {
        padding:           10px 4px 10px 12px;
    }

    #srp-admin-acoes.recolhido {
        display: flex;  /* mantém flex pra transição suave */
    }

    /* v48 — "+ Novo Pin" volta ao fluxo natural; já não precisa
       ocupar linha inteira porque o layout não é mais grid. */
    #btn-novo-pin {
        grid-column: auto;
    }
}



/* Botão editar limites em modo ativo */
#btn-editar-limites.editando {
    background:  var(--srp-amarelo) !important;
    color:       var(--srp-verde-escuro, #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:    0;
    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 {
    /* v39 FIX — Centralização perfeita, sem scroll residual, sem backdrop.
       Usa position:fixed + inset:0 (cobre viewport sem 100vw que causa scroll).
       Flex centraliza automaticamente. Background transparent para não obscurecer
       o mapa. Todas as modais (usuários, comentários, etc) herdam isso. */
    display:         none;
    align-items:     center;
    justify-content: center;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      transparent;
    pointer-events:  auto;
    padding:         16px;
    box-sizing:      border-box;
}
/* Ao abrir via JS (.addClass('aberto')), torna visível */
.srp-modal.aberto {
    display:        flex;
}

.srp-modal-box {
    /* v37 FIX — Caixa branca centralizada PURA via flex do pai.
       Não usa position fixed/absolute, sem transform de centralização,
       sem margins. O flex do pai (.srp-modal) já faz alinhamento perfeito. */
    background:     var(--srp-branco);
    border-radius:  var(--srp-radius);
    box-shadow:     0 24px 60px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.18);
    padding:        30px 28px 24px;
    width:          min(380px, 94vw);
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    /* v41 FIX — Altura máxima 80vh + scroll customizado interno.
       Antes: max-height calc(100vh - 32px) com overflow corta conteúdo
       em monitores pequenos. Agora: 80vh garante margem para respiração
       e dispara scroll interno quando conteúdo excede. */
    max-height:     80vh;
    overflow-y:     auto;
    overflow-x:     hidden;
    /* Caixa recebe cliques normalmente */
    pointer-events: auto;
    /* Margem zero garantida (sem herança parasita do tema WP) */
    margin:         0;
    /* v41 — Scrollbar fina compatível com Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--srp-verde, #2e7d32) #f0ede5;
}

/* ═══════════════════════════════════════════════════════════════
   v41 — Scrollbar customizada (Chromium/Safari/Edge)
   ───────────────────────────────────────────────────────────────
   Estiliza ::-webkit-scrollbar nos modais e em qualquer container
   .agbz-scroll-custom usando a paleta oficial do SRP (marrom/verde).
   Track suave em creme, thumb em verde-escuro com hover acentuado.
═══════════════════════════════════════════════════════════════ */
.srp-modal-box::-webkit-scrollbar,
.agbz-scroll-custom::-webkit-scrollbar {
    width:  10px;
    height: 10px;
}
.srp-modal-box::-webkit-scrollbar-track,
.agbz-scroll-custom::-webkit-scrollbar-track {
    background: #f5f1e8;
    border-radius: 8px;
    margin: 4px 0;
}
.srp-modal-box::-webkit-scrollbar-thumb,
.agbz-scroll-custom::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--srp-verde, #2e7d32), var(--srp-verde-escuro, #1b5e20));
    border-radius: 8px;
    border: 2px solid #f5f1e8;
    min-height: 32px;
}
.srp-modal-box::-webkit-scrollbar-thumb:hover,
.agbz-scroll-custom::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7E6342, #5C4A2F);  /* marrom institucional */
    border-color: #ede5d3;
}
.srp-modal-box::-webkit-scrollbar-corner,
.agbz-scroll-custom::-webkit-scrollbar-corner {
    background: transparent;
}

.srp-modal-large { width: min(620px, 96vw); }

/* ═══════════════════════════════════════════════════════════════
   v40 FIX FINAL — Modais Usuários + Moderação: CONTAINER REMOVIDO
   ───────────────────────────────────────────────────────────────
   NOVO DESIGN: Os modais de usuários e moderação agora usam um padrão
   direto SEM container wrapper (.srp-modal). A centralização é feita
   diretamente na .srp-modal-box com position:fixed inset:0 + flex no body.

   Benefícios:
   • Centralização GARANTIDA horizontalmente e verticalmente
   • Sem herança de propriedades conflitantes do container
   • Cliques fora passam para o mapa (pointer-events: none no overlay)
   • Responsivo 100% em qualquer tamanho de tela
═══════════════════════════════════════════════════════════════ */
#modal-usuarios-srp.srp-modal,
#modal-moderacao-srp.srp-modal {
    /* Remover o container completo — usar display:none */
    display: none !important;
}

/* Centralização direta SEM container wrapper */
#modal-usuarios-srp,
#modal-moderacao-srp {
    position:       fixed !important;
    inset:          0 !important;
    display:        none !important;
    align-items:    center !important;
    justify-content: center !important;
    z-index:        99999 !important;
    padding:        16px !important;
    box-sizing:     border-box !important;
    background:     transparent !important;
    pointer-events: none !important;
}

#modal-usuarios-srp.aberto,
#modal-moderacao-srp.aberto {
    display: flex !important;
}

#modal-usuarios-srp .srp-modal-box,
#modal-moderacao-srp .srp-modal-box {
    /* Caixa branca recebe cliques normalmente */
    pointer-events: auto !important;
    /* Reset defensivo contra heranças parasitas de tema */
    position:       relative !important;
    top:            auto !important;
    left:           auto !important;
    right:          auto !important;
    bottom:         auto !important;
    transform:      none !important;
    margin:         0 !important;
    /* Sombra forte compensa ausência do backdrop, destacando do mapa */
    box-shadow:     0 24px 60px rgba(0, 0, 0, 0.35),
                    0 4px 16px rgba(0, 0, 0, 0.18) !important;
    border:         1px solid rgba(0, 0, 0, 0.08);
}

.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); }

/* ════════════════════════════════════════════════════════════════
   v214 — LOGIN MODAL REDESIGN
   ─────────────────────────────────────────────────────────────────
   Objetivos:
   1. Logo significativamente MAIOR em desktop E mobile.
   2. Em mobile (< 720px): empilhamento estrito em coluna única
      (logo BIG no topo → título centrado → subtítulo centrado →
       formulário em uma única coluna), sem zoom horizontal.
   3. Sem conflitos com o tema ativo do WordPress (escopo absoluto
      via .srp-login-v214 quando necessário).
   4. Espaçamento generoso, hierarquia clara.
══════════════════════════════════════════════════════════════════ */

.srp-login-box {
    padding:        0 !important;
    gap:            0 !important;
    flex-direction: row !important;
    width:          min(580px, 94vw) !important;
    min-height:     340px;
    overflow:       hidden;
    border-radius:  var(--srp-radius) !important;
    background:     #fff;
}

/* ── Painel verde de identidade (desktop: esquerda fixa) ───── */
.srp-login-side {
    background:     var(--srp-verde-escuro, #1b5e20);
    width:          220px;
    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:            14px;
    padding:        32px 18px;
    position:       relative;
    z-index:        1;
    text-align:     center;
    width:          100%;
}

/* ── Logo — significativamente maior em todas as resoluções ── */
.srp-login-logo {
    height:         96px;       /* +85% vs. 52px antigo */
    width:          auto;
    max-width:      90%;
    display:        block;
    margin:         0 auto;
    object-fit:     contain;
    /* Anti-blur em telas Retina */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform:      translateZ(0);
    filter:         drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

.srp-login-side-text {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    margin-top:     4px;
}
.srp-login-side-titulo {
    font-size:      15px;
    font-weight:    700;
    color:          #fff;
    letter-spacing: .03em;
    text-align:     center;
    line-height:    1.2;
}
.srp-login-side-sub {
    font-size:      11px;
    color:          #a5d6a7;
    text-align:     center;
    line-height:    1.4;
    max-width:      180px;
}
.srp-login-side-deco {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    pointer-events: none;
}

/* ── Painel do formulário (desktop: direita) ──────────────── */
.srp-login-form {
    flex:           1;
    padding:        32px 28px 26px;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    justify-content: center;
    min-width:      0;        /* evita overflow do flex child */
}
.srp-login-titulo {
    font-size:      18px;
    font-weight:    700;
    color:          var(--srp-verde-escuro);
    margin:         0;
    line-height:    1.2;
}
.srp-login-hint {
    font-size:      13px;
    color:          var(--srp-cinza);
    margin:         0;
    line-height:    1.45;
}
.srp-login-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.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:           11px;
    color:          #888;
    pointer-events: none;
    flex-shrink:    0;
}
.srp-login-input {
    width:          100%;
    padding:        11px 12px 11px 36px !important;
    border:         1.5px solid #ddd !important;
    border-radius:  8px !important;
    /* font-size 16px ou maior evita auto-zoom do iOS Safari ao focar */
    font-size:      16px !important;
    box-sizing:     border-box;
    transition:     border-color .18s, background .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:            8px;
    background:     var(--srp-verde-escuro, #1b5e20);
    color:          #fff;
    border:         none;
    border-radius:  8px;
    padding:        13px 16px;
    font-size:      15px;
    font-weight:    700;
    cursor:         pointer;
    transition:     background .18s, transform .1s;
    letter-spacing: .02em;
    margin-top:     2px;
    width:          100%;
}
.srp-login-btn:hover  { background: var(--srp-verde, #2e7d32); }
.srp-login-btn:active { transform: scale(.98); }

/* ════════════════════════════════════════════════════════════════
   MOBILE (≤ 720px) — empilhamento vertical estrito
   ───────────────────────────────────────────────────────────────
   Cobertura: maioria dos smartphones em retrato (até iPhone Pro Max
   landscape pequeno). Garante:
   - Logo grande no TOPO
   - Título e subtítulo CENTRADOS abaixo
   - Formulário em coluna única empilhada
   - Sem rolagem horizontal, sem zoom
══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .srp-login-box {
        flex-direction: column !important;
        width:          min(440px, 96vw) !important;
        min-height:     auto;
    }
    .srp-login-side {
        width:          100% !important;
        min-height:     auto;
        padding:        24px 16px 20px;
    }
    .srp-login-side-inner {
        flex-direction: column;     /* mantém empilhamento vertical */
        padding:        4px 8px;
        gap:            14px;
    }
    .srp-login-logo {
        height:         132px;      /* significativo destaque visual */
        max-width:      80%;
    }
    .srp-login-side-titulo {
        font-size:      19px;
        letter-spacing: .04em;
    }
    .srp-login-side-sub {
        font-size:      12.5px;
        max-width:      280px;
    }
    .srp-login-side-deco { display: none; }

    .srp-login-form {
        padding:        22px 20px 24px;
        gap:            14px;
    }
    .srp-login-titulo { font-size: 17px; }
    .srp-login-hint   { font-size: 13px; }
    .srp-login-input  { padding: 13px 12px 13px 38px !important; }
    .srp-login-btn    { padding: 14px 16px; font-size: 15.5px; }
    .srp-modal-close  {
        top:   10px;
        right: 12px;
        background: rgba(255,255,255,.15);
        color: #fff;
        border-radius: 50%;
        width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
    }
}

/* Telas muito pequenas (≤ 380px, iPhone SE etc) — afina mais ainda */
@media (max-width: 380px) {
    .srp-login-side    { padding: 18px 12px 16px; }
    .srp-login-logo    { height: 112px; }
    .srp-login-side-titulo { font-size: 17px; }
    .srp-login-form    { padding: 20px 16px; }
    
    /* v40 — Modais responsivos em telas pequenas */
    #modal-usuarios-srp,
    #modal-moderacao-srp {
        padding: 12px !important;
    }
    
    #modal-usuarios-srp .srp-modal-box,
    #modal-moderacao-srp .srp-modal-box {
        width: min(calc(100vw - 24px), 95vw) !important;
        max-height: calc(100vh - 24px) !important;
    }
}

/* v40 — Responsividade aprimorada para tablets e tablets pequeninhos */
@media (max-width: 600px) {
    #modal-usuarios-srp .srp-modal-box,
    #modal-moderacao-srp .srp-modal-box {
        width: min(calc(100vw - 32px), 92vw) !important;
        max-height: calc(100vh - 64px) !important;
        padding: 24px 16px !important;
    }
    
    #modal-usuarios-srp .srp-modal-box h3,
    #modal-moderacao-srp .srp-modal-box h3 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .srp-usr-tabela,
    .srp-moderacao-tabela {
        font-size: 12px !important;
    }
    
    .srp-usr-tabela th,
    .srp-moderacao-tabela th {
        padding: 6px 8px !important;
    }
    
    .srp-usr-tabela td,
    .srp-moderacao-tabela td {
        padding: 6px 8px !important;
    }
}

.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: var(--srp-verde-escuro, #1b5e20) !important;
    color: #fff !important;
    border-color: var(--srp-verde-escuro, #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;
}

/* ═══════════════════════════════════════════════════════════════
   v37 — Bloco de Índice Pluviométrico
   ───────────────────────────────────────────────────────────────
   Card compacto com ícone (gota) à esquerda e label + valor à
   direita. Cores herdadas do White Label via --srp-verde-escuro.
   Tipografia: Open Sans (já carregado pelo plugin).
═══════════════════════════════════════════════════════════════ */
.srp-popup-pluvio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #E3F2FD 0%, #F5FAFE 100%);
    border-left: 3px solid #1976D2;
    border-radius: 0 6px 6px 0;
    color: #0D47A1;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}
.srp-popup-pluvio-icon {
    flex-shrink: 0;
    color: #1976D2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srp-popup-pluvio-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1;
}
.srp-popup-pluvio-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #1976D2;
    opacity: 0.9;
}
.srp-popup-pluvio-val {
    font-size: 16px;
    font-weight: 700;
    color: #0D47A1;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.srp-popup-pluvio-val small {
    font-size: 11px;
    font-weight: 500;
    color: #1565C0;
    margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   v37 — Bloco "Destaques da Propriedade" (curiosidades)
   ───────────────────────────────────────────────────────────────
   Card de texto livre com ícone lightbulb. Suporta múltiplas
   linhas (via <br> inserido pelo JS). Cor de destaque dourada
   (#FFD166) coordenada com o resto do ecossistema AgriBusiness
   sem competir com o verde institucional do SRP.
═══════════════════════════════════════════════════════════════ */
.srp-popup-curios {
    margin: 10px 0 4px;
    padding: 8px 12px 10px;
    background: linear-gradient(135deg, #FFF8E1 0%, #FFFDF5 100%);
    border-left: 3px solid #F9A825;
    border-radius: 0 6px 6px 0;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}
.srp-popup-curios-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #F57C00;
    margin-bottom: 4px;
}
.srp-popup-curios-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srp-popup-curios-titulo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #E65100;
}
.srp-popup-curios-corpo {
    font-size: 12.5px;
    line-height: 1.5;
    color: #5C3A00;
}

/* ─── Bottom Sheet mobile (≤ 600px) ─────────────────────────────
   Em mobile, o popup vira "bottom sheet" e ocupa mais espaço
   horizontal. Os dois novos blocos ganham padding ligeiramente
   maior e fontes mais legíveis no toque.
─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .srp-popup-pluvio { padding: 10px 14px; }
    .srp-popup-pluvio-val { font-size: 17px; }
    .srp-popup-curios { padding: 10px 14px 12px; }
    .srp-popup-curios-corpo { font-size: 13px; line-height: 1.55; }
}

/* ═══════════════════════════════════════════════════════════════
   v44 — Extensões do bloco pluviométrico (histórico v214)
   ───────────────────────────────────────────────────────────────
   Quando o pin tem medições na tabela mapa_pinda_pluvio, exibimos
   as 3 mais recentes como mini-cards horizontais sob o destaque
   anual. Cada mini-card tem data DD/MM/AA + volume em mm.
═══════════════════════════════════════════════════════════════ */
.srp-popup-pluvio {
    /* Override: agora o bloco é em coluna (head + histórico) */
    flex-direction: column;
    align-items: stretch;
}
.srp-popup-pluvio-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.srp-popup-pluvio-sub {
    font-size: 10px;
    color: #1976D2;
    opacity: 0.75;
    margin-top: 2px;
    font-style: italic;
    letter-spacing: 0.02em;
}
.srp-popup-pluvio-historico {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(25, 118, 210, 0.25);
    flex-wrap: wrap;
}
.srp-popup-pluvio-mini {
    flex: 1 1 auto;
    min-width: 60px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(25, 118, 210, 0.18);
    border-radius: 5px;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-variant-numeric: tabular-nums;
}
.srp-popup-pluvio-mini-data {
    font-size: 9.5px;
    color: #1565C0;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.srp-popup-pluvio-mini-vol {
    font-size: 12px;
    font-weight: 700;
    color: #0D47A1;
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   v44 — Curiosidades multi-item (lista v214 + texto legado)
   ───────────────────────────────────────────────────────────────
   Cada curiosidade da tabela vira um card numerado #1, #2, #3...
   com título e conteúdo. O bloco legado (campo único do admin_prop)
   aparece como bloco neutro abaixo, sem badge.
═══════════════════════════════════════════════════════════════ */
.srp-popup-curios-item {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(249, 168, 37, 0.3);
}
.srp-popup-curios-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.srp-popup-curios-item:first-child {
    padding-top: 4px;
}
.srp-popup-curios-item-titulo {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: #E65100;
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.srp-popup-curios-item-num {
    flex-shrink: 0;
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #F9A825;
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    transform: translateY(-1px);
}
.srp-popup-curios-item-corpo {
    font-size: 12.5px;
    line-height: 1.5;
    color: #5C3A00;
}
.srp-popup-curios-legado {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(249, 168, 37, 0.3);
    font-size: 12.5px;
    line-height: 1.5;
    color: #5C3A00;
}
.srp-popup-curios-corpo > .srp-popup-curios-item:first-child {
    padding-top: 0;
}

@media (max-width: 600px) {
    .srp-popup-pluvio-mini { padding: 5px 9px; }
    .srp-popup-pluvio-mini-vol { font-size: 13px; }
    .srp-popup-curios-item-titulo { font-size: 13.5px; }
    .srp-popup-curios-item-corpo,
    .srp-popup-curios-legado { font-size: 13px; line-height: 1.55; }
}

/* ── 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: var(--srp-verde-escuro, #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: var(--srp-verde-escuro, #1b5e20); border: 2px solid var(--srp-verde, #2e7d32); }
.srp-ctabtn-wpp  { background: #25d366; color: #fff;    border: 2px solid #128c7e; }
.srp-ctabtn-gmaps{ background: #fff;    color: var(--srp-verde-escuro, #1b5e20); border: 2px solid var(--srp-verde, #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); }
/* v172 — Botões de redes sociais no popup (compactos, dividem a linha) */
.srp-ctabtn-social { background: #fff; color: var(--srp-verde-escuro); border: 2px solid var(--srp-verde); flex: 1 1 0; min-width: 0; }
.srp-ctabtn-social svg { width: 14px; height: 14px; flex-shrink: 0; }
.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; }
/* Botão de dados administrativos — visual proeminente no popup */
.srp-btn-adm-prop {
    width: 100%;
    padding: 9px 14px;
    margin-top: 2px;
    background: linear-gradient(135deg, var(--srp-verde-escuro, #1b5e20), var(--srp-verde, #2e7d32));
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background .15s, transform .1s;
    box-shadow: 0 2px 8px rgba(27,94,32,.25);
    letter-spacing: .02em;
}
.srp-btn-adm-prop:hover { background: linear-gradient(135deg, #143d17, var(--srp-verde-escuro, #1b5e20)); transform: translateY(-1px); }
.srp-btn-adm-prop:active { transform: translateY(0); }

/* v180 — Botão "Gerar Placa" (fusão do srp-gerador-placas): âncora par
   de Editar/Excluir, em OURO SRP (identidade do gerador de artes). É
   <a>, não <button>, então o seletor `.srp-popup-admin-actions button`
   acima não a alcança — replica flex:1 + paddings dos irmãos, sem
   alterar o layout flex do container existente. */
.srp-btn-gerar-placa {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    background: var(--srp-ouro, #c8a84b);
    color: #fff !important;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: filter .15s;
}
.srp-btn-gerar-placa:hover { filter: brightness(.92); 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;
}

/* ── Select de Atividade Agropecuária (substitui o color picker livre do pin) ── */
.srp-select-atividade {
    padding:       8px 10px;
    border:        1.5px solid #ddd;
    border-radius: 6px;
    font-size:     14px;
    font-family:   inherit;
    background:    #fff;
    cursor:        pointer;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color var(--srp-trans);
}
.srp-select-atividade:focus { outline: none; border-color: var(--srp-verde); }

.srp-color-preview {
    width:         22px;
    height:        22px;
    border-radius: 50%;
    border:        1.5px solid rgba(0,0,0,.18);
    flex-shrink:   0;
    box-shadow:    inset 0 0 0 2px rgba(255,255,255,.55);
}

/* ── 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:         var(--srp-verde-escuro, #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:        var(--srp-verde-escuro, #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: var(--srp-verde-escuro, #1b5e20); border-color: var(--srp-amarelo); }

/* ═══════════════════════════════════════════════════════════════
   v12.12 — Tooltip de identificação do pin (hover/touch)
═══════════════════════════════════════════════════════════════ */
.leaflet-tooltip.srp-pin-tooltip {
    background:      rgba(27, 49, 28, .94);
    color:           #fff;
    border:          1px solid rgba(255, 255, 255, .12);
    border-radius:   8px;
    padding:         7px 11px;
    font-family:     'DM Sans', system-ui, sans-serif;
    font-size:       12px;
    line-height:     1.35;
    box-shadow:      0 6px 18px rgba(0, 0, 0, .35);
    pointer-events:  none;
    backdrop-filter: blur(4px);
    max-width:       240px;
    white-space:     normal;
}
.leaflet-tooltip.srp-pin-tooltip strong {
    color:         #FFD166;
    font-size:     13px;
    font-weight:   700;
    display:       block;
    margin-bottom: 2px;
}
.leaflet-tooltip.srp-pin-tooltip .srp-pin-tt-resp {
    color: rgba(255,255,255,.85);
}
.leaflet-tooltip.srp-pin-tooltip .srp-pin-tt-ativ {
    display:        inline-block;
    margin-top:     3px;
    font-size:      10.5px;
    padding:        1px 7px;
    background:     rgba(255, 209, 102, .18);
    color:          #FFD166;
    border-radius:  999px;
    letter-spacing: .2px;
}
/* Seta do tooltip combinando com o fundo escuro */
.leaflet-tooltip.srp-pin-tooltip.leaflet-tooltip-top::before {
    border-top-color: rgba(27, 49, 28, .94);
}
.leaflet-tooltip.srp-pin-tooltip.leaflet-tooltip-bottom::before {
    border-bottom-color: rgba(27, 49, 28, .94);
}

/* Em mobile o tooltip aparece após tap longo; texto um pouco menor */
@media (max-width: 600px) {
    .leaflet-tooltip.srp-pin-tooltip { font-size: 11.5px; padding: 6px 9px; max-width: 200px; }
    .leaflet-tooltip.srp-pin-tooltip strong { font-size: 12.5px; }
}

/* 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;
    /* Indica que é arrastável — touch-action: none impede o scroll
       da página durante o arrasto em dispositivos móveis. */
    cursor:          move;
    touch-action:    none;
    user-select:     none;
    -webkit-user-select: none;
}
.srp-medicao-header::before {
    /* Ícone-aludindo-a-grip discreto à esquerda do título */
    content:         '⋮⋮';
    display:         inline-block;
    margin-right:    8px;
    opacity:         .55;
    font-weight:     900;
    letter-spacing:  -2px;
    line-height:     1;
}
/* Estado durante o arrasto: borda destacada + cursor "grabbing" */
#painel-medicao-srp.srp-painel-arrastando {
    box-shadow:      0 6px 28px rgba(0,0,0,.28);
    transition:      none !important; /* desativa a transition de width durante drag */
}
#painel-medicao-srp.srp-painel-arrastando .srp-medicao-header {
    cursor:          grabbing;
}
.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:             4px;
    background:      rgba(255, 255, 255, 0.96);
    border:          1px solid rgba(0,0,0,.12);
    border-radius:   40px; /* pílula */
    padding:         5px 6px;
    box-shadow:      0 3px 16px rgba(0,0,0,.2);
    backdrop-filter: blur(8px);
    pointer-events:  all;
}

.srp-bm-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          1.5px solid transparent;
    border-radius:   30px;
    padding:         6px 8px;
    cursor:          pointer;
    transition:      background .16s, border-color .16s, transform .1s, box-shadow .16s;
    color:           #556;
    position:        relative;
}

.srp-bm-btn:hover {
    background:  #eef2f7;
    color:       #2e4a6a;
    transform:   translateY(-1px);
}

.srp-bm-btn.ativo {
    background:   var(--srp-verde-escuro, #1b5e20);
    border-color: transparent;
    box-shadow:   0 2px 8px rgba(27,94,32,.4);
    color:        #fff;
    transform:    none;
}

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

.srp-bm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Tooltip nativo via title — sem label visível */
.srp-bm-label { display: none; }

@media (max-width: 600px) {
    #srp-basemap-selector {
        bottom:  40px;
        padding: 4px 5px;
        gap:     3px;
    }
    .srp-bm-btn { padding: 5px 7px; }
    .srp-bm-icon svg { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   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 var(--srp-verde-escuro, #1b5e20);
    background:    linear-gradient(135deg, var(--srp-verde, #2e7d32), var(--srp-verde-escuro, #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,var(--srp-verde-escuro, #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: var(--srp-verde, #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:          46px;
    height:         46px;
    cursor:         pointer;
    border-radius:  50%;
    background:     transparent;
    border:         none;
    padding:        0;
    outline:        none;
    filter:         drop-shadow(0 2px 5px rgba(0,0,0,.22));
    transition:     filter .18s, transform .18s;
}
.srp-bussola:hover {
    filter:    drop-shadow(0 3px 10px rgba(0,0,0,.32));
    transform: scale(1.1);
}
.srp-bussola:focus-visible {
    outline: 2px solid var(--srp-verde, #2e7d32);
    outline-offset: 2px;
}
.srp-bussola-svg    { display: block; width: 100%; height: 100%; }
.srp-bussola-agulha { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

@media (max-width: 480px) {
    .srp-bussola { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   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 var(--srp-verde-escuro, #1b5e20);
    border-radius: 7px;
    background:    linear-gradient(135deg, var(--srp-verde, #2e7d32), var(--srp-verde-escuro, #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, var(--srp-verde-escuro, #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
═══════════════════════════════════════════════════════════════ */

/* v37 FIX FINAL — Cabeçalho nunca se oculta em NENHUMA viewport.
   Antes essa regra protegia apenas desktop (>=769px). Agora é global,
   atendendo solicitação do SRP: o cabeçalho permanece visível
   independente do tamanho da tela ou da interação com o mapa. */
#mapa-pinda-header.srp-header-oculto {
    max-height:     none !important;
    padding-top:    inherit !important;
    padding-bottom: inherit !important;
    opacity:        1 !important;
    pointer-events: auto !important;
    visibility:     visible !important;
}
/* v47 — Regra #btn-restaurar-header { display: none !important } REMOVIDA
   junto com o próprio botão. */
#painel-admin-srp.srp-header-oculto {
    max-height:     none !important;
    opacity:        1 !important;
    pointer-events: auto !important;
    visibility:     visible !important;
}
@media (min-width: 769px) {
    /* Mantido por compatibilidade — mesmas regras valem em desktop */
    #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;
    }
}

/* 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;
        max-height: none !important;
        overflow-y: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* v47 — Regra mobile de #btn-restaurar-header REMOVIDA junto com o
       próprio botão. */
}

/* v40 — Responsividade aprimorada: Garantir visibilidade em TODOS os tamanhos */
@media (max-width: 480px) {
    /* v57 — Bug crítico de segurança/UX corrigido:
       O v40 originalmente forçava `display: block !important` +
       `visibility: visible !important` neste seletor, o que
       sobrescrevia a inline `style="display:none"` do template
       (mapa-template.php linha 304) e EXPUNHA o painel admin
       inteiro pra visitantes públicos não autenticados em qualquer
       iPhone (viewport ≤480px). Bug existia silenciosamente desde
       v40 e ficou visualmente óbvio no v55 quando o swipe começou
       a funcionar de verdade.

       FIX: removidas as duas declarações que forçavam visibilidade.
       Preservadas as outras (max-height + overflow) que SÃO úteis
       quando o painel for legitimamente exibido após login —
       garantem que o conteúdo não fica clipado pelo viewport. */
    #painel-admin-srp {
        max-height: none !important;
        overflow: visible !important;
        /* display: block !important; — REMOVIDO no v57 */
        /* visibility: visible !important; — REMOVIDO no v57 */
    }

    /* v93 — REMOVIDO bloco que forçava flex-direction:column no
       #srp-admin-acoes e .srp-admin-grupo em telas ≤480px.
       Esse era resíduo do layout vertical antigo (pré-v48) que
       sobrescrevia o swipe horizontal universal implementado na
       v91. Sintoma: no iPhone em portrait os botões empilhavam
       verticalmente em vez de ficarem em uma linha rolável.
       O CSS base (linha ~605) já garante flex-direction: row e
       overflow-x: auto pra qualquer largura — não precisa de
       override mobile. */

    /* v102 — Garantir que TODOS os 14 elementos da toolbar admin sejam
       sempre clicáveis e visíveis no mobile pequeno (≤480px). O seletor
       da v40 (`#painel-admin-srp button`) só cobria 12 dos 14 — os dois
       anchors (#btn-alianca-cadastros, #btn-reservas-anuncio) ficavam de
       fora do override e podiam ser colapsados por regras `a { display:
       inline }` de temas WordPress responsivos. Sintoma: Cadastros e
       Reservas sumiam no celular mas voltavam em "Request Desktop Site". */
    #painel-admin-srp button,
    #painel-admin-srp a.srp-btn-secondary {
        pointer-events: auto !important;
        opacity:        1 !important;
        visibility:     visible !important;
    }

    /* v102 — Anchors da toolbar admin: força inline-flex no mobile pra
       impedir colapso de largura por overrides de tema. */
    #painel-admin-srp a.srp-btn-secondary {
        display:         inline-flex !important;
        align-items:     center !important;
        gap:             6px !important;
        text-decoration: none !important;
    }
}

/* v69 — AUDITORIA: 5 linhas de declarações órfãs removidas neste ponto
   do arquivo. Eram resíduo de um seletor deletado em versão anterior
   (transform/font-size/padding soltos sem regra-pai), gerando 2 chaves
   `}` extras no balanço do arquivo. Browsers toleravam silenciosamente,
   mas a auditoria manual fica mais clara sem código morto. */

/* ═══════════════════════════════════════════════════════════════
   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: var(--srp-verde, #2e7d32); }
.srp-backup-tab.ativo  {
    color:        var(--srp-verde, #2e7d32);
    border-bottom-color: var(--srp-verde, #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) — v12
═══════════════════════════════════════════════════════════════ */
.srp-bussola {
    width:           46px;
    height:          46px;
    cursor:          pointer;
    user-select:     none;
    border-radius:   50%;
    filter:          drop-shadow(0 2px 5px rgba(0,0,0,.22));
    transition:      transform .18s, filter .18s;
}
.srp-bussola:hover {
    transform:  scale(1.1);
    filter:     drop-shadow(0 3px 10px rgba(0,0,0,.32));
}
.srp-bussola-svg {
    display: block;
    width:   100%;
    height:  100%;
}
/* transform-origin atualizado para o novo viewBox 48x48 */
.srp-bussola-agulha {
    transform-origin: 24px 24px;
    transition:       transform .4s cubic-bezier(.34,1.56,.64,1);
}

/* 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: 40px; height: 40px; }
}
@media (max-width: 375px) {
    .srp-bussola { width: 36px; height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   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: var(--srp-verde-escuro, #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: var(--srp-verde-escuro, #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: var(--srp-verde, #2e7d32); color: var(--srp-verde-escuro, #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
═══════════════════════════════════════════════════════════════ */
#srp-basemap-selector {
    gap: 4px;
}
/* icon-only — sem min-width forçado */

/* 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: var(--srp-verde, #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;
    /* v119 — Largura aumentada de 480→560px + min 280px pra evitar
       que palavras compostas (nomes próprios, atividades) quebrem
       letra-por-letra no mobile. */
    max-width: min(560px, calc(100vw - 24px)) !important;
    min-width: min(280px, 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;
}

/* ── v6 — Usuários (feedback de ok/erro no modal) ────────── */
.srp-alert-ok   { background:#e8f5e9; border-color:#a5d6a7; color:var(--srp-verde-escuro, #1b5e20); }
.srp-alert-erro { background:#ffebee; border-color:#ef9a9a; color:#b71c1c; }

/* ── v7 — Destaque de pin na pesquisa ──────────────────── */
@keyframes srpPinDestaque {
    0%,100% { transform: scale(1); filter: brightness(1); }
    25%      { transform: scale(1.4); filter: brightness(1.4); }
    50%      { transform: scale(1.1); filter: brightness(1.2); }
    75%      { transform: scale(1.3); filter: brightness(1.3); }
}
.srp-pin-destaque svg,
.srp-pin-destaque .srp-pin-icone {
    animation: srpPinDestaque 0.5s ease 3;
}

/* ────────────────────────────────────────────────────────────────────
   Salvaguarda: previne overflow horizontal em QUALQUER breakpoint.
   Se algum filho tentar transbordar (texto longo, URL gigante), o
   popup garante quebra suave em vez de gerar scrollbar horizontal.
──────────────────────────────────────────────────────────────────── */
.agbz-popup-card,
.agbz-popup-row-full {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.agbz-popup-card a,
.agbz-popup-card .srp-ctabtn span {
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   v47 — BOTTOM NAV + DRAWER REMOVIDOS
   ───────────────────────────────────────────────────────────────────────
   Todo o bloco de CSS do v45 ("BOTTOM NAVIGATION BAR (mobile-only) +
   PAINEL DRAWER" + "DRAWER do PAINEL ADMINISTRATIVO") foi removido,
   incluindo a regra mobile que escondia o #painel-admin-srp via
   `display: none !important`. O painel admin tradicional agora volta a
   ser visível no breakpoint <1024px (com os estilos mobile já existentes
   nas seções "v40 — Responsividade aprimorada" e nas regras anteriores
   #painel-admin-srp em @media (max-width: 768px) / 480px / 400px), de
   modo que usuários logados continuem com acesso ao painel
   administrativo no celular.

   Classes removidas (não devem ser referenciadas em nenhum lugar):
     .agbz-bottom-nav, .agbz-nav-btn, .agbz-nav-btn-ativo, .agbz-nav-icon,
     .agbz-nav-label, .agbz-nav-btn-mais, .agbz-painel-drawer,
     .agbz-painel-drawer.aberto, .agbz-painel-drawer-handle,
     .agbz-painel-drawer-header, .agbz-painel-drawer-titulo,
     .agbz-painel-drawer-fechar, .agbz-painel-drawer-body,
     .agbz-painel-drawer-backdrop, #agbz-bottom-nav, #agbz-nav-painel,
     #agbz-painel-drawer, #agbz-painel-drawer-backdrop,
     #agbz-painel-drawer-body, #agbz-painel-drawer-fechar.
═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   v50 — EDITOR FRONTEND DE COTAÇÕES (TICKER COMMODITIES)
   ───────────────────────────────────────────────────────────────────────
   Modal admin-only acionado pelo botão #btn-cotacoes-srp no painel
   administrativo do mapa. Usa namespace .srp-cot- (não .srp-ap-) para
   evitar colisão com o modal de dados administrativos de pin.

   Layout:
     ┌──────────────────────────────────────────────────────┐
     │ Topbar: ícone + título + sub + botão fechar          │
     │ Feedback (sucesso/erro)                              │
     │ Toolbar: + Nova / 📁 Importar / 💾 Exportar  | count │
     │ Body (scroll): lista de .srp-cot-linha               │
     │ Rodapé: meta info  | Cancelar | 💾 Salvar tudo       │
     └──────────────────────────────────────────────────────┘
═══════════════════════════════════════════════════════════════════════ */

.srp-cot-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 30, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    font-family: var(--agbz-font-sans, 'Montserrat'), sans-serif;
}

.srp-cot-shell {
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.srp-cot-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    color: #fff;
    flex-shrink: 0;
}
.srp-cot-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.srp-cot-topbar-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.srp-cot-topbar-titulo {
    font-family: var(--agbz-font-brand, 'Archivo Black'), sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.srp-cot-topbar-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, .82);
    margin-top: 2px;
}
.srp-cot-topbar-close {
    background: rgba(255, 255, 255, .14);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease;
    flex-shrink: 0;
}
.srp-cot-topbar-close:hover { background: rgba(255, 255, 255, .25); }

/* ── Feedback bar ───────────────────────────────────────────────── */
.srp-cot-feedback {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.srp-cot-feedback-ok   { background: #e8f5e9; color: #1b5e20; }
.srp-cot-feedback-erro { background: #ffebee; color: #b71c1c; }

/* ── Toolbar ────────────────────────────────────────────────────── */
.srp-cot-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: #f7f8f5;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.srp-cot-toolbar-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* v147 — campo de busca client-side no centro da toolbar */
.srp-cot-toolbar-mid {
    flex: 1 1 200px;
    min-width: 180px;
    display: flex;
    justify-content: center;
}
.srp-cot-busca {
    width: 100%;
    max-width: 320px;
    padding: 7px 11px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #222;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.srp-cot-busca:focus {
    outline: none;
    border-color: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
.srp-cot-count {
    font-size: 12px;
    color: #666;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ── Botões ─────────────────────────────────────────────────────── */
.srp-cot-btn {
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease, opacity .15s ease;
    line-height: 1.3;
    letter-spacing: .01em;
}
.srp-cot-btn:active { transform: translateY(1px); }
.srp-cot-btn[disabled] { opacity: .55; cursor: wait; }
.srp-cot-btn-primary {
    background: #2e7d32;
    color: #fff;
}
.srp-cot-btn-primary:hover { background: #1b5e20; }
.srp-cot-btn-ghost {
    background: #fff;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}
.srp-cot-btn-ghost:hover { background: #f1f8e9; }

/* ── Body (lista scrollável) ────────────────────────────────────── */
.srp-cot-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 18px;
    background: #fafafa;
    min-height: 200px;
}
.srp-cot-loading,
.srp-cot-vazio {
    padding: 40px 16px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.srp-cot-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 6px;
    border: 2px solid #c8e6c9;
    border-top-color: #2e7d32;
    border-radius: 50%;
    animation: srp-cot-spin .8s linear infinite;
    vertical-align: -2px;
}
@keyframes srp-cot-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────────
   v147 — LINHA COMPACTA + PAINEL EXPANDIDO
   ─────────────────────────────────────────────────────────────────────
   Substitui o card vertical de ~140px (v50–v52, 7 inputs sempre visíveis)
   por linha compacta de ~46px que expande ao clique. Permite gerir 84
   cotações sem 11k px de scroll. CSS namespace .srp-cot-row (compacta)
   e .srp-cot-painel (expandida) co-existem com .srp-cot-linha legada
   se algo escapar do render — não há colisão direta.
─────────────────────────────────────────────────────────────────────── */

.srp-cot-row {
    display: grid;
    grid-template-columns: 32px 1fr 70px 96px 78px 24px 22px 28px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.srp-cot-row:hover {
    border-color: #c8e6c9;
    background: #fafefb;
}
.srp-cot-row-open {
    border-color: #2e7d32;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #fafefb;
    margin-bottom: 0;
}
.srp-cot-row-num {
    font-size: 10px;
    font-weight: 700;
    color: #aaa;
    letter-spacing: .08em;
    background: #f0f0f0;
    padding: 3px 7px;
    border-radius: 10px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    text-align: center;
}
.srp-cot-row-open .srp-cot-row-num {
    background: #c8e6c9;
    color: #1b5e20;
}
.srp-cot-row-id {
    overflow: hidden;
    min-width: 0;
}
.srp-cot-row-nome {
    font-weight: 600;
    font-size: 13px;
    color: #1b5e20;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.srp-cot-row-fonte {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #888;
    letter-spacing: .05em;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srp-cot-row-spark {
    width: 60px;
    height: 20px;
    overflow: hidden;
}
.srp-cot-row-spark-empty {
    font-size: 11px;
    color: #ccc;
    line-height: 20px;
    display: block;
    text-align: center;
}
.srp-cot-row-valor {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srp-cot-row-unidade {
    display: block;
    font-size: 10px;
    color: #999;
    font-weight: 400;
    letter-spacing: 0;
}
.srp-cot-row-delta {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 3px 6px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.srp-cot-delta-up   { background: rgba(99, 153, 34, .14); color: #2d5e10; }
.srp-cot-delta-down { background: rgba(198, 40, 40, .12); color: #8a1d1d; }
.srp-cot-delta-flat { background: rgba(186, 117, 23, .12); color: #6b4910; }
.srp-cot-row-trend {
    font-size: 12px;
    text-align: center;
    font-weight: 700;
    padding: 0;
    background: transparent;
}
.srp-cot-row-chev {
    font-size: 14px;
    color: #999;
    text-align: center;
    line-height: 1;
}
.srp-cot-row-open .srp-cot-row-chev { color: #2e7d32; }
.srp-cot-row-del {
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 26px; height: 26px;
    color: #c62828;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease;
    padding: 0;
}
.srp-cot-row-del:hover {
    background: #ffebee;
    border-color: #ef9a9a;
}

/* ── Painel expandido ─────────────────────────────────────────────── */
.srp-cot-painel {
    display: grid;
    grid-template-columns: 1.05fr 1.4fr 1fr;
    gap: 18px;
    padding: 16px 14px 14px;
    background: #fafefb;
    border: 1px solid #2e7d32;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-bottom: 10px;
}
.srp-cot-painel-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.srp-cot-painel-titulo {
    font-size: 10px;
    font-weight: 700;
    color: #2e7d32;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding-bottom: 4px;
    border-bottom: 1px dashed #c8e6c9;
    margin-bottom: 2px;
}
.srp-cot-painel-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.srp-cot-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srp-cot-fld-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.srp-cot-fld-lbl em {
    font-style: normal;
    color: #2e7d32;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.srp-cot-fld input,
.srp-cot-fld select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: #222;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.srp-cot-fld input:focus,
.srp-cot-fld select:focus {
    outline: none;
    border-color: #2e7d32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .12);
}
.srp-cot-fld input[readonly],
.srp-cot-fld select[disabled] {
    background: #f0f0f0;
    color: #666;
    cursor: not-allowed;
}

/* ── Grid de histórico (12 meses) ─────────────────────────────────── */
.srp-cot-hist-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}
.srp-cot-hist-cell {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    padding: 4px 5px;
    min-width: 0;
}
.srp-cot-hist-cell-last {
    border-color: #2e7d32;
    border-width: 1.5px;
    background: #fafefb;
}
.srp-cot-hist-mes {
    display: block;
    font-size: 9px;
    color: #888;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: .05em;
    margin-bottom: 1px;
}
.srp-cot-hist-cell-last .srp-cot-hist-mes { color: #2e7d32; }
.srp-cot-hist-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 11.5px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    padding: 0;
    color: #222;
    text-align: right;
    box-sizing: border-box;
}
.srp-cot-hist-input:focus {
    outline: none;
    color: #1b5e20;
    font-weight: 600;
}
.srp-cot-hist-csv-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
}
.srp-cot-hist-csv-lbl {
    font-size: 10px;
    color: #888;
    font-weight: 600;
}
.srp-cot-hist-csv {
    width: 100%;
    padding: 5px 8px;
    border: 1px dashed #c8e6c9;
    border-radius: 5px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #444;
    background: #fff;
    box-sizing: border-box;
}
.srp-cot-hist-csv:focus {
    outline: none;
    border-color: #2e7d32;
    border-style: solid;
}

/* ── Preview + derivações ─────────────────────────────────────────── */
.srp-cot-preview-box {
    background: #0B1612;
    border-radius: 6px;
    padding: 6px 8px;
}
.srp-cot-preview-empty {
    background: #f0f0f0;
    border-radius: 6px;
    padding: 18px 10px;
    text-align: center;
    font-size: 11px;
    color: #999;
    font-style: italic;
}
.srp-cot-deriv {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.srp-cot-deriv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    gap: 8px;
}
.srp-cot-deriv-row > span { color: #777; }
.srp-cot-deriv-row > strong {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #222;
}
.srp-cot-deriv-delta,
.srp-cot-deriv-trend {
    padding: 2px 5px;
    border-radius: 3px;
}

/* ── Toggle "auto-derivar" ─────────────────────────────────────────── */
.srp-cot-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    user-select: none;
}
.srp-cot-toggle input { display: none; }
.srp-cot-toggle-box {
    position: relative;
    width: 28px;
    height: 15px;
    background: #ccc;
    border-radius: 8px;
    transition: background .15s ease;
    flex-shrink: 0;
}
.srp-cot-toggle-box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.srp-cot-toggle input:checked + .srp-cot-toggle-box {
    background: #2e7d32;
}
.srp-cot-toggle input:checked + .srp-cot-toggle-box::after {
    transform: translateX(13px);
}
.srp-cot-toggle-lbl { flex: 1; }

/* ── Inputs internos ao painel: foco verde SRP (preservado) ───────── */
.srp-cot-input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
    color: #222;
}
.srp-cot-input:focus {
    outline: none;
    border-color: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .12);
}
select.srp-cot-input { cursor: pointer; }

/* ── Rodapé ─────────────────────────────────────────────────────── */
.srp-cot-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.srp-cot-rodape-meta {
    font-size: 11.5px;
    color: #888;
    flex: 1;
    min-width: 200px;
}
.srp-cot-rodape-acoes {
    display: flex;
    gap: 8px;
}

/* ── Responsivo mobile ──────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Painel: vira coluna única no mobile/tablet pra não esmagar */
    .srp-cot-painel {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .srp-cot-hist-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* Linha compacta perde mini-spark e ícone trend no mobile (apertado) */
    .srp-cot-row {
        grid-template-columns: 32px 1fr 96px 60px 22px 28px;
    }
    .srp-cot-row-spark,
    .srp-cot-row-trend {
        display: none;
    }
}
@media (max-width: 700px) {
    .srp-cot-overlay { padding: 0; }
    .srp-cot-shell { max-height: 100vh; border-radius: 0; }
    .srp-cot-topbar-titulo { font-size: 16px; }
    .srp-cot-topbar-sub    { font-size: 11px; }
    .srp-cot-toolbar       { padding: 10px 12px; }
    .srp-cot-body          { padding: 10px 12px; }
    .srp-cot-rodape        { padding: 10px 12px; }
    .srp-cot-btn           { font-size: 12px; padding: 7px 11px; }
    .srp-cot-input         { font-size: 16px; }  /* >=16px evita zoom iOS */
    .srp-cot-hist-input    { font-size: 14px; }
    .srp-cot-busca         { font-size: 16px; }
    .srp-cot-hist-grid     { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════
   v70 — POPUP DE PROPRIEDADE (gabarito Michel · fix do colapso de width)
   ───────────────────────────────────────────────────────────────────────
   v69 introduziu o split 40/60 mas o leaflet-popup-content-wrapper não
   estava respeitando o max-width 900px (provavelmente por: a) :has() não
   suportado em algum browser; b) tema WP injetando max-width parasita;
   c) maxWidth: 480 no bindPopup do JS antigo). Resultado: o popup abria
   com ~270px de largura e os labels viravam "S/O/B/R/E" em coluna.

   FIX v70:
   1. JS — bindPopup agora usa minWidth/maxWidth DIFERENTES p/ desktop
      e mobile. Desktop ≥1024px: min 760px, max 860px. Mobile: 320/480.
   2. CSS — classe .srp-leaflet-popup-v70 aplica !important nas larguras
      por seletor explícito (não depende mais de :has()).
   3. JS — popup recebe a classe v70 via className do bindPopup.

   Classes-âncora preservadas (event handlers existentes não quebram):
     • .agbz-popup-card (overflow safeguard)
     • .agbz-popup-v51 (tema dark herdado)
     • .agbz-popup-hero, srp-fb-hero, srp-ss-nav, srp-fb-dots
     • .agbz-popup-row-coments, .agbz-popup-row-admin
     • .srp-popup-coment-area, .srp-popup-admin-actions

   LAYOUT:
     Desktop ≥ 1024px → flex horizontal 42/58 (foto / conteúdo)
     Mobile  <  1024px → empilha vertical (foto 200px no topo + conteúdo)

   Paleta institucional CIEA:
     bg #0F2620 · accent dourado #D4AD5A · text #F2EDE0 · WhatsApp #43E07B
═══════════════════════════════════════════════════════════════════════ */

/* ── ROOT: tema dark + override do wrapper Leaflet ─────────────────── */
.agbz-popup-v51 {
    /* v77 — Tokens visuais ALINHADOS ao mockup
       card_pin_v74_redesenhado.html anexado pelo Michel:
         background: #0F2620
         border: 1px solid rgba(212,173,90,.28)
         border-radius: 16px
         box-shadow: 0 12px 32px rgba(0,0,0,.45)
       Era 14px / .22 / 0 18px 50px no v76. */
    background: #0F2620;
    color: #F2EDE0;
    border: 1px solid rgba(212, 173, 90, .28);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.45;
}

/* v77 — Wrapper do Leaflet com tokens do mockup HTML */
.srp-leaflet-popup-v70 .leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper:has(.agbz-popup-v51) {
    background: #0F2620 !important;
    border: 1px solid rgba(212, 173, 90, .28) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.srp-leaflet-popup-v70 .leaflet-popup-content,
.leaflet-popup-content:has(.agbz-popup-v51) {
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* v70 — Em desktop ≥1024px, força a largura útil para o split 40/60 */
@media (min-width: 1024px) {
    .srp-leaflet-popup-v70 .leaflet-popup-content-wrapper,
    .leaflet-popup-content-wrapper:has(.agbz-popup-v51) {
        min-width: min(760px, calc(100vw - 48px)) !important;
        max-width: min(860px, calc(100vw - 48px)) !important;
        width: min(820px, calc(100vw - 48px)) !important;
    }
    .srp-leaflet-popup-v70 .leaflet-popup-content,
    .leaflet-popup-content:has(.agbz-popup-v51) {
        width: 100% !important;
    }
}

/* v70 — Tail/tip do popup harmonizado com o tema dark */
.srp-leaflet-popup-v70 .leaflet-popup-tip,
.leaflet-popup-tip:has(+ .leaflet-popup-content-wrapper .agbz-popup-v51) {
    background: #0F2620 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35) !important;
}

/* v70 — Botão de fechar do Leaflet adaptado ao tema dark */
.srp-leaflet-popup-v70 .leaflet-popup-close-button {
    color: #F2EDE0 !important;
    padding: 8px 10px 0 0 !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    width: 36px !important;
    height: 36px !important;
    text-align: center !important;
    line-height: 1 !important;
    opacity: .7 !important;
    transition: opacity .15s ease !important;
}
.srp-leaflet-popup-v70 .leaflet-popup-close-button:hover {
    opacity: 1 !important;
    color: #D4AD5A !important;
    background: transparent !important;
}

/* ── OVERLAYS LEGADOS: escondidos no v70
   .srp-fb-identity etc vinham do v45 sobrepondo o nome na foto.
   No v70 o nome está no conteúdo à direita; sobreposição vira ruído. */
.agbz-popup-v51 .srp-fb-identity,
.agbz-popup-v51 .srp-fb-tags,
.agbz-popup-v51 .srp-fb-nome,
.agbz-popup-v51 .srp-fb-sub,
.agbz-popup-v51 .srp-fb-overlay,
.agbz-popup-v51 .agbz-popup-hero-id,
.agbz-popup-v51 .agbz-popup-hero-tags,
.agbz-popup-v51 .agbz-popup-hero-nome,
.agbz-popup-v51 .agbz-popup-hero-resp {
    display: none !important;
}

/* ── SPLIT principal (mobile-first: empilhado vertical) ─────────────── */
.agbz-popup-card.agbz-prop-v69 {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important; /* v124 — âncora pro .agbz-prop-share-btn */
}
.agbz-prop-split {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v124 — BOTÃO COMPARTILHAR DISCRETO (popup card)
   ────────────────────────────────────────────────────────────────────────
   Pequeno botão de ícone no canto superior esquerdo do card. Substitui
   o item antigo "Compartilhar página" que ficava escondido dentro do
   <details> "Mais detalhes". Sempre visível, ocupa zero espaço da barra
   de ações principal, e dá feedback visual (toast in-place) quando o
   link é copiado pro clipboard.

   v132 — REPOSICIONAMENTO + UPGRADE FUNCIONAL (TAREFA 2)
   ──────────────────────────────────────────────────────
   Bug v124-v131: posicionado em `top:10; right:10` (28x28), o botão
   colidia visualmente com o botão de fechar nativo do Leaflet (`.leaflet-
   popup-close-button` ocupa ~36x36 em top:0/right:0). Os dois ficavam
   no mesmo quadrante, com o share aparentando estar "abaixo" do X
   — captura 27/jun/2026 documenta a sobreposição.

   v132: realocado pra `top:10; left:10` (lado oposto do close button),
   e expandido pra 32x32 pra melhor área de toque. Também ganhou borda
   gold mais saliente pra indicar que é um CTA, não só decorativo.
   ════════════════════════════════════════════════════════════════════════ */
.agbz-prop-share-btn {
    position: absolute;
    /* v132 — Migrado de right:10px pra left:10px pra não colidir com
       o close button do Leaflet (que vive em top-right por default). */
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: rgba(15, 38, 32, 0.85);
    border: 1px solid rgba(212, 173, 90, 0.45);
    border-radius: 6px;
    color: #E8C26E;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.45);
}
.agbz-prop-share-btn:hover {
    background: var(--srp-pc-gold, #D4AD5A);
    border-color: var(--srp-pc-gold, #D4AD5A);
    color: #0B1612;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(212, 173, 90, 0.45);
}
.agbz-prop-share-btn:focus-visible {
    outline: 2px solid #D4AD5A;
    outline-offset: 2px;
}
.agbz-prop-share-btn:active {
    transform: scale(0.94);
}
.agbz-prop-share-btn svg {
    display: block;
    width: 15px;
    height: 15px;
}

/* Feedback "Link copiado!" — bolha efêmera ao lado do botão.
   v132 — Movida pra DIREITA do botão (já que o botão agora está
   no top-left). Antes vinha abaixo, ainda funciona via `top:calc(100%+6px)`,
   só ajustamos `left:0` pra alinhar com a borda esquerda do botão. */
.agbz-prop-share-btn__feedback {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #3FA34D;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.agbz-prop-share-btn.is-copied {
    background: rgba(63, 163, 77, 0.22);
    border-color: #3FA34D;
    color: #5BC56B;
}
.agbz-prop-share-btn.is-copied .agbz-prop-share-btn__feedback {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 640px) {
    .agbz-prop-share-btn {
        top: 8px;
        left: 8px;
        width: 30px;
        height: 30px;
    }
}

/* ── HERO (foto + carrossel) — mobile: full-width 200px ────────────── */
.agbz-popup-v51 .agbz-popup-hero,
.agbz-popup-v51 .agbz-prop-img-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    background: #142822;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}
.agbz-popup-v51 .agbz-popup-hero img,
.agbz-popup-v51 .agbz-prop-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
}
.agbz-popup-v51 .agbz-popup-hero-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    color: rgba(242, 237, 224, .55);
    background: #142822;
}
.agbz-popup-v51 .agbz-popup-hero-ph-txt {
    font-size: 12px;
    letter-spacing: .04em;
}

/* Setas de navegação da galeria (carrossel preservado) */
.agbz-popup-v51 .srp-ss-nav,
.agbz-popup-v51 .srp-fb-nav-prev,
.agbz-popup-v51 .srp-fb-nav-next {
    background: rgba(15, 38, 32, .65);
    color: #F2EDE0;
    border: 1px solid rgba(212, 173, 90, .25);
    width: 32px; height: 32px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.agbz-popup-v51 .srp-ss-nav:hover {
    background: rgba(212, 173, 90, .25);
    border-color: #D4AD5A;
}

/* ── CONTEÚDO (mobile: full-width) ─────────────────────────────────── */
.agbz-prop-content {
    flex: 1 1 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    min-width: 0;
}

/* ── HEADER: badge / título / responsável ──────────────────────────── */
.agbz-prop-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 173, 90, .15);
    margin: 0;
}
.agbz-prop-badge {
    display: inline-block;
    background: rgba(212, 173, 90, .15);
    color: #D4AD5A;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.agbz-prop-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #F2EDE0;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.agbz-prop-owner {
    font-size: 12.5px;
    color: rgba(196, 210, 200, .9);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.agbz-prop-owner svg {
    flex-shrink: 0;
    opacity: .8;
}

/* ── GRID 2x2 de info-boxes (mobile: 1 col) ────────────────────────── */
.agbz-prop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.agbz-prop-box {
    background: rgba(212, 173, 90, .08);
    border: 1px solid rgba(212, 173, 90, .15);
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
    box-sizing: border-box;
}
.agbz-prop-box-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: #D4AD5A;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}
.agbz-prop-box-content {
    font-size: 12.5px;
    color: #F2EDE0;
    line-height: 1.45;
    overflow-wrap: break-word;
}
/* v194 — bairro oficial sob o endereço, no card Localização. */
.agbz-prop-loc-bairro {
    margin-top: 2px;
    font-size: 11.5px;
    color: rgba(242, 237, 224, .74);
}
.agbz-prop-box-empty {
    color: rgba(126, 142, 132, .9);
    font-style: italic;
    font-size: 12px;
}
.agbz-prop-box-num {
    font-weight: 800;
    font-size: 22px;
    color: #3FA34D;
    letter-spacing: -.02em;
    line-height: 1;
    display: inline-block;
    margin-right: 4px;
}
.agbz-prop-box-unit {
    font-size: 11px;
    color: rgba(242, 237, 224, .65);
}
.agbz-prop-box-hint {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: rgba(242, 237, 224, .55);
    font-style: italic;
}

/* Curiosidades dentro do box Tradição: clamp 3 linhas + "Ler mais" */
.agbz-prop-box .srp-popup-curios {
    background: transparent;
    border: 0; padding: 0; margin: 0;
}
.agbz-prop-box .srp-popup-curios-head {
    display: none;
}
.agbz-prop-box .srp-popup-curios-corpo {
    color: #F2EDE0;
    font-size: 12px;
    line-height: 1.5;
}
.agbz-prop-box .srp-popup-curios-item-titulo {
    color: #E8C26E;
    font-size: 12px;
    margin: 0 0 3px;
    font-weight: 700;
}
.agbz-prop-box .srp-popup-curios-item-num {
    background: rgba(212, 173, 90, .2);
    color: #D4AD5A;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 10px;
    margin-right: 4px;
}
.agbz-prop-box .srp-popup-curios-item {
    margin-bottom: 6px;
}
.agbz-prop-box .srp-popup-curios-item:last-child {
    margin-bottom: 0;
}
.agbz-prop-box .srp-popup-curios-item-corpo,
.agbz-prop-box .srp-popup-curios-legado {
    color: #F2EDE0 !important;
}
.agbz-prop-box .srp-popup-curios-legado {
    border-top: 1px dashed rgba(212, 173, 90, .30) !important;
    padding-top: 6px;
    margin-top: 6px;
}

.agbz-prop-box .agbz-curios-clamp[data-clamp="1"] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.6em;
}
.agbz-prop-box .agbz-curios-clamp[data-clamp="0"] {
    display: block;
    overflow: visible;
    max-height: none;
}
.agbz-prop-box .agbz-curios-toggle {
    margin-top: 4px;
    background: transparent;
    border: 0;
    color: #D4AD5A;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: inherit;
    letter-spacing: .02em;
}
.agbz-prop-box .agbz-curios-toggle:hover {
    color: #E8C26E;
}
.agbz-prop-box .agbz-curios-toggle svg {
    transition: transform .2s ease;
}
.agbz-prop-box .agbz-curios-toggle-aberto svg {
    transform: rotate(180deg);
}

/* ── AÇÕES (WhatsApp + Mais detalhes) ──────────────────────────────── */
.agbz-prop-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(212, 173, 90, .15);
    flex-wrap: wrap;
}
.agbz-prop-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid rgba(212, 173, 90, .3);
    background: transparent;
    color: #D4AD5A;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    font-family: inherit;
    letter-spacing: .02em;
}
.agbz-prop-btn:hover {
    background: rgba(212, 173, 90, .1);
    border-color: rgba(212, 173, 90, .5);
}
.agbz-prop-btn-wpp {
    background: rgba(67, 224, 123, .15);
    color: #43E07B;
    border-color: rgba(67, 224, 123, .3);
}
.agbz-prop-btn-wpp:hover {
    background: rgba(67, 224, 123, .25);
    border-color: rgba(67, 224, 123, .5);
}
.agbz-prop-btn-outline {
    /* visual padrão do .agbz-prop-btn (outline dourado) já cobre */
}

/* ── <details> "Mais detalhes" ─────────────────────────────────────── */
.agbz-prop-detail {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}
.agbz-prop-detail > summary {
    list-style: none;
    cursor: pointer;
}
.agbz-prop-detail > summary::-webkit-details-marker {
    display: none;
}
.agbz-prop-detail[open] > summary {
    background: rgba(212, 173, 90, .1);
    border-color: rgba(212, 173, 90, .5);
}
.agbz-prop-caret {
    transition: transform .2s ease;
}
.agbz-prop-detail[open] .agbz-prop-caret {
    transform: rotate(180deg);
}
.agbz-prop-detail-menu {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(20, 40, 34, .6);
    border: 1px solid rgba(212, 173, 90, .18);
    border-radius: 6px;
    padding: 6px;
}
.agbz-prop-detail-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: #F2EDE0;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s ease;
    font-family: inherit;
}
.agbz-prop-detail-opt:hover {
    background: rgba(212, 173, 90, .1);
    color: #E8C26E;
}
.agbz-prop-detail-opt svg {
    flex-shrink: 0;
    color: #D4AD5A;
}

/* ── LINHAS FULL-WIDTH abaixo do split (comentários + admin) ───────── */
.agbz-popup-v51 .agbz-popup-row-full {
    padding: 0;
    margin: 0;
}
.agbz-popup-v51 .agbz-popup-row-admin:empty,
.agbz-popup-v51 .agbz-popup-row-coments:empty {
    display: none;
}

.agbz-popup-v51 .agbz-popup-row-coments {
    /* v77 — Tokens do mockup card_pin_v74_redesenhado.html:
       background: rgba(20,40,34,.7)
       border-top: 1px solid rgba(212,173,90,.15)
       padding: 14px 18px */
    background: rgba(20, 40, 34, .7);
    border-top: 1px solid rgba(212, 173, 90, .15);
    padding: 14px 18px;
}
.agbz-popup-v51 .agbz-popup-coments-lbl {
    color: #D4AD5A;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.agbz-popup-v51 .agbz-popup-row-coments input[type="text"],
.agbz-popup-v51 .agbz-popup-row-coments textarea {
    background: rgba(20, 40, 34, .7) !important;
    color: #F2EDE0 !important;
    border: 1px solid rgba(212, 173, 90, .22) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: inherit !important;
}
.agbz-popup-v51 .agbz-popup-row-coments input[type="text"]::placeholder,
.agbz-popup-v51 .agbz-popup-row-coments textarea::placeholder {
    color: rgba(242, 237, 224, .45) !important;
}
.agbz-popup-v51 .agbz-popup-row-coments input[type="text"]:focus,
.agbz-popup-v51 .agbz-popup-row-coments textarea:focus {
    border-color: rgba(212, 173, 90, .6) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(212, 173, 90, .12) !important;
}

/* Linha admin (botões editar/excluir/dados admin) */
.agbz-popup-v51 .agbz-popup-row-admin {
    padding: 12px 16px;
    border-top: 1px solid rgba(212, 173, 90, .12);
}
.agbz-popup-v51 .srp-popup-admin-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 0;
}
.agbz-popup-v51 .srp-popup-admin-actions button {
    background: rgba(212, 173, 90, .14);
    border: 1px solid rgba(212, 173, 90, .4);
    color: #E8C26E;
    border-radius: 6px;
    padding: 7px 11px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
    font-family: inherit;
}
.agbz-popup-v51 .srp-popup-admin-actions button:hover {
    background: rgba(212, 173, 90, .28);
}

/* ═══════ DESKTOP ≥ 1024px: ATIVA O SPLIT 45/55 (v74) ═════════════════ */
@media (min-width: 1024px) {
    .agbz-prop-split {
        flex-direction: row !important;
        align-items: stretch !important;
    }
    .agbz-popup-v51 .agbz-popup-hero,
    .agbz-popup-v51 .agbz-prop-img-wrap {
        /* v77 — Foto agora em 38% conforme card_pin_v74_redesenhado.html.
           Era 360px fixo no v76 (45%). Voltando ao mockup oficial. */
        flex: 0 0 38% !important;
        width: 38% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 400px !important;
        align-self: stretch !important;
        position: relative !important;
        background: #142822 !important;
        overflow: hidden !important;
    }
    .agbz-prop-content {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 18px !important;       /* v77 — 18px conforme mockup */
        gap: 14px !important;
    }
    .agbz-prop-title {
        font-size: 19px !important;     /* v77 — 19px conforme mockup */
        letter-spacing: -0.015em !important;
        line-height: 1.15 !important;
    }
    .agbz-prop-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;            /* v77 — 8px conforme mockup */
    }
    .agbz-prop-box {
        min-width: 0 !important;
        padding: 10px !important;       /* v77 — 10px conforme mockup */
        background: rgba(212, 173, 90, .06) !important;
        border: 1px solid rgba(212, 173, 90, .18) !important;
        border-radius: 8px !important;
    }
    .agbz-prop-box-lbl {
        letter-spacing: .1em !important;
        white-space: nowrap !important;
        font-size: 9px !important;
        font-weight: 500 !important;
        color: #D4AD5A !important;
        text-transform: uppercase !important;
        margin-bottom: 5px !important;
    }
    .agbz-prop-box-content {
        font-size: 11px !important;
        color: #F2EDE0 !important;
        line-height: 1.45 !important;
    }
    .agbz-prop-box-num {
        font-size: 19px !important;
        color: #43E07B !important;       /* v77 — verde para pluvio */
        font-weight: 500 !important;
        line-height: 1 !important;
    }
    .agbz-prop-box-unit {
        font-size: 10px !important;
        color: rgba(242, 237, 224, .65) !important;
    }
    .agbz-prop-box-hint {
        font-size: 9px !important;
        color: rgba(242, 237, 224, .55) !important;
        display: block !important;
        margin-top: 3px !important;
    }
}

/* ═══════ v74 — BARRA DE AÇÕES INLINE (todos os botões visíveis) ══════ */
.agbz-popup-v51 .agbz-prop-actbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(212, 173, 90, .15) !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.agbz-popup-v51 .agbz-act {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 11px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1px solid !important;
    line-height: 1 !important;
    transition: filter .15s ease !important;
    white-space: nowrap !important;
}
.agbz-popup-v51 .agbz-act:hover {
    filter: brightness(1.15) !important;
    text-decoration: none !important;
}
.agbz-popup-v51 .agbz-act svg { flex-shrink: 0; }
.agbz-popup-v51 .agbz-act-wpp {
    background: rgba(67, 224, 123, .16) !important;
    color: #43E07B !important;
    border-color: rgba(67, 224, 123, .35) !important;
}
.agbz-popup-v51 .agbz-act-tel {
    background: rgba(212, 173, 90, .12) !important;
    color: #D4AD5A !important;
    border-color: rgba(212, 173, 90, .35) !important;
}
.agbz-popup-v51 .agbz-act-maps {
    background: rgba(74, 144, 226, .14) !important;
    color: #4A90E2 !important;
    border-color: rgba(74, 144, 226, .35) !important;
}
.agbz-popup-v51 .agbz-act-waze {
    background: rgba(0, 172, 193, .14) !important;
    color: #00ACC1 !important;
    border-color: rgba(0, 172, 193, .35) !important;
}
.agbz-popup-v51 .agbz-act-site {
    background: rgba(232, 194, 110, .08) !important;
    color: #E8C26E !important;
    border-color: rgba(212, 173, 90, .28) !important;
}
/* v172 — Redes sociais na barra de ações do card (tons suavizados p/ tema escuro) */
.agbz-popup-v51 .agbz-act-insta {
    background: rgba(225, 78, 132, .12) !important;
    color: #F08BB0 !important;
    border-color: rgba(225, 78, 132, .32) !important;
}
.agbz-popup-v51 .agbz-act-face {
    background: rgba(66, 133, 244, .12) !important;
    color: #7FA8F5 !important;
    border-color: rgba(66, 133, 244, .32) !important;
}
.agbz-popup-v51 .agbz-act-yt {
    background: rgba(229, 62, 62, .12) !important;
    color: #F08080 !important;
    border-color: rgba(229, 62, 62, .32) !important;
}

/* v71+v75+v76 — DEFESA SISTÊMICA contra esvaziamento visual do lado direito.
   Estas regras NÃO ESTILIZAM nada (são reset defensivo); só
   garantem visibility/opacity/color/display sãos para os filhos
   do .agbz-prop-content. Se algum tema WP injetar regras como
   `[role="banner"] { display: none }` ou similar, estas regras
   anulam. Aplicadas em TODOS os breakpoints.

   v76 — FIX CRÍTICO: REMOVIDO `flex-direction: column !important`
   das defesas do .agbz-prop-split e .agbz-prop-content. Essa
   regra vinha DEPOIS da media query @media(min-width:1024px) no
   arquivo, e como ambas tinham !important com mesma especificidade,
   a defesa vencia — fazendo o card SEMPRE renderizar em coluna
   (foto encima, conteúdo embaixo, "vazio" no lado direito).
   Esse foi o bug do "popup vazio" reportado do v71 ao v75.
   Agora a defesa só protege contra display:none/visibility:hidden;
   a direção do flex (column mobile, row desktop) é decidida pelas
   regras base e media query como manda o flexbox normal. */
.agbz-popup-v51 .agbz-prop-split {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    /* flex-direction NÃO setado aqui — deixar base + media query controlar */
}
.agbz-popup-v51 .agbz-prop-content {
    display: flex !important;
    flex-direction: column !important;   /* content é sempre column — não tem media query */
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.agbz-popup-v51 .agbz-prop-header,
.agbz-popup-v51 .agbz-prop-grid,
.agbz-popup-v51 .agbz-prop-actions,
.agbz-popup-v51 .agbz-prop-actbar,
.agbz-popup-v51 .agbz-prop-box {
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}
.agbz-popup-v51 .agbz-prop-header {
    display: block !important;
}
.agbz-popup-v51 .agbz-prop-grid {
    display: grid !important;
}
.agbz-popup-v51 .agbz-prop-actions,
.agbz-popup-v51 .agbz-prop-actbar {
    display: flex !important;
    flex-wrap: wrap !important;
}
.agbz-popup-v51 .agbz-prop-box {
    display: flex !important;
    flex-direction: column !important;
}
.agbz-popup-v51 .agbz-prop-title,
.agbz-popup-v51 .agbz-prop-owner,
.agbz-popup-v51 .agbz-prop-badge,
.agbz-popup-v51 .agbz-prop-box-lbl,
.agbz-popup-v51 .agbz-prop-box-content,
.agbz-popup-v51 .agbz-prop-box-num,
.agbz-popup-v51 .agbz-prop-box-unit,
.agbz-popup-v51 .agbz-prop-box-empty {
    visibility: visible !important;
    opacity: 1 !important;
    display: revert !important;
}
.agbz-popup-v51 .agbz-prop-title {
    display: block !important;
}

/* ═══════ TABLET 768-1023px: split mantém vertical mas foto cresce ═══ */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .agbz-prop-grid {
        grid-template-columns: 1fr 1fr;
    }
    .agbz-popup-v51 .agbz-popup-hero,
    .agbz-popup-v51 .agbz-prop-img-wrap {
        height: 240px;
    }
}

/* ═══════ MOBILE ≤ 600px: tipografia mais compacta ═══════════════════ */
@media (max-width: 600px) {
    .agbz-prop-content {
        padding: 14px;
        gap: 12px;
    }
    .agbz-prop-title {
        font-size: 16px;
    }
    .agbz-prop-box {
        padding: 10px;
    }
    .agbz-prop-box-num {
        font-size: 20px;
    }
}

/* Defesa overflow: nunca permitir overflow-wrap: anywhere global */
.agbz-popup-v51 *,
.agbz-popup-v51 *::before,
.agbz-popup-v51 *::after {
    overflow-wrap: break-word;
    word-break: normal;
}

/* ── 2. LIGHTBOX MODAL DE IMAGENS ──────────────────────────────────── */
.agbz-img-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 10, .92);
    z-index: 100000;       /* acima da Leaflet, do dashboard, de tudo */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .22s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: zoom-out;
}
.agbz-img-lightbox.is-open {
    display: flex;
}
.agbz-img-lightbox.is-visible {
    opacity: 1;
}

.agbz-img-lightbox__stage {
    position: relative;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    cursor: default;
}
.agbz-img-lightbox__img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
    background: #142822;
    display: block;
}
.agbz-img-lightbox__caption {
    color: #F2EDE0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    max-width: 720px;
    padding: 0 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.agbz-img-lightbox__caption-num {
    display: inline-block;
    margin-right: 8px;
    color: #D4AD5A;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .08em;
    font-weight: 500;
}
.agbz-img-lightbox__close {
    position: absolute;
    top: -12px;
    right: -12px;
    background: rgba(20, 40, 34, .95);
    border: 1px solid rgba(212, 173, 90, .35);
    color: #F2EDE0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.agbz-img-lightbox__close:hover {
    background: #D4AD5A;
    border-color: #D4AD5A;
    color: #1A1106;
    transform: scale(1.06);
}
.agbz-img-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 40, 34, .65);
    border: 1px solid rgba(212, 173, 90, .25);
    color: #F2EDE0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .15s ease, border-color .15s ease;
}
.agbz-img-lightbox__nav:hover {
    background: rgba(212, 173, 90, .85);
    border-color: #D4AD5A;
    color: #1A1106;
}
.agbz-img-lightbox__nav--prev { left: -64px; }
.agbz-img-lightbox__nav--next { right: -64px; }

/* Cursor zoom-in nas thumbnails do hero pra sinalizar que abre o lightbox */
.agbz-popup-v51 .agbz-popup-hero img,
.agbz-popup-v51 .agbz-popup-hero .srp-ss-img,
.agbz-popup-v51 .agbz-popup-hero .srp-fb-foto {
    cursor: zoom-in;
}

/* Mobile do lightbox */
@media (max-width: 720px) {
    .agbz-img-lightbox__nav--prev { left: 8px; }
    .agbz-img-lightbox__nav--next { right: 8px; }
    .agbz-img-lightbox__nav { width: 40px; height: 40px; font-size: 20px; }
    .agbz-img-lightbox__img { max-height: 70vh; }
    .agbz-img-lightbox__caption { font-size: 13px; }
}

/* ── 3. SCROLL VERTICAL NO POPUP MOBILE ────────────────────────────── */
@media (max-width: 600px) {
    .agbz-popup-card.agbz-popup-v51 {
        /* Em viewport curto, permite rolar dentro do popup pra alcançar
           Tradição/Contato/Comentários sem perder o hero. */
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Padding-bottom extra pra dar respiro no fim do scroll */
    .agbz-popup-card.agbz-popup-v51 .agbz-popup-row-admin {
        padding-bottom: 24px !important;
    }
}

/* ── 4. TIPOGRAFIA DO PROTÓTIPO NO POPUP ───────────────────────────── */
.agbz-popup-v51 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* v69 — regras de .agbz-popup-hero-nome e .agbz-popup-mcard-num/unidade
   removidas: ambos elementos não são mais gerados pelo construirPopup
   (hero-nome está escondido pelo bloco v69; mcard-* foi substituído por
   .agbz-prop-box-*). */

/* ════════════════════════════════════════════════════════════
   v78 — OVERLAY FULLSCREEN DO CARD DO PIN
   ────────────────────────────────────────────────────────────
   Substitui o popup do Leaflet. position:fixed + z-index alto
   garante que cubra TODO o conteúdo da página (mapa,
   ferramentas, ticker, header, parceiros etc).
   Michel escolheu o overlay imersivo (bg .92).
═══════════════════════════════════════════════════════════ */
.srp-pin-overlay {
    position: fixed;
    inset: 0;
    z-index: 10700;
    background: rgba(6, 12, 10, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    animation: srp-pin-overlay-fade 0.18s ease-out;
}
@keyframes srp-pin-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.srp-pin-overlay-card {
    background: #0F2620;
    border: 1px solid rgba(212, 173, 90, 0.32);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    width: 100%;
    max-width: 1080px;
    max-height: 92vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: srp-pin-card-zoom 0.22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes srp-pin-card-zoom {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.srp-pin-overlay-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 173, 90, 0.35) transparent;
}
.srp-pin-overlay-scroll::-webkit-scrollbar { width: 8px; }
.srp-pin-overlay-scroll::-webkit-scrollbar-track { background: transparent; }
.srp-pin-overlay-scroll::-webkit-scrollbar-thumb {
    background: rgba(212, 173, 90, 0.35);
    border-radius: 4px;
}
.srp-pin-overlay-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 173, 90, 0.55);
}

.srp-pin-overlay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    background: rgba(15, 38, 32, 0.85);
    border: 1px solid rgba(212, 173, 90, 0.4);
    border-radius: 50%;
    color: #D4AD5A;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.srp-pin-overlay-close:hover {
    background: rgba(212, 173, 90, 0.18);
    border-color: rgba(212, 173, 90, 0.65);
    color: #E8C26E;
}
.srp-pin-overlay-close:active {
    transform: scale(0.94);
}
.srp-pin-overlay-close:focus-visible {
    outline: 2px solid #D4AD5A;
    outline-offset: 2px;
}

/* v78 — Quando dentro do overlay, o card .agbz-popup-card não
   precisa do border-radius/border próprios — o overlay-card
   já tem. Removemos o border interno pra não ficar duplicado. */
.srp-pin-overlay .agbz-popup-v51,
.srp-pin-overlay .agbz-popup-card {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

/* v78 — O hero (foto) ganha altura confortável no fullscreen */
.srp-pin-overlay .agbz-popup-v51 .agbz-popup-hero,
.srp-pin-overlay .agbz-popup-v51 .agbz-prop-img-wrap {
    min-height: 420px !important;
}

/* v78 — padding right do conteúdo para o X não tampar o badge/título */
.srp-pin-overlay .agbz-popup-v51 .agbz-prop-content {
    padding-right: 60px !important;
}

/* Mobile: overlay padding menor */
@media (max-width: 640px) {
    .srp-pin-overlay { padding: 12px; }
    .srp-pin-overlay-card { max-height: 95vh; }
    .srp-pin-overlay .agbz-popup-v51 .agbz-popup-hero,
    .srp-pin-overlay .agbz-popup-v51 .agbz-prop-img-wrap {
        min-height: 260px !important;
    }
    .srp-pin-overlay .agbz-popup-v51 .agbz-prop-content {
        padding-right: 18px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   v88 — BADGE de pendentes nos botões "Cadastros" e "Reservas"
   ────────────────────────────────────────────────────────────
   Mostra um contador vermelho/dourado ao lado do label quando
   há submissões pendentes. Comportamento: link normal estilo
   .srp-btn-secondary, mas <a> em vez de <button>. */
a.srp-btn-secondary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
a.srp-btn-secondary:hover {
    text-decoration: none;
}
.srp-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #D4AD5A;
    color: #0F2620;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════
   v92 — MODAIS INTERNOS: CADASTROS E RESERVAS
   ──────────────────────────────────────────────────────────
   Overlay escuro full-viewport com card centralizado, scrollable
   no eixo Y quando tabela é grande. Tipografia institucional
   SRP (Fraunces serif nos títulos, Inter sans no resto, JetBrains
   Mono nos IDs). Mesma paleta verde+ouro+creme dos outros painéis.
═══════════════════════════════════════════════════════════ */
.srp-dados-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(6, 12, 10, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    animation: srp-dados-fade-in 0.18s ease-out;
}
@keyframes srp-dados-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.srp-dados-shell {
    background: #0F2620;
    border: 0.5px solid rgba(212, 173, 90, 0.22);
    border-radius: 14px;
    width: 100%;
    max-width: 1100px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    color: #F2EDE0;
}

.srp-dados-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 0.5px solid rgba(212, 173, 90, 0.18);
    background: linear-gradient(to bottom, #142822, #0F2620);
}
.srp-dados-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.srp-dados-topbar-icon {
    font-size: 24px;
    line-height: 1;
}
.srp-dados-topbar-titulo {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    color: #F2EDE0;
    letter-spacing: -0.3px;
}
.srp-dados-topbar-sub {
    font-size: 12px;
    color: rgba(242, 237, 224, 0.6);
    margin-top: 4px;
}
.srp-dados-fechar {
    background: transparent;
    border: 0.5px solid rgba(212, 173, 90, 0.3);
    color: #F2EDE0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.srp-dados-fechar:hover {
    background: rgba(212, 173, 90, 0.12);
    border-color: #D4AD5A;
}

.srp-dados-corpo {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.srp-dados-vazio {
    text-align: center;
    padding: 60px 24px;
    color: rgba(242, 237, 224, 0.7);
    font-size: 14px;
    line-height: 1.7;
}
.srp-dados-vazio-sub {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(242, 237, 224, 0.45);
}

.srp-dados-tabela-wrap {
    overflow-x: auto;
}
.srp-dados-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #F2EDE0;
}
.srp-dados-tabela thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #D4AD5A;
    font-weight: 500;
    border-bottom: 0.5px solid rgba(212, 173, 90, 0.22);
    background: rgba(15, 38, 32, 0.5);
    position: sticky;
    top: 0;
    z-index: 1;
}
.srp-dados-tabela tbody tr {
    border-bottom: 0.5px solid rgba(212, 173, 90, 0.08);
    transition: background 0.12s;
}
.srp-dados-tabela tbody tr:hover {
    background: rgba(212, 173, 90, 0.04);
}
.srp-dados-tabela tbody td {
    padding: 14px 16px;
    vertical-align: top;
    line-height: 1.5;
}
.srp-dados-tabela tbody td a {
    color: #87B5FF;
    text-decoration: none;
}
.srp-dados-tabela tbody td a:hover {
    text-decoration: underline;
}
.srp-dados-id {
    font-family: 'JetBrains Mono', monospace;
    color: rgba(242, 237, 224, 0.45);
    font-size: 11px;
    white-space: nowrap;
}
.srp-dados-data {
    color: rgba(242, 237, 224, 0.6);
    font-size: 11px;
    white-space: nowrap;
}
.srp-dados-sub {
    color: rgba(242, 237, 224, 0.55);
    font-size: 11px;
    margin-top: 3px;
}
.srp-dados-sem {
    color: rgba(242, 237, 224, 0.35);
}
.srp-dados-doc-link {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(212, 173, 90, 0.12);
    color: #D4AD5A !important;
    border-radius: 6px;
    font-size: 11px;
    text-decoration: none;
}
.srp-dados-doc-link:hover {
    background: rgba(212, 173, 90, 0.22);
    text-decoration: none !important;
}
.srp-dados-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.srp-dados-detalhes {
    font-size: 11px;
    color: rgba(242, 237, 224, 0.78);
    line-height: 1.7;
}
.srp-dados-detalhes-label {
    color: rgba(242, 237, 224, 0.45);
}

.srp-dados-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-top: 0.5px solid rgba(212, 173, 90, 0.18);
    background: rgba(15, 38, 32, 0.5);
}
.srp-dados-rodape-info {
    font-size: 11px;
    color: rgba(242, 237, 224, 0.55);
}
.srp-dados-rodape-link {
    font-size: 11px;
    color: #D4AD5A;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 0.5px solid rgba(212, 173, 90, 0.3);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.srp-dados-rodape-link:hover {
    background: rgba(212, 173, 90, 0.12);
    border-color: #D4AD5A;
}

/* Responsivo: tela pequena → empilhar */
@media (max-width: 720px) {
    .srp-dados-shell {
        max-height: calc(100vh - 16px);
    }
    .srp-dados-topbar {
        padding: 14px 16px;
    }
    .srp-dados-topbar-titulo {
        font-size: 16px;
    }
    .srp-dados-tabela {
        font-size: 12px;
    }
    .srp-dados-tabela thead th,
    .srp-dados-tabela tbody td {
        padding: 10px 12px;
    }
    .srp-dados-rodape {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   v117 — Medições reais reintegradas no popup do pin (tipografia menor
   que o "284 mm/ano" principal, atendendo pedido do SRP de manter o
   histórico visível mas sem competir com o totalizador anual)
   ════════════════════════════════════════════════════════════════════════ */

.srp-popup-pluvio-historico {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed rgba(212, 173, 90, 0.20);
	flex-wrap: wrap;
}
.srp-popup-pluvio-mini {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 4px 8px;
	background: rgba(212, 173, 90, 0.05);
	border-radius: 4px;
	border-left: 2px solid rgba(212, 173, 90, 0.40);
	font-family: 'JetBrains Mono', monospace;
	min-width: 60px;
}
.srp-popup-pluvio-mini-data {
	font-size: 9px;
	color: var(--agbz-muted, #7E8E84);
	letter-spacing: 0.04em;
	margin-bottom: 1px;
}
.srp-popup-pluvio-mini-vol {
	font-size: 11px;          /* MENOR que o valor principal (.srp-popup-pluvio-val) */
	font-weight: 600;
	color: var(--agbz-ink, #F2EDE0);
}

/* v117 — Sub-label "X medições" agora mais discreto (opacity reduzida) */
.srp-popup-pluvio-sub {
	font-size: 10px !important;     /* era ~13px default — agora bem menor */
	opacity: 0.65;
	font-style: italic;
	letter-spacing: 0.02em;
}

@media (max-width: 540px) {
	.srp-popup-pluvio-historico { gap: 4px; }
	.srp-popup-pluvio-mini { min-width: 50px; padding: 3px 6px; }
	.srp-popup-pluvio-mini-vol { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   v119 — FIX quebra de linha agressiva no popup do pin
   ────────────────────────────────────────────────────────────────────────
   Sintoma: "Marcos Augusto Teixeira Filho" quebrava 1 palavra por linha
            (4 linhas em vez de 2 naturais).
   Causa:   .agbz-prop-eyebrow e cards filhos tinham overflow-wrap: anywhere
            que quebra DENTRO de palavras (não só nos espaços).
   Fix:     overflow-wrap: break-word + word-break: keep-all (quebra só
            em espaços/hífens) com !important pra sobrepor as regras antigas.
   ════════════════════════════════════════════════════════════════════════ */
.srp-leaflet-popup .agbz-prop-title,
.srp-leaflet-popup .agbz-prop-owner,
.srp-leaflet-popup .agbz-prop-eyebrow,
.srp-leaflet-popup .srp-popup-titulo,
.srp-leaflet-popup .srp-popup-responsavel,
.srp-leaflet-popup .srp-popup-categoria,
.srp-leaflet-popup .agbz-popup-card *:not(a):not(code) {
    overflow-wrap: break-word !important;
    word-break:    normal !important;
    hyphens:       none !important;
}

/* Nome do produtor: ganha mais espaço, sem quebra desnecessária */
.srp-leaflet-popup .agbz-prop-owner,
.srp-leaflet-popup .srp-popup-responsavel {
    line-height: 1.35 !important;
    max-width: 100% !important;
    white-space: normal !important;
}

/* Título da propriedade: força quebra apenas em palavras inteiras */
.srp-leaflet-popup .agbz-prop-title,
.srp-leaflet-popup .srp-popup-titulo {
    line-height: 1.18 !important;
    word-break: normal !important;
}

/* Pílula de atividade (ex: "Pecuária de Corte"): nunca deve quebrar */
.srp-leaflet-popup .srp-popup-categoria,
.srp-leaflet-popup .agbz-prop-cat,
.srp-leaflet-popup .agbz-prop-tag {
    white-space: nowrap !important;
    max-width: max-content !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Container do header do popup: dar respiro horizontal */
.srp-leaflet-popup .srp-popup-header,
.srp-leaflet-popup .agbz-popup-header {
    padding: 18px 20px !important;
}
@media (max-width: 540px) {
    .srp-leaflet-popup .srp-popup-header,
    .srp-leaflet-popup .agbz-popup-header {
        padding: 14px 16px !important;
    }
    .srp-leaflet-popup .srp-popup-categoria,
    .srp-leaflet-popup .agbz-prop-cat,
    .srp-leaflet-popup .agbz-prop-tag {
        white-space: normal !important;       /* libera pílula em mobile */
        word-break: normal !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   v125 — DESATIVA OUTLINE AZUL DE FOCUS EM CAMADAS LEAFLET
   ────────────────────────────────────────────────────────────────────────
   Bug reportado pelo Michel em 27/jun/2026 (screenshot 18:08:40):
   ao clicar em qualquer camada/polígono do mapa, o navegador adicionava
   um outline azul brilhante via `:focus` no <path class="leaflet-interactive">
   — comportamento default do browser pra SVGs interativos. Não agrega
   nada (a camada já tem destaque visual próprio via stroke/fill) e
   poluía visualmente a tela.

   Fix: remove o outline em todos os estados de focus do leaflet-interactive
   (path, rect, polygon, circle, etc). Mantém acessibilidade via
   :focus-visible com ring discreto (nunca azul nativo).
   ════════════════════════════════════════════════════════════════════════ */
.leaflet-interactive,
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible,
.leaflet-interactive:active,
.leaflet-container path.leaflet-interactive,
.leaflet-container path.leaflet-interactive:focus,
.leaflet-container svg .leaflet-interactive:focus {
    outline: none !important;
    outline-offset: 0 !important;
}
/* Defensivo: alguns navegadores aplicam border via box-shadow em SVG focável */
.leaflet-container path.leaflet-interactive:focus {
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v126 — UX NOVA DA FERRAMENTA DE MEDIÇÃO
   ────────────────────────────────────────────────────────────────────────
   Substitui o painel grande (#painel-medicao-srp) + o painel de elevação
   (#painel-perfil-elevacao) por:
     • Toolbar mínimo no topo do mapa durante demarcação
     • Modal fullscreen com resultados após finalização

   Os painéis antigos ficam na DOM por retrocompat dos handlers JS, mas
   são escondidos via CSS. Toda interação visível vai pelos novos elementos.
   ════════════════════════════════════════════════════════════════════════ */

#painel-medicao-srp,
#painel-perfil-elevacao {
    display: none !important;
}

#srp-medicao-toolbar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 38, 32, 0.94);
    border: 1px solid rgba(212, 173, 90, 0.32);
    border-radius: 10px;
    box-shadow: 0 10px 32px -6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255,255,255,0.05) inset;
    color: #F2EDE0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    user-select: none;
    animation: srpMtSlideIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes srpMtSlideIn {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

#srp-medicao-toolbar .srp-mt-mode {
    display: inline-flex;
    gap: 4px;
}
#srp-medicao-toolbar .srp-mt-mode-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #9CAFA2;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#srp-medicao-toolbar .srp-mt-mode-btn:hover {
    background: rgba(212, 173, 90, 0.10);
    color: #C4D2C8;
}
#srp-medicao-toolbar .srp-mt-mode-btn.srp-mt-mode-on {
    background: rgba(212, 173, 90, 0.18);
    color: #E8C26E;
    border-color: rgba(212, 173, 90, 0.35);
}
#srp-medicao-toolbar .srp-mt-mode-icon {
    font-size: 13px;
    line-height: 1;
}

#srp-medicao-toolbar .srp-mt-sep {
    width: 1px;
    height: 22px;
    background: rgba(212, 173, 90, 0.18);
}

#srp-medicao-toolbar .srp-mt-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #C4D2C8;
    white-space: nowrap;
}
#srp-medicao-toolbar .srp-mt-stats strong {
    color: #F2EDE0;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}
#srp-medicao-toolbar .srp-mt-stat-sep {
    color: #5F7068;
}
#srp-medicao-toolbar .srp-mt-stat-total {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 11.5px;
    color: #E8C26E;
}

#srp-medicao-toolbar .srp-mt-actions {
    display: inline-flex;
    gap: 5px;
}
#srp-medicao-toolbar .srp-mt-btn {
    background: transparent;
    border: 1px solid rgba(212, 173, 90, 0.28);
    color: #C4D2C8;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
#srp-medicao-toolbar .srp-mt-btn:hover:not(:disabled) {
    background: rgba(212, 173, 90, 0.14);
    border-color: rgba(212, 173, 90, 0.50);
    color: #F2EDE0;
}
#srp-medicao-toolbar .srp-mt-btn:active:not(:disabled) {
    transform: scale(0.96);
}
#srp-medicao-toolbar .srp-mt-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
#srp-medicao-toolbar .srp-mt-btn-icon {
    width: 28px;
    padding: 0;
    justify-content: center;
}
#srp-medicao-toolbar .srp-mt-btn-primary {
    background: #3FA34D;
    border-color: #3FA34D;
    color: #fff;
}
#srp-medicao-toolbar .srp-mt-btn-primary:hover:not(:disabled) {
    background: #5BC56B;
    border-color: #5BC56B;
    color: #fff;
}
#srp-medicao-toolbar .srp-mt-btn-primary:disabled {
    background: rgba(63, 163, 77, 0.30);
    border-color: rgba(63, 163, 77, 0.30);
}
#srp-medicao-toolbar .srp-mt-btn-ghost {
    border-color: rgba(255, 92, 92, 0.32);
    color: #FF9C9C;
}
#srp-medicao-toolbar .srp-mt-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 92, 92, 0.12);
    border-color: rgba(255, 92, 92, 0.55);
    color: #FF7A7A;
}

@media (max-width: 720px) {
    #srp-medicao-toolbar {
        top: 12px;
        left: 8px;
        right: 8px;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 8px 10px;
    }
    #srp-medicao-toolbar .srp-mt-sep:nth-of-type(2) { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Modal fullscreen de resultados (após finalização)
   ──────────────────────────────────────────────────────────────────── */

#srp-medicao-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 10, 0.72);
    z-index: 11000;
    opacity: 0;
    transition: opacity 0.22s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#srp-medicao-modal-backdrop.is-open {
    opacity: 1;
}

#srp-medicao-modal {
    /* v130 — Modal centralizado com layout flex vertical:
       • HEADER  (sticky topo, sempre visível com X)
       • BODY    (scrollável: stats + chart)
       • FOOTER  (sticky base, ações sempre visíveis)
       Garante que NENHUM dado ou botão seja cortado em qualquer viewport,
       cumprindo a especificação v130 de responsividade total. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 8px));
    width: min(96vw, 1180px);
    /* v210.1 - ALTURA DEIXOU DE SER FIXA.
       Era `height: min(92vh, 820px)`, herdado da v130, quando o corpo
       sempre trazia sete cartoes mais um grafico grande e ocupar a
       altura toda era o certo. Depois que as secoes de nivelamento e
       de perfil passaram a se esconder sozinhas quando o modelo de
       elevacao nao tem resolucao, a altura fixa virou um bloco preto
       vazio de varias centenas de pixels embaixo do aviso.

       Com max-height o modal encolhe ate o conteudo e so cresce - e so
       entao rola - quando de fato precisa. O flex column com header e
       footer fixos continua valendo: e o .srp-mm-body que ganha ou
       perde altura. */
    height: auto;
    max-width: 1180px;
    max-height: min(92vh, 820px);
    z-index: 11010;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0B1612 0%, #060C0A 100%);
    color: #F2EDE0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    border-radius: 14px;
    border: 1px solid rgba(212, 173, 90, 0.30);
    box-shadow: 0 24px 64px -16px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.04) inset;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    overflow: hidden;          /* Ext: corner-radius preservado · Int: body decide scroll */
}
#srp-medicao-modal.is-open {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Header pin no topo — ✕ sempre acessível mesmo em scroll interno */
#srp-medicao-modal .srp-mm-head {
    position: sticky;
    top: 0;
    z-index: 3;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(212, 173, 90, 0.22);
    background: rgba(15, 38, 32, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-shrink: 0;
}
#srp-medicao-modal .srp-mm-titulo-wrap { min-width: 0; flex: 1 1 auto; }
#srp-medicao-modal .srp-mm-titulo {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #F2EDE0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
#srp-medicao-modal .srp-mm-meta {
    margin-top: 5px;
    font-size: 12px;
    color: #9CAFA2;
    letter-spacing: 0.02em;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
#srp-medicao-modal .srp-mm-meta strong {
    color: #E8C26E;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* v130 — BOTÃO FECHAR (X) repaginado:
   • 44×44 hitbox (touch target padrão WCAG/Apple HIG)
   • Fundo dourado sólido sobre X escuro = altíssimo contraste cromático
   • Hover: tom mais claro com glow externo
   • Active: scale leve
   • Focus-visible: anel duplo gold+dark para acessibilidade visual */
#srp-medicao-modal .srp-mm-fechar {
    width: 44px;
    height: 44px;
    background: #D4AD5A;
    border: 2px solid #D4AD5A;
    color: #0B1612;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.1s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    flex-shrink: 0;
    padding: 0;
}
#srp-medicao-modal .srp-mm-fechar svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.4;
    pointer-events: none;
}
#srp-medicao-modal .srp-mm-fechar:hover {
    background: #E8C26E;
    border-color: #E8C26E;
    color: #0B1612;
    box-shadow:
        0 0 0 4px rgba(232, 194, 110, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
#srp-medicao-modal .srp-mm-fechar:active {
    transform: scale(0.94);
}
#srp-medicao-modal .srp-mm-fechar:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #060C0A,
        0 0 0 6px #E8C26E;
}

/* v130 — Body scrollável: tudo que NÃO é header nem footer entra aqui. */
#srp-medicao-modal .srp-mm-body {
    flex: 1 1 auto;
    min-height: 0;          /* permite flex shrink corretamente */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
/* Scrollbar dourada consistente com o resto do painel */
#srp-medicao-modal .srp-mm-body::-webkit-scrollbar { width: 8px; }
#srp-medicao-modal .srp-mm-body::-webkit-scrollbar-track {
    background: rgba(212, 173, 90, 0.04);
}
#srp-medicao-modal .srp-mm-body::-webkit-scrollbar-thumb {
    background: rgba(212, 173, 90, 0.32);
    border-radius: 4px;
}
#srp-medicao-modal .srp-mm-body::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 173, 90, 0.55);
}

#srp-medicao-modal .srp-mm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 18px 24px;
    flex-shrink: 0;       /* nunca encolhe os cards */
}
#srp-medicao-modal .srp-mm-stat-card {
    background: #142822;
    border-radius: 6px;
    padding: 12px 14px;
    border-left: 2px solid rgba(212, 173, 90, 0.50);
    min-width: 0;
}
#srp-medicao-modal .srp-mm-stat-card[data-stat="distancia"] { border-left-color: #D4AD5A; }
#srp-medicao-modal .srp-mm-stat-card[data-stat="area"]      { border-left-color: #43A047; }
#srp-medicao-modal .srp-mm-stat-card[data-stat="perimetro"] { border-left-color: #E8C26E; }
#srp-medicao-modal .srp-mm-stat--up      { border-left-color: #43E97B !important; }
#srp-medicao-modal .srp-mm-stat--down    { border-left-color: #FF5C5C !important; }
#srp-medicao-modal .srp-mm-stat--max     { border-left-color: #4A90E2 !important; }
#srp-medicao-modal .srp-mm-stat--min     { border-left-color: #9CAFA2 !important; }

#srp-medicao-modal .srp-mm-stat-lbl {
    font-size: 9.5px;
    color: #7E8E84;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}
#srp-medicao-modal .srp-mm-stat-val {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 20px;
    color: #F2EDE0;
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: -0.01em;
    word-break: break-word;
}
#srp-medicao-modal .srp-mm-stat--up .srp-mm-stat-val   { color: #43E97B; }
#srp-medicao-modal .srp-mm-stat--down .srp-mm-stat-val { color: #FF5C5C; }

#srp-medicao-modal .srp-mm-chart-section {
    /* v215 - `flex: 1 1 auto` REMOVIDO. Era a raiz do bug de
       sobreposição: num flex column, este bloco crescia para tomar o
       espaço livre e passava por cima dos controles de giro da malha,
       que ficavam inalcançáveis. Agora as duas vistas moram em abas e
       nenhuma disputa altura com a outra. */
    padding: 8px 24px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#srp-medicao-modal .srp-mm-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 10px;
    gap: 10px;
    flex-wrap: wrap;
}
#srp-medicao-modal .srp-mm-chart-title {
    font-size: 10.5px;
    color: #D4AD5A;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}
#srp-medicao-modal .srp-mm-chart-hint {
    font-size: 10.5px;
    color: #7E8E84;
    font-style: italic;
}
#srp-medicao-modal .srp-mm-chart-body {
    background: #142822;
    border-radius: 8px;
    border: 1px solid rgba(212, 173, 90, 0.12);
    padding: 16px 18px;
    flex: 1 1 auto;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#srp-medicao-modal .srp-mm-chart-status {
    font-size: 12.5px;
    color: #9CAFA2;
    text-align: center;
}
#srp-medicao-modal .srp-mm-chart-wrap {
    width: 100%;
    height: 100%;
    min-height: 220px;
}
#srp-medicao-modal .srp-mm-chart-wrap svg {
    /* v128 — Garante que o SVG do perfil de elevação NUNCA overflow vertical.
       v130 — Mantida; agora rodando dentro de .srp-mm-body que tem overflow:auto,
       então mesmo se o SVG quisesse crescer, o body absorveria sem cortar. */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}
#srp-medicao-modal .srp-mm-chart-wrap .srp-perfil-inner {
    max-height: 100%;
    overflow: visible;
}

/* v130 — FOOTER sticky no base, sempre visível com ações */
#srp-medicao-modal .srp-mm-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(212, 173, 90, 0.18);
    background: rgba(15, 38, 32, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-wrap: wrap;
    flex-shrink: 0;
    border-radius: 0 0 14px 14px;
}
#srp-medicao-modal .srp-mm-footer-spacer {
    flex: 1 1 auto;
}
#srp-medicao-modal .srp-mm-btn {
    background: transparent;
    border: 1px solid rgba(212, 173, 90, 0.32);
    color: #C4D2C8;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    min-height: 38px;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}
#srp-medicao-modal .srp-mm-btn:hover {
    background: rgba(212, 173, 90, 0.12);
    border-color: rgba(212, 173, 90, 0.55);
    color: #F2EDE0;
}
#srp-medicao-modal .srp-mm-btn:active {
    transform: scale(0.97);
}
#srp-medicao-modal .srp-mm-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #060C0A, 0 0 0 4px rgba(232, 194, 110, 0.75);
}
#srp-medicao-modal .srp-mm-btn-primary {
    background: #3FA34D;
    border-color: #3FA34D;
    color: #fff;
}
#srp-medicao-modal .srp-mm-btn-primary:hover {
    background: #5BC56B;
    border-color: #5BC56B;
    color: #fff;
}
#srp-medicao-modal .srp-mm-btn-danger {
    border-color: rgba(255, 92, 92, 0.42);
    color: #FF9C9C;
}
#srp-medicao-modal .srp-mm-btn-danger:hover {
    background: rgba(255, 92, 92, 0.12);
    border-color: rgba(255, 92, 92, 0.68);
    color: #FF7A7A;
}

/* v130 — Tablet e abaixo: gap reduzido nos cards, padding compacto */
@media (max-width: 960px) {
    #srp-medicao-modal {
        width: 96vw;
        height: auto;          /* v210.1 - encolhe ate o conteudo */
        max-height: 94vh;
    }
    #srp-medicao-modal .srp-mm-head { padding: 14px 18px; }
    #srp-medicao-modal .srp-mm-titulo { font-size: 19px; }
    #srp-medicao-modal .srp-mm-stats { padding: 14px 18px; }
    #srp-medicao-modal .srp-mm-chart-section { padding: 6px 18px 16px; }
    #srp-medicao-modal .srp-mm-footer { padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) {
    /* v130 — Mobile portrait: modal toma toda a viewport. Grid de cards
       passa a 2 colunas, footer empilha botões em duas linhas se necessário.
       Header e footer permanecem sticky; o body absorve o scroll. */
    #srp-medicao-modal {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;     /* respeita a barra de URL do mobile */
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }
    #srp-medicao-modal.is-open {
        transform: none;
    }
    #srp-medicao-modal .srp-mm-head {
        padding: 12px 14px;
        border-radius: 0;
        gap: 10px;
    }
    #srp-medicao-modal .srp-mm-titulo { font-size: 17px; }
    #srp-medicao-modal .srp-mm-meta { font-size: 11px; gap: 6px; }
    #srp-medicao-modal .srp-mm-fechar {
        /* v130 — Mantém 44×44 (touch target), mas reposiciona pra ficar
           mais próximo da borda. Hitbox visível e identificável. */
        width: 44px;
        height: 44px;
    }
    #srp-medicao-modal .srp-mm-stats {
        padding: 12px 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #srp-medicao-modal .srp-mm-stat-val { font-size: 17px; }
    #srp-medicao-modal .srp-mm-chart-section { padding: 4px 14px 12px; }
    #srp-medicao-modal .srp-mm-chart-body { padding: 12px; min-height: 200px; }
    #srp-medicao-modal .srp-mm-chart-wrap { min-height: 180px; }
    #srp-medicao-modal .srp-mm-footer {
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        gap: 6px;
    }
    #srp-medicao-modal .srp-mm-footer .srp-mm-btn {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        padding: 10px 8px;
        font-size: 12px;
    }
    #srp-medicao-modal .srp-mm-footer-spacer {
        display: none;
    }
}

/* v130 — Landscape mobile (alturas pequenas): grid em 4 colunas pra dar
   espaço ao chart, padding vertical reduzido. */
@media (max-height: 560px) and (orientation: landscape) {
    #srp-medicao-modal .srp-mm-head { padding: 10px 18px; }
    #srp-medicao-modal .srp-mm-titulo { font-size: 16px; }
    #srp-medicao-modal .srp-mm-stats {
        padding: 10px 18px;
        gap: 6px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #srp-medicao-modal .srp-mm-stat-card { padding: 8px 10px; }
    #srp-medicao-modal .srp-mm-stat-val { font-size: 15px; }
    #srp-medicao-modal .srp-mm-chart-body { min-height: 140px; padding: 10px; }
    #srp-medicao-modal .srp-mm-chart-wrap { min-height: 130px; }
    #srp-medicao-modal .srp-mm-footer { padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* v130 — Respeita preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    #srp-medicao-modal,
    #srp-medicao-modal-backdrop,
    #srp-medicao-modal .srp-mm-fechar,
    #srp-medicao-modal .srp-mm-btn {
        transition-duration: 0.01ms !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   v161 — LENTE PLUVIOMÉTRICA
   ────────────────────────────────────────────────────────────────────────
   Toggle entra no #srp-overlay-selector como .srp-ov-btn.srp-ov-btn-lente.
   Painel ancora à direita (290px no desktop), barra superior compacta no
   mobile (v165 — antes era drawer inferior que cobria o mapa).
   Legenda fica solta no canto inferior esquerdo do mapa.
   ════════════════════════════════════════════════════════════════════════ */

.srp-ov-btn.srp-ov-btn-lente {
    border-color: rgba(212, 173, 90, 0.40);
}
.srp-ov-btn.srp-ov-btn-lente.ativo {
    background: rgba(212, 173, 90, 0.22);
    color:      #D4AD5A;
    border-color: rgba(212, 173, 90, 0.65);
}

/* ── Painel lateral direito ──────────────────────────────────────────── */
#srp-lente-painel {
    position:          absolute;
    top:               12px;
    right:             12px;
    bottom:            12px;
    width:             290px;
    max-width:         calc(100vw - 24px);
    background:        rgba(6, 12, 10, 0.92);
    backdrop-filter:   blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:            1px solid rgba(212, 173, 90, 0.28);
    border-radius:     10px;
    z-index:           450;
    color:             #F4EDE0;
    font-family:       'Inter', ui-sans-serif, system-ui, sans-serif;
    display:           none;
    flex-direction:    column;
    overflow:          hidden;
    box-shadow:        0 6px 28px rgba(0, 0, 0, 0.55);
    transform:         translateX(8px);
    opacity:           0;
    transition:        transform 0.22s ease, opacity 0.22s ease;
}
#srp-lente-painel.aberto {
    display:           flex;
    transform:         translateX(0);
    opacity:           1;
}

.srp-lente-header {
    display:           flex;
    justify-content:   space-between;
    align-items:       flex-start;
    gap:               8px;
    padding:           14px 14px 10px;
    border-bottom:     1px solid rgba(212, 173, 90, 0.16);
    background:        linear-gradient(180deg, rgba(212, 173, 90, 0.06), transparent);
}
.srp-lente-titulo {
    font-size:         14px;
    font-weight:       500;
    color:             #D4AD5A;
    letter-spacing:    0.02em;
    margin:            0;
}
.srp-lente-meta {
    font-size:         10px;
    color:             rgba(244, 237, 224, 0.55);
    letter-spacing:    0.6px;
    text-transform:    uppercase;
    margin-top:        3px;
}
#srp-lente-fechar {
    background:        transparent;
    border:            1px solid rgba(212, 173, 90, 0.25);
    border-radius:     6px;
    color:             rgba(244, 237, 224, 0.7);
    width:             26px;
    height:            26px;
    padding:           0;
    cursor:            pointer;
    flex:              0 0 auto;
    line-height:       1;
    font-size:         14px;
    transition:        background 0.15s ease, color 0.15s ease;
}
#srp-lente-fechar:hover {
    background:        rgba(212, 173, 90, 0.18);
    color:             #D4AD5A;
}

.srp-lente-body {
    padding:           12px 14px 14px;
    overflow-y:        auto;
    overflow-x:        hidden;
    flex:              1 1 auto;
    display:           flex;
    flex-direction:    column;
    gap:               12px;
    scrollbar-width:   thin;
    scrollbar-color:   rgba(212, 173, 90, 0.35) transparent;
}
.srp-lente-body::-webkit-scrollbar       { width: 8px; }
.srp-lente-body::-webkit-scrollbar-track { background: transparent; }
.srp-lente-body::-webkit-scrollbar-thumb { background: rgba(212, 173, 90, 0.30); border-radius: 4px; }
.srp-lente-body::-webkit-scrollbar-thumb:hover { background: rgba(212, 173, 90, 0.55); }

.srp-lente-status {
    background:        rgba(212, 173, 90, 0.10);
    color:             #D4AD5A;
    padding:           8px 10px;
    border-radius:     6px;
    font-size:         11px;
    border:            1px solid rgba(212, 173, 90, 0.25);
}

/* ── Métrica segmented + Período tabs ────────────────────────────────── */
.srp-lente-metric,
.srp-lente-tabs {
    display:           flex;
    gap:               2px;
    background:        rgba(212, 173, 90, 0.06);
    padding:           3px;
    border-radius:     6px;
    border:            1px solid rgba(212, 173, 90, 0.14);
}
.srp-lente-metric-opt,
.srp-lente-tab {
    flex:              1;
    background:        transparent;
    border:            0;
    color:             rgba(244, 237, 224, 0.55);
    font-size:         11px;
    padding:           5px 8px;
    border-radius:     4px;
    cursor:            pointer;
    font-variant-numeric: tabular-nums;
    font-family:       inherit;
    transition:        background 0.15s ease, color 0.15s ease;
}
.srp-lente-metric-opt:hover,
.srp-lente-tab:hover {
    color:             rgba(244, 237, 224, 0.85);
}
.srp-lente-metric-opt.is-active,
.srp-lente-tab.is-active {
    background:        rgba(212, 173, 90, 0.20);
    color:             #D4AD5A;
    font-weight:       500;
}

/* ── Stats ───────────────────────────────────────────────────────────── */
.srp-lente-stats {
    display:           flex;
    gap:               8px;
    background:        rgba(12, 26, 20, 0.55);
    border:            1px solid rgba(212, 173, 90, 0.16);
    border-radius:     8px;
    padding:           10px 12px;
}
.srp-lente-stat {
    flex:              1;
    min-width:         0;
}
.srp-lente-stat-lbl {
    font-size:         9px;
    letter-spacing:    0.8px;
    text-transform:    uppercase;
    color:             #D4AD5A;
    margin-bottom:     3px;
}
.srp-lente-stat-val {
    font-size:         16px;
    font-weight:       500;
    font-variant-numeric: tabular-nums;
    color:             rgba(244, 237, 224, 0.95);
    line-height:       1.1;
}

/* ── Cards com listas top 5 ──────────────────────────────────────────── */
.srp-lente-card {
    background:        rgba(12, 26, 20, 0.55);
    border:            1px solid rgba(212, 173, 90, 0.16);
    border-radius:     8px;
    padding:           10px 10px 6px;
}
.srp-lente-card-title {
    font-size:         10px;
    letter-spacing:    1.2px;
    text-transform:    uppercase;
    font-weight:       500;
    margin-bottom:     8px;
    display:           flex;
    align-items:       center;
    gap:               6px;
}
.srp-lente-card-title-pos { color: #1baf7a; }
.srp-lente-card-title-neg { color: #e34948; }
.srp-lente-card-dot {
    width:             8px;
    height:            8px;
    border-radius:     50%;
}

.srp-lente-lista {
    display:           flex;
    flex-direction:    column;
}
.srp-lente-pin-row {
    display:           flex;
    align-items:       center;
    gap:               8px;
    padding:           6px 4px;
    border-bottom:     1px solid rgba(244, 237, 224, 0.05);
    cursor:            pointer;
    transition:        background 0.12s ease;
    border-radius:     4px;
}
.srp-lente-pin-row:last-child { border-bottom: 0; }
.srp-lente-pin-row:hover,
.srp-lente-pin-row:focus-visible {
    background:        rgba(212, 173, 90, 0.08);
    outline:           none;
}
.srp-lente-pin-rank {
    width:             20px;
    height:            20px;
    border-radius:     50%;
    display:           flex;
    align-items:       center;
    justify-content:   center;
    font-size:         10px;
    font-weight:       600;
    flex:              0 0 auto;
    font-family:       inherit;
}
.srp-lente-pin-info {
    flex:              1 1 auto;
    min-width:         0;
    display:           flex;
    flex-direction:    column;
    gap:               1px;
}
.srp-lente-pin-name {
    font-size:         12px;
    color:             rgba(244, 237, 224, 0.95);
    white-space:       nowrap;
    overflow:          hidden;
    text-overflow:     ellipsis;
}
.srp-lente-pin-meta {
    font-size:         10px;
    color:             rgba(244, 237, 224, 0.5);
    font-variant-numeric: tabular-nums;
}
.srp-lente-pin-anom {
    font-size:         12px;
    font-weight:       500;
    font-variant-numeric: tabular-nums;
    flex:              0 0 auto;
}

.srp-lente-fonte {
    font-size:         10px;
    color:             rgba(244, 237, 224, 0.5);
    line-height:       1.45;
    padding:           4px 2px 2px;
}
.srp-lente-fonte strong {
    color:             rgba(244, 237, 224, 0.78);
    font-weight:       500;
}

/* ── Legenda gradiente ───────────────────────────────────────────────── */
#srp-lente-legenda {
    position:          absolute;
    bottom:            18px;
    left:              18px;
    background:        rgba(6, 12, 10, 0.88);
    backdrop-filter:   blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border:            1px solid rgba(212, 173, 90, 0.28);
    border-radius:     6px;
    padding:           10px 12px 8px;
    z-index:           450;
    width:             240px;
    max-width:         calc(100% - 36px);
    font-family:       'Inter', ui-sans-serif, system-ui, sans-serif;
    color:             #F4EDE0;
    display:           none;
}
#srp-lente-legenda.aberto { display: block; }

.srp-lente-legenda-titulo {
    font-size:         9px;
    letter-spacing:    1px;
    color:             #D4AD5A;
    margin-bottom:     6px;
    font-weight:       500;
}
.srp-lente-legenda-rampa {
    height:            8px;
    border-radius:     3px;
    background:        linear-gradient(to right, #f0c14b, #c43a3a);
    margin-bottom:     4px;
}
.srp-lente-legenda-eixo {
    display:           flex;
    justify-content:   space-between;
    font-size:         9px;
    color:             rgba(244, 237, 224, 0.7);
    font-variant-numeric: tabular-nums;
}

/* ── Ícone do pin no modo Lente — wrapper sem o estilo do pin original ── */
.srp-pin-lente-v161 {
    width:             32px;
    height:            32px;
    line-height:       0;
}
.srp-pin-lente-v161 svg {
    display:           block;
    overflow:          visible;  /* halo extrapola o 32x32 */
}

/* ── Mobile (≤720px) — v165: barra superior compacta ────────────────────
   A v161 colocava o painel como drawer inferior tomando até 62vh, o que
   inviabilizava o uso real em mobile (reportado por Michel via screenshot
   30/06/2026 12:15). A v165 segue o padrão da ferramenta de Medidas: barra
   compacta no topo com APENAS os controles essenciais (métrica + período +
   fechar). Os dados detalhados (KPIs, listas top 5, fonte) ficam ocultos
   em mobile — a informação está embutida no próprio mapa: cor do pin =
   anomalia, halo + badge numerado = posição no top 5, legenda gradiente
   no canto inferior esquerdo = escala. */
@media (max-width: 720px) {
    #srp-lente-painel {
        top:           84px;            /* logo abaixo do header AgriBusiness */
        right:         12px;
        left:          12px;
        bottom:        auto;
        width:         auto;            /* expande com left/right */
        max-width:     none;
        max-height:    none;
        border-radius: 10px;
        border:        1px solid rgba(212, 173, 90, 0.45);
        transform:     translateY(-8px);
    }
    #srp-lente-painel.aberto { transform: translateY(0); }

    /* Header compacto — título + meta inline, fechar no canto */
    .srp-lente-header {
        padding:       9px 10px 7px 12px;
    }
    .srp-lente-titulo {
        font-size:     13px;
        display:       inline-flex;
        align-items:   center;
        gap:           6px;
    }
    .srp-lente-meta {
        display:       inline;
        font-size:     9.5px;
        margin-top:    0;
        margin-left:   8px;
        opacity:       0.55;
    }
    /* Junta título e meta na mesma linha visual */
    .srp-lente-header > div:first-child {
        display:       flex;
        flex-wrap:     wrap;
        align-items:   baseline;
        gap:           4px 8px;
    }

    /* Body sem scroll vertical em mobile — controles cabem direto */
    .srp-lente-body {
        padding:       8px 10px 10px;
        gap:           6px;
        overflow:      visible;
    }

    /* Métrica + período menores, tap targets confortáveis */
    .srp-lente-metric-opt,
    .srp-lente-tab {
        padding:       6px 8px;
        font-size:     11px;
    }

    /* OCULTAR todos os dados detalhados em mobile.
       O foco é o mapa. Quem quiser detalhes numéricos toca no pin
       e usa o popup padrão da propriedade. */
    .srp-lente-stats,
    .srp-lente-card,
    .srp-lente-fonte {
        display: none !important;
    }
    /* Status (Carregando / Erro) fica visível mas compacto */
    .srp-lente-status {
        padding:       5px 8px;
        font-size:     10.5px;
    }

    /* Legenda compacta no canto inferior esquerdo — espaço livre porque
       o painel agora vive no topo, não no rodapé */
    #srp-lente-legenda {
        bottom:        72px;        /* acima do FAB selector do mapa */
        left:          12px;
        width:         170px;
        padding:       6px 9px 5px;
    }
    .srp-lente-legenda-titulo {
        font-size:     8.5px;
        margin-bottom: 4px;
    }
    .srp-lente-legenda-rampa {
        height:        6px;
    }
    .srp-lente-legenda-eixo {
        font-size:     8.5px;
    }
}

@media (max-width: 380px) {
    .srp-lente-pin-name { font-size: 11px; }
    .srp-lente-pin-meta { font-size: 9px; }
    .srp-lente-pin-anom { font-size: 11px; }
}


/* ═══════════════════════════════════════════════════════════════════
   v144 — DESTAQUE VISUAL DO PIN DE ÂNCORA (?p= ou ?pin=)
   ─────────────────────────────────────────────────────────────────
   Quando o usuário chega ao mapa via deep link (link compartilhado),
   o pin alvo recebe a classe `srp-anchor-highlight` por 8 segundos
   após o flyTo. Visual: glow dourado pulsante ao redor do marker
   pra identificar inequivocamente qual é a propriedade do link
   (briefing 28/jun/2026 do Michel: "a propriedade receba um destaque
   identificando perfeitamente qual é a propriedade").
   ═══════════════════════════════════════════════════════════════ */
.srp-anchor-highlight {
	animation: srp-anchor-pulse 1.2s ease-in-out infinite;
	z-index: 1000 !important;
}
@keyframes srp-anchor-pulse {
	0%, 100% {
		filter: drop-shadow(0 0 0 rgba(212, 173, 90, 0.0))
		        drop-shadow(0 0 6px rgba(212, 173, 90, 0.5));
		transform: scale(1);
	}
	50% {
		filter: drop-shadow(0 0 14px rgba(212, 173, 90, 1.0))
		        drop-shadow(0 0 22px rgba(232, 194, 110, 0.7));
		transform: scale(1.15);
	}
}

/* ═══════════════════════════════════════════════════════════════════
   v144 — TOAST DE FEEDBACK QUANDO O PIN NÃO É ENCONTRADO
   ─────────────────────────────────────────────────────────────────
   Aparece bottom-right quando o anchor processor não consegue
   resolver o ?p= ou ?pin= em nenhum pin do banco do GeoAgro SRP.
   Usuário entende que o link está desatualizado ou aponta pra outra
   base (PindaTour, etc) em vez de ficar perdido num mapa sem destaque.
   ═══════════════════════════════════════════════════════════════ */
.srp-anchor-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100000;
	max-width: 380px;
	padding: 14px 16px;
	background: #060C0A;
	border: 1px solid #D4AD5A;
	border-left: 4px solid #D4AD5A;
	border-radius: 8px;
	color: #F2EDE0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: auto;
}
.srp-anchor-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.srp-anchor-toast > svg {
	color: #D4AD5A;
	flex-shrink: 0;
	margin-top: 1px;
}
.srp-anchor-toast-msg {
	flex: 1;
	min-width: 0;
}
.srp-anchor-toast-msg strong {
	color: #E8C26E;
	font-weight: 600;
}
.srp-anchor-toast-msg small {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	color: rgba(242, 237, 224, 0.65);
	font-style: italic;
}
.srp-anchor-toast-close {
	background: transparent;
	border: none;
	color: rgba(242, 237, 224, 0.55);
	font-size: 22px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.15s ease;
}
.srp-anchor-toast-close:hover {
	color: #F2EDE0;
}
@media (max-width: 560px) {
	.srp-anchor-toast {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   v176 — MODAIS DE DADOS: estados de carga/erro + lista de
   patrocinadores (somente leitura). Complementa .srp-dados-* v92.
═══════════════════════════════════════════════════════════════ */
.srp-dados-loading{padding:38px 20px;text-align:center;color:rgba(245,239,227,.55);font-size:13px}
.srp-dados-erro{padding:30px 20px;text-align:center;color:#F09595;font-size:13px}
.srp-dados-retry{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid rgba(212,173,90,.5);color:#D4AD5A;font-size:12px;padding:4px 14px;border-radius:14px;cursor:pointer;margin-left:8px;font-family:inherit}
.srp-dados-retry:hover{background:rgba(212,173,90,.12)}

.srp-patroc-lista{padding:4px 0}
.srp-patroc-row{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.srp-patroc-row:last-child{border-bottom:0}
.srp-patroc-ordem{width:22px;flex:none;color:rgba(245,239,227,.4);font-size:12px;text-align:center}
.srp-patroc-thumb{width:56px;height:32px;flex:none;background:rgba(212,173,90,.12);border:1px solid rgba(212,173,90,.3);border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.srp-patroc-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.srp-patroc-thumb-vazio{font-size:14px;opacity:.5}
.srp-patroc-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;color:#ece5d3;font-size:13px}
.srp-patroc-nome strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srp-patroc-slogan{font-size:11px;color:rgba(236,229,211,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srp-patroc-tema{flex:none;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(212,173,90,.8);border:1px solid rgba(212,173,90,.3);border-radius:10px;padding:2px 8px}
@media(max-width:640px){
  .srp-patroc-row{flex-wrap:wrap;gap:8px 12px}
  .srp-patroc-tema{order:5}
}

/* ============================================================
   v189 — SEÇÃO DE BAIRROS NA LEGENDA
   Bairros oficiais da Prefeitura de Pindamonhangaba.
   Clicar filtra os pins, igual às categorias de atividade.
   ============================================================ */
/* v195 — ROTULO DE BAIRRO SOBRE O MAPA.
   Mesma linguagem do rotulo do municipio, um degrau abaixo na
   hierarquia: menor, mais discreto, nao clicavel. */
.srp-bairro-rotulo {
    background: none !important;
    border: 0 !important;
    white-space: nowrap;
    pointer-events: none;
}
.srp-bairro-rotulo span {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(11, 22, 18, .72);
    color: #F5EFE3;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    transform: translate(-50%, -50%);
}
.srp-bairro-rotulo.srp-oculto { display: none; }

/* v195 — o bloco de bairros saiu da legenda. As regras abaixo ficam
   apenas para nao quebrar instalacoes que ainda tenham HTML antigo em
   cache; podem ser removidas em uma limpeza futura. */
.srp-bairros-bloco {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 8px;
    padding-top: 8px;
}
.srp-bairros-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px 6px;
}
.srp-bairros-titulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.srp-bairros-contagem {
    font-size: 11px;
    opacity: .7;
    white-space: nowrap;
}
.srp-bairros-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 190px;
    overflow-y: auto;
}
.srp-bairro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.srp-bairro-item:hover { background: rgba(255,255,255,.08); }
.srp-bairro-item.ativo {
    background: rgba(200,168,75,.18);
    box-shadow: inset 2px 0 0 #c8a84b;
}
/* Quadradinho cheio = área desenhada; contorno tracejado = sem área. */
.srp-bairro-marca {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #c8a84b;
    flex-shrink: 0;
}
.srp-bairro-marca.vazio {
    background: transparent;
    border: 1px dashed rgba(255,255,255,.45);
}
.srp-bairro-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srp-bairro-qtd {
    font-size: 11px;
    opacity: .65;
    flex-shrink: 0;
}


/* ============================================================
   v190 — SINAL DE COTAÇÃO VENCIDA NO TERMINAL DE COMMODITIES
   Discreto por requisito: um ponto de 7px ao lado do nome,
   com tooltip. Sem pop-up, sem modal, sem som.
   ============================================================ */
.srp-cepea-flag {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 7px;
    vertical-align: middle;
    cursor: help;
}
.srp-cepea-flag--vencida { background: #e24b4a; }
.srp-cepea-flag--atencao { background: #ef9f27; }

/* ═══════════════════════════════════════════════════════════════
   v210 — BLOCOS DO PAINEL DE MEDIÇÃO
   ───────────────────────────────────────────────────────────────
   Os sete cartões em fileira única viraram três blocos com assuntos
   distintos: o que foi demarcado, como é o terreno, e como ele varia
   ao longo da rota. Num celular a fileira única virava uma coluna de
   sete que empurrava o gráfico para fora da tela.
   ═══════════════════════════════════════════════════════════════ */

#srp-medicao-modal .srp-mm-bloco {
    padding: 14px 24px 4px;
}
#srp-medicao-modal .srp-mm-bloco-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #D4AD5A;
    margin-bottom: 10px;
}
#srp-medicao-modal .srp-mm-bloco-fonte {
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
    color: rgba(232, 240, 234, .45);
}

/* O número que o operador veio buscar. */
#srp-medicao-modal .srp-mm-hero {
    background: #142822;
    border-left: 3px solid #D4AD5A;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
#srp-medicao-modal .srp-mm-hero-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 30px;
    line-height: 1.05;
    color: #F2F7F3;
    word-break: break-word;
}
#srp-medicao-modal .srp-mm-hero-sub {
    font-size: 13.5px;
    color: rgba(232, 240, 234, .68);
    margin-top: 5px;
}

#srp-medicao-modal .srp-mm-stats--perfil { padding-top: 0; }
#srp-medicao-modal .srp-mm-stat-sub {
    font-size: 11px;
    color: rgba(232, 240, 234, .45);
    margin-top: 2px;
}

/* Nivelamento */
#srp-medicao-modal .srp-mm-niv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
#srp-medicao-modal .srp-mm-niv-grid + .srp-mm-niv-grid { margin-top: 10px; }
#srp-medicao-modal .srp-mm-niv-carregando {
    font-size: 13px;
    color: rgba(232, 240, 234, .55);
    padding: 8px 0;
}

/* O aviso de recusa. Cor de atenção, não de erro: nada falhou — o
   modelo de terreno é que não enxerga nessa escala. */
#srp-medicao-modal .srp-mm-aviso {
    background: rgba(212, 173, 90, .10);
    border-left: 3px solid #D4AD5A;
    border-radius: 7px;
    padding: 11px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(240, 232, 210, .92);
}
#srp-medicao-modal .srp-mm-aviso strong { color: #E8C26E; }
#srp-medicao-modal .srp-mm-aviso--nota {
    margin-top: 10px;
    font-size: 11.5px;
    background: rgba(232, 240, 234, .04);
    border-left-color: rgba(212, 173, 90, .45);
}

@media (max-width: 768px) {
    #srp-medicao-modal .srp-mm-bloco { padding: 12px 18px 2px; }
    #srp-medicao-modal .srp-mm-hero-val { font-size: 26px; }
}

@media (max-width: 480px) {
    #srp-medicao-modal .srp-mm-bloco { padding: 10px 14px 2px; }
    #srp-medicao-modal .srp-mm-hero { padding: 12px 13px; }
    #srp-medicao-modal .srp-mm-hero-val { font-size: 23px; }
    #srp-medicao-modal .srp-mm-hero-sub { font-size: 12.5px; }

    /* Duas colunas, não uma: em 360 px os cartões de nivelamento ainda
       cabem lado a lado, e uma coluna só faria a seção ocupar uma tela
       inteira de rolagem. */
    #srp-medicao-modal .srp-mm-niv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #srp-medicao-modal .srp-mm-aviso { font-size: 12px; padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   v211 — ENTRADA DE COTAS MEDIDAS EM CAMPO
   ═══════════════════════════════════════════════════════════════ */

#srp-medicao-modal .srp-mm-cotas-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
#srp-medicao-modal .srp-mm-cotas-tit {
    font-size: 13px; color: #E8C26E; font-weight: 600;
}
#srp-medicao-modal .srp-mm-cotas-tipo {
    display: inline-flex; border: 1px solid rgba(212,173,90,.35);
    border-radius: 7px; overflow: hidden;
}
#srp-medicao-modal .srp-mm-cota-btn {
    background: transparent; border: 0; border-radius: 0;
    color: rgba(232,240,234,.6); font-size: 11.5px; padding: 5px 12px; cursor: pointer;
}
#srp-medicao-modal .srp-mm-cota-btn.is-on { background: #1E5C30; color: #fff; }

#srp-medicao-modal .srp-mm-cotas-dica {
    font-size: 12px; line-height: 1.5; color: rgba(232,240,234,.62); margin: 0 0 10px;
}

#srp-medicao-modal .srp-mm-cotas-colar {
    display: grid; gap: 6px; margin-bottom: 12px;
}
#srp-medicao-modal .srp-mm-cotas-colar label {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(232,240,234,.45);
}
#srp-medicao-modal .srp-mm-cotas-colar textarea {
    width: 100%; background: #0B1612; border: 1px solid rgba(212,173,90,.28);
    color: #F2EDE0; border-radius: 7px; padding: 8px 10px;
    font-family: ui-monospace, Menlo, monospace; font-size: 13px; resize: vertical;
}
#srp-medicao-modal .srp-mm-cotas-colar textarea:focus {
    outline: none; border-color: #D4AD5A;
}
#srp-medicao-modal .srp-mm-cotas-colar button { justify-self: start; }

/* A grade cresce com o número de vértices. Em 27 campos, colunas
   estreitas e altura fixa importam mais que folga: o operador precisa
   ver a lista inteira sem rolar duas telas. */
#srp-medicao-modal .srp-mm-cotas-grade {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    max-height: 240px; overflow-y: auto; padding-right: 4px;
}
#srp-medicao-modal .srp-mm-cota-campo { display: flex; flex-direction: column; gap: 3px; }
#srp-medicao-modal .srp-mm-cota-campo label {
    font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
    color: rgba(232,240,234,.45);
}
#srp-medicao-modal .srp-mm-cota-campo input {
    background: #0B1612; border: 1px solid rgba(212,173,90,.25);
    color: #F2EDE0; border-radius: 6px; padding: 6px 8px;
    font-family: ui-monospace, Menlo, monospace; font-size: 13px; width: 100%;
}
#srp-medicao-modal .srp-mm-cota-campo input:focus { outline: none; border-color: #D4AD5A; }
#srp-medicao-modal .srp-mm-cota-campo input.is-vazio { border-style: dashed; }

#srp-medicao-modal .srp-mm-cotas-acoes {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
#srp-medicao-modal .srp-mm-cotas-contagem {
    font-size: 12px; color: rgba(232,240,234,.55); margin-right: auto;
}
#srp-medicao-modal .srp-mm-btn-ok {
    background: #2F8F4A; border-color: #2F8F4A; color: #fff;
}

/* Gráfico dos dois eixos */
#srp-medicao-modal .srp-mm-eixos-legenda {
    display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
    font-size: 11.5px; color: rgba(232,240,234,.55);
}
#srp-medicao-modal .srp-mm-eixos-legenda i {
    display: inline-block; width: 16px; height: 3px; vertical-align: middle;
    margin-right: 4px; font-style: normal;
}

@media (max-width: 480px) {
    #srp-medicao-modal .srp-mm-cotas-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 200px;
    }
}

/* v213 — malha topográfica. Fundo branco dentro do painel escuro: é
   planta técnica, e planta técnica tem de sobreviver à impressora. */
#srp-medicao-modal #srp-mm-malha-corpo svg {
    background: #ffffff;
    border-radius: 8px;
}

/* v214 — controle de giro da malha */
#srp-medicao-modal .srp-mm-malha-ctrl {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
#srp-medicao-modal .srp-mm-malha-ctrl[hidden] { display: none; }
#srp-medicao-modal .srp-mm-malha-ctrl label {
    font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    color: #D4AD5A; white-space: nowrap;
}
#srp-medicao-modal .srp-mm-malha-ctrl input[type="range"] { flex: 1; max-width: 240px; }
#srp-medicao-modal .srp-mm-malha-ctrl output {
    font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
    color: rgba(232,240,234,.75); min-width: 3.2em;
}
#srp-medicao-modal .srp-mm-sol {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
    font-size: 12.5px; color: rgba(232,240,234,.7);
}
#srp-medicao-modal .srp-mm-sol b { color: #F2F7F3; font-family: ui-monospace, Menlo, monospace; }


/* ═══════════════════════════════════════════════════════════════
   v215 — PAINEL DE VISUALIZAÇÃO UNIFICADO
   ═══════════════════════════════════════════════════════════════ */

#srp-medicao-modal .srp-mm-vis { padding: 12px 24px 6px; }

#srp-medicao-modal .srp-mm-vis-abas {
    display: flex; gap: 2px;
    border-bottom: 1px solid #24352a;
    margin-bottom: 11px;
}
#srp-medicao-modal .srp-mm-vis-abas .srp-mm-vis-aba,
#srp-medicao-modal .srp-mm-vis-abas .srp-mm-vis-aba:hover,
#srp-medicao-modal .srp-mm-vis-abas .srp-mm-vis-aba:focus {
    -webkit-appearance: none; appearance: none;
    background: transparent; background-image: none;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    box-shadow: none; text-shadow: none;
    padding: 10px 16px; margin: 0;
    font-family: inherit; font-size: 13.5px; font-weight: 400;
    letter-spacing: normal; text-transform: none;
    color: rgba(232,240,234,.55); cursor: pointer;
}
#srp-medicao-modal .srp-mm-vis-abas .srp-mm-vis-aba:hover { color: #F2F7F3; }
#srp-medicao-modal .srp-mm-vis-abas .srp-mm-vis-aba[aria-selected="true"] {
    color: #F2F7F3; border-bottom-color: #D4AD5A; font-weight: 600;
}

/* Os controles ficam ACIMA do desenho, não abaixo: assim nenhum
   crescimento do conteúdo pode empurrá-los para fora do alcance —
   que foi exatamente o que aconteceu na v214. */
#srp-medicao-modal .srp-mm-vis-ctrl {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-bottom: 11px;
}
#srp-medicao-modal .srp-mm-vis-ctrl[hidden] { display: none; }
#srp-medicao-modal .srp-mm-vis-ctrl label {
    font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
    color: #D4AD5A; white-space: nowrap;
}
#srp-medicao-modal .srp-mm-vis-ctrl input[type="range"] { width: 118px; }
#srp-medicao-modal .srp-mm-vis-ctrl output {
    font-family: ui-monospace, Menlo, monospace; font-size: 12px;
    color: rgba(232,240,234,.72); min-width: 3.6em;
}

#srp-medicao-modal .srp-mm-vis-painel[hidden] { display: none; }

#srp-medicao-modal .srp-mm-sol-agora {
    background: rgba(245,166,35,.12);
    border-left: 3px solid #F5A623;
    border-radius: 7px; padding: 9px 12px;
    font-size: 12.5px; line-height: 1.5;
    color: rgba(240,232,210,.92); margin-top: 9px;
}
#srp-medicao-modal .srp-mm-sol-agora strong { color: #F5C46E; }

@media (max-width: 640px) {
    #srp-medicao-modal .srp-mm-vis { padding: 10px 16px 4px; }
    #srp-medicao-modal .srp-mm-vis-ctrl input[type="range"] { width: 96px; }
    #srp-medicao-modal .srp-mm-vis-abas .srp-mm-vis-aba { padding: 9px 12px; font-size: 12.5px; }
}