/* ==========================================================================
   01. Base / Reset / Document
   ========================================================================== */

    html,
    body,
    #root,
    #map {
      height: 100%;
      margin: 0;
      font-family: 'Poppins', sans-serif;
      overflow: hidden;
      /* Prevent body scroll */
    }

    /* Scrollbar Styling */
    *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    *::-webkit-scrollbar-track {
      background: transparent;
    }

    *::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 10px;
    }

    *::-webkit-scrollbar-thumb:hover {
      background-color: #aaa;
    }

    

/* ==========================================================================
   02. Layout Principal
   ========================================================================== */

    #root {
      display: flex;
      width: 100%;
      height: 100%;
      /* SIDEBAR-FROSTED-OVERLAY-FIX-1: contexto de posicionamento para a sidebar
         overlay (.sidebar-glass position:absolute). #root preenche a viewport, então
         os filhos absolute/fixed existentes resolvem igual. */
      position: relative;
    }

    #map {
      flex: 1;
      height: 100%;
    }

/* ==========================================================================
   03. Leaflet Overrides
   ========================================================================== */

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip-container,
    .leaflet-tooltip,
    .leaflet-control-container .leaflet-control {
      transform: rotate(var(--icon-rotation, 0deg));
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Ensure tooltips and popups rotate relative to their anchor properly */
    .leaflet-tooltip {
      transform-origin: center;
    }

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip-container {
      transform-origin: center bottom;
    }

    /* Ensure pin creation popup appears above all UI elements */
    .leaflet-popup-pane {
      z-index: 200000 !important;
    }

    .leaflet-marker-icon.fav-marker {
      z-index: 1000 !important;
    }

    .leaflet-tile-pane {
      filter: saturate(var(--map-saturation, 100%));
    }

    #map:has(.leaflet-popup) {
      z-index: 100000 !important;
    }

/* ==========================================================================
   04. Sidebar, Listas e Cards
   ========================================================================== */

    

    /* Sidebar Header, Search & Filters */

    /* SIDEBAR-HEADER-PILL-1: header do título vira pill branco flutuando sobre o
       vidro da sidebar (antes: retângulo full-width com border-bottom). Margem
       lateral 14px alinha com o padding do .sidebar-body. SEM overflow:hidden —
       o .map-menu-popover é filho posicionado e seria cortado. */
    .sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      margin: 12px 14px 6px;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 999px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }

    /* ACCESS-GATE-UX-1: campo de senha do gate com botão mostrar/ocultar (sem inline estrutural). */
    .access-password-wrap {
      position: relative;
      width: 100%;
    }

    .access-password-toggle {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: transparent;
      border: none;
      color: #64748b;
      cursor: pointer;
    }

    .access-password-toggle:disabled {
      cursor: default;
    }

    /* ACCESS-GATE-UX-1: visual COMPARTILHADO entre o shell nativo (HTML, pré-React) e o
       AccessGate React, para a transição não ter mudança visual. Poppins com fallback de
       sistema para o primeiro paint não depender da fonte (Poppins pode carregar depois). */
    .access-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: #fafafa;
      font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }

    .access-card {
      width: 100%;
      max-width: 340px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      padding: 32px 28px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .access-brand {
      display: flex;
      gap: 8px;
    }

    /* INLINE-STYLE-1: host oculto do <symbol> da marca (sprite SVG no topo do <body>).
       0×0 absoluto + overflow hidden — NÃO usar display:none (alguns navegadores deixam de
       resolver gradientes do <use> referenciado). Substituiu o inline style do sprite. */
    .mainmap-logo-sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    /* BRAND-LOADER-UNIFY-1 + LOADING-SCREENS-UNIFY-1: marca canônica Mainmap (mesmo asset
       <use href="#mainmap-logo"> nas 3 superfícies — shell nativo, AccessGate React e
       .loading-overlay; vetor escala sem perda). A classe base é ESTÁTICA (o login inicial usa
       só ela). A animação de loading vive no modifier .mainmap-logo--loading, aplicado apenas
       nas telas de carregamento (AccessGate quando formLocked, e .loading-overlay). */
    .mainmap-logo {
      width: 56px;
      height: 56px;
      display: block;
    }

    /* LOADING-SCREENS-UNIFY-1: animação de loading suave e contínua — substituiu a animação
       bounce anterior (assimétrica 45/70/100, com tranco no fim do ciclo 1.00→0.85). Agora
       scale leve + opacity, keyframes simétricos, ease-in-out e duração maior. */
    .mainmap-logo--loading {
      animation: mainmapLogoLoading 1.8s ease-in-out infinite;
      transform-origin: center;
      will-change: transform, opacity;
    }

    @keyframes mainmapLogoLoading {
      0%   { transform: scale(0.96); opacity: 0.82; }
      50%  { transform: scale(1.04); opacity: 1; }
      100% { transform: scale(0.96); opacity: 0.82; }
    }

    @media (prefers-reduced-motion: reduce) {
      .mainmap-logo--loading { animation: none; }
    }

    .access-headings {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .access-greeting {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: #94a3b8;
    }

    .access-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: #1e293b;
      text-align: center;
    }

    .access-input {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 42px 10px 12px;
      font-size: 14px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-family: inherit;
    }

    .access-remember-row {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .access-remember-check {
      margin: 0;
      cursor: pointer;
    }

    .access-remember-label {
      font-size: 12px;
      color: #64748b;
      cursor: pointer;
      user-select: none;
    }

    .access-status {
      font-size: 13px;
      font-weight: 600;
      color: #3b82f6;
      text-align: center;
    }

    .access-error {
      min-height: 16px;
      font-size: 12px;
      color: #ef4444;
      text-align: center;
    }

    /* LOADING-SURFACE-GRAMMAR-1: gramática canônica ÚNICA das telas de carregamento. Mesmo bloco
       (logo animado + texto) reutilizado no shell nativo (#access-shell-loading), no AccessGate
       React (estado formLocked) e no .loading-overlay. .access-status fica só para tipografia de
       mensagens, não mais como container de loading. A animação do logo vem de .mainmap-logo--loading
       (intocada neste marco). */
    .loading-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
    }

    .loading-brand__text {
      font-size: 13px;
      font-weight: 600;
      color: #3b82f6;
      line-height: 1.4;
    }

    /* Acesso lembrado: shell nativo esconde o formulário e mostra só o carregamento (sem flash
       do input). Decidido pelo script de <head> que adiciona .access-remembered antes do paint. */
    #access-shell-loading {
      display: none;
    }

    .access-remembered #access-shell-form {
      display: none;
    }

    /* LOADING-SURFACE-GRAMMAR-1: só revela o container (vencendo o #access-shell-loading{display:none}
       base); flex-direction/align/gap são definidos pela classe .loading-brand no elemento. */
    .access-remembered #access-shell-loading {
      display: flex;
    }

    .sidebar-title-input {
      margin: 0;
      padding: 0;
      border: none;
      font-size: 1.4rem;
      font-weight: 700;
      background: transparent;
      outline: none;
      width: 200px;
    }

    .sidebar-title-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    

    

    .sidebar-filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      border-bottom: 1px solid #eee;
      padding-bottom: 4px;
      cursor: pointer;
    }

    .sidebar-filter-title {
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
    }

    .sidebar-filter-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      box-sizing: border-box;
    }

    .sidebar-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      animation: fadeIn 0.2s;
    }

    .sidebar-chip-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--sidebar-chip-icon-bg, #ccc);
    }

    .sidebar-search-wrap {
      position: relative;
      margin-bottom: 14px;
    }

    /* Sidebar Pin Card Actions & Footers */

    .pin-card-footer {
      padding: 8px 12px;
      background: #f9f9f9;
      border-top: 1px solid #eee;
      display: flex;
      gap: 8px;
      justify-content: space-between;
    }

    .pin-card-footer--rounded {
      border-radius: 0 0 8px 8px;
    }

    .pin-card-actions {
      display: flex;
      gap: 8px;
    }

    .pin-card-actions--compact {
      gap: 4px;
    }

    .pin-card-subpin-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px dashed #eee;
    }

    /* Sidebar Layout, Tabs and Actions */


    /* SIDEBAR-SHORT-VIEWPORT-CLIP-FIX-1: em altura de viewport curta (zoom alto/janela
       baixa), a região fixa da sidebar (header + Categorias expandida + busca + abas)
       estourava este body com overflow:hidden e cortava as abas + a lista de pins.
       overflow-y:auto deixa o corpo inteiro rolar quando não cabe (em altura normal
       não há scroll — o flex preenche). Ver .sidebar-list-scroll (min-height). */
    .sidebar-body {
      padding: 10px 14px;
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .sidebar-filter-block {
      margin-bottom: 16px;
    }

    /* UNPLACED-PINS-1: bloco de pins sem coordenada (pendência discreta) */
    .unplaced-pins-block {
      border: 1px solid #fde68a;
      background: #fffbeb;
      border-radius: 8px;
      padding: 8px 10px;
    }

    .unplaced-pins-count {
      background: #f59e0b;
      color: #fff;
    }

    .unplaced-pins-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      animation: fadeIn 0.2s;
    }

    .unplaced-pin-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .unplaced-pin-item:hover {
      background: #fef3c7;
    }

    .unplaced-pin-title {
      flex: 1;
      font-size: 12px;
      color: #92400e;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .unplaced-pin-id {
      font-family: Consolas, monospace;
      flex-shrink: 0;
    }

    .sidebar-filter-footer-btn {
      font-size: 11px;
      padding: 2px 8px;
    }

    /* --- NAVIGABLE TABS GROUP --- */
.sidebar-tabs {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin: 12px 16px 12px 16px;
  gap: 4px;
  border: 1px solid #e2e8f0;
}

.sidebar-tab {
  flex: 1;
  padding: 10px 14px;
  text-align: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: #64748b;
  /* button-proof: .sidebar-tab também é usada em <button> (Weight Manager);
     neutraliza o chrome nativo sem afetar os <div> dos demais sistemas. O
     border-bottom abaixo é preservado para o underline do estado ativo. */
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
}

.sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #475569;
}

.sidebar-tab--active-pins,
.sidebar-tab--active-connections,
.sidebar-tab--active-zones,
.sidebar-tab--active-categories,
.sidebar-tab--active-favorites {
  font-weight: 700;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sidebar-tab--active-pins {
  color: #2563eb;
  border-bottom-color: #3b82f6;
}

.sidebar-tab--active-connections {
  color: #7c3aed;
  border-bottom-color: #8b5cf6;
}

.sidebar-tab--active-zones {
  color: #ea580c;
  border-bottom-color: #f97316;
}

.sidebar-tab--active-categories {
  color: #0891b2;
  border-bottom-color: #06b6d4;
}

.sidebar-tab--active-favorites {
  color: #d97706;
  border-bottom-color: #f59e0b;
}

/* ss-tabs: abas da Planilha Interna reaproveitando .sidebar-tabs/.sidebar-tab
   no header (sem a margem do painel e com largura por conteúdo). */
.ss-tabs {
  margin: 0;
}

.ss-tabs .sidebar-tab {
  flex: 0 0 auto;
}


    .sidebar-tab-count {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      font-family: inherit;
      font-size: 10px;
      font-weight: 600;
      line-height: 1;
      border-radius: 999px;
      margin-left: 0;
      vertical-align: middle;
    }

    .sidebar-tab-count--pins {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .sidebar-tab-count--connections {
      background: #ede9fe;
      color: #6d28d9;
    }

    .sidebar-tab-count--zones {
      background: #ffedd5;
      color: #c2410c;
    }

    .sidebar-tab-count--categories {
      background: #cffafe;
      color: #0e7490;
    }

    .sidebar-tab-count--favorites {
      background: #fef3c7;
      color: #b45309;
    }


    .sidebar-list-scroll {
      overflow-y: auto;
      flex: 1;
      padding-right: 4px;
      /* SIDEBAR-SHORT-VIEWPORT-CLIP-FIX-1: piso para a lista não colapsar a 0px sob
         pressão de altura (quando o corpo passa a rolar). Em altura normal a lista é
         bem maior que 120px, então o piso não muda nada. */
      min-height: 120px;
    }

    /* Sidebar Pin Card Closed State */

    .pin-card-closed-header {
      cursor: pointer;
    }

    .pin-card-closed-main {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .pin-card-closed-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    }

    /* PIN-CARD-ZONE-BELOW-TITLE-1: coluna título + zona, permite ellipsis do título. */
    .pin-card-closed-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }

    .pin-card-closed-title {
      font-weight: 600;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pin-card-closed-meta-wrapper {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-left: 8px;
    }

    .pin-card-closed-cat-row {
      display: flex;
      gap: 2px;
      flex-wrap: wrap;
      align-items: center;
    }

    .pin-card-closed-cat-dash {
      width: 16px;
      height: 5px;
      border-radius: 4px;
      background: var(--category-color, #ccc);
    }

    .pin-card-closed-zone-label {
      font-size: 9px;
      color: #94a3b8;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pin-card-closed-subpin-row {
      display: flex;
      gap: 2px;
    }

    .pin-card-closed-subpin-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--category-color, #999);
    }

    .pin-card-closed-more {
      font-size: 8px;
      color: #999;
      line-height: 5px;
    }

    .pin-card-closed-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pin-card-closed-fav-btn {
      cursor: pointer;
      color: var(--pin-card-fav-color, #ddd);
    }

    .pin-card-closed-weight-badge {
      cursor: help;
      font-size: 10px;
    }

    /* Sidebar Pin Card Open Basic */

    .pin-card-open-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pin-card-open-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .pin-card-open-section--spaced {
      margin-bottom: 12px;
    }

    .pin-card-open-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .pin-card-open-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .card-wrapper {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      margin-bottom: 10px;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card-wrapper:hover {
      transform: scale(1.01);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      cursor: default;
      background: #ffffff;
    }

    .card-details {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease, padding .3s ease;
      padding: 0 14px;
      background: #fff;
    }

    .card-details.open {
      max-height: 1200px;
      /* Increased for editing */
      padding: 0 14px 14px 14px;
      border-top: 1px solid #f0f0f0;
    }

    .arrow {
      font-size: 10px;
      color: #999;
    }

    /* Image Styles */
    .pin-image-thumb {
      width: 100%;
      height: 60px;
      /* Thumbnail size */
      object-fit: cover;
      border-radius: 8px;
      /* Rounded corners */
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .pin-image-thumb:hover {
      transform: scale(1.5);
      /* Hover zoom */
      z-index: 10;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .info-image-container {
      overflow: visible;
      /* Allow zoom overflow */
      margin-top: 4px;
      margin-bottom: 8px;
    }

    .card-wrapper details>summary {
      list-style: none;
      outline: none;
      transition: transform 0.2s;
    }

    .card-wrapper details>summary:hover {
      transform: scale(1.02);
    }

    .card-wrapper details>summary::-webkit-details-marker {
      display: none;
    }

    .cat-manager {
      position: fixed;
      /* Mudar para fixed para cobrir toda a tela */
      inset: 20px;
      /* Pequena margem para não colar nas bordas */
      bottom: auto;
      max-height: 80vh;
      max-width: 400px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      z-index: 99999;
      /* Acima de tudo */
      padding: 25px;
      overflow: auto;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
      border: 1px solid #eee;
    }

/* ==========================================================================
   05. Botões e Toggles
   ========================================================================== */

    .app-toggle {
      position: relative;
      cursor: pointer;
      border-radius: 999px;
      transition: background 0.2s ease;
      background: var(--toggle-bg, #cbd5e1);
      flex-shrink: 0;
      border: none;
    }

    .app-toggle-thumb {
      position: absolute;
      top: 2px;
      left: var(--toggle-left, 2px);
      background: white;
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      transition: left 0.2s ease;
    }

    .app-toggle--md {
      width: 36px;
      height: 20px;
    }

    .app-toggle--md .app-toggle-thumb {
      width: 16px;
      height: 16px;
    }

    .app-toggle--sm {
      width: 28px;
      height: 16px;
    }

    .app-toggle--sm .app-toggle-thumb {
      width: 12px;
      height: 12px;
    }

    button {
      font-family: 'Poppins', sans-serif;
    }

    button:disabled {
      cursor: not-allowed;
    }

    /* Button System v2 — Passive */

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: 'Poppins', sans-serif;
      border: none;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      background: #eee;
      color: #334155;
      text-decoration: none;
      user-select: none;
      transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, opacity 0.2s ease, border-color 0.2s ease;
    }

    .btn:hover {
      background: #e0e0e0;
      transform: scale(1.05);
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn svg {
      width: 16px !important;
      height: 16px !important;
    }

    .btn--primary {
      background: #3b82f6;
      color: #fff;
    }

    .btn--primary:hover {
      background: #2563eb;
    }

    /* OPEN-COLOR-SEMANTIC-1: btn--open (ação "Abrir/Janela/Abrir Cartão") herda o
       roxo de btn--purple — mesma cor dessa ação no resto do app. Antes compartilhava
       o verde de btn--save (CONSOLIDATE-BUTTONS-1); separado aqui para alinhar a
       semântica de cor. Nomes preservados (intenções distintas: abrir vs purple genérico). */
    .btn--purple,
    .btn--open {
      background: #8b5cf6;
      color: #fff;
    }

    .btn--purple:hover,
    .btn--open:hover {
      background: #7c3aed;
    }

    /* CAT-MANAGER-BTN-UNIFY-2: variante invertida da ação roxa — branca em repouso,
       roxo sólido no hover (mesmo roxo de .btn--purple/.btn--open). Borda neutra #eee
       para o botão não sumir sobre fundos claros (vidro da sidebar / toolbar da
       planilha). Nenhuma variante existente cobria branco→roxo: btn--purple é roxo
       fixo, btn--ghost é transparente com hover cinza. Modifier reutilizável. */
    .btn--purple-invert {
      background: #fff;
      color: #8b5cf6;
      border: 1px solid #eee;
      /* .btn base é font-weight:500 (fino); os demais botões de ação são 600. Igualar aqui
         deixa "Gerenciar Categorias" com o mesmo peso dos irmãos (classe usada só por ele). */
      font-weight: 600;
    }

    .btn--purple-invert:hover {
      background: #8b5cf6;
      border-color: #8b5cf6;
      color: #fff;
    }

    .btn--ghost {
      background: transparent;
      color: #64748b;
    }

    .btn--ghost:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #334155;
    }

    .btn--muted {
      background: #f1f5f9;
      color: #64748b;
    }

    .btn--muted:hover {
      background: #e2e8f0;
      color: #334155;
    }

    .btn--pill {
      border-radius: 999px;
      padding: 6px 16px;
      font-weight: 600;
    }

    .btn--full {
      width: 100%;
    }

    .btn--icon {
      width: 32px !important;
      height: 32px !important;
      padding: 0;
      flex-shrink: 0;
    }

    .btn--icon-sm {
      width: 32px !important;
      height: 32px !important;
      padding: 0;
      flex-shrink: 0;
    }

    .btn--icon-lg {
      width: 32px !important;
      height: 32px !important;
      padding: 0;
      flex-shrink: 0;
    }

    .btn--close {
      background: transparent;
      color: #64748b;
      padding: 4px;
    }

    .btn--close:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #334155;
    }

    /* Action button variants */
    .btn--xs {
      padding: 2px 6px;
      font-size: 10px;
      border-radius: 4px;
      line-height: 1.4;
    }

    .btn--delete {
      background: #ef4444;
      color: #fff;
    }
    .btn--delete:hover {
      background: #dc2626;
      transform: none !important;
    }

    .btn--restore {
      background: transparent;
      color: #10b981;
    }
    .btn--restore:hover {
      background: rgba(16, 185, 129, 0.10);
      color: #059669;
    }

    .btn--add {
      background: transparent;
      color: #2563eb;
    }
    .btn--add:hover {
      background: rgba(37, 99, 235, 0.10);
      color: #1d4ed8;
    }

    .btn--add-solid {
      background: #2563eb;
      color: #ffffff;
      border: none;
    }
    .btn--add-solid:hover {
      background: #1d4ed8;
    }

    .btn--edit {
      background: transparent;
      color: #475569;
    }
    .btn--edit:hover {
      background: rgba(71, 85, 105, 0.10);
      color: #334155;
    }

    /* OPEN-COLOR-SEMANTIC-1: btn--save permanece verde (ação "Salvar/Criar").
       btn--open foi reagrupado com btn--purple (roxo) — ver bloco btn--purple acima.
       Antes save+open compartilhavam este verde (CONSOLIDATE-BUTTONS-1). */
    .btn--save {
      background: #10b981;
      color: #ffffff;
    }
    .btn--save:hover {
      background: #059669;
    }

    .btn--cancel {
      background: transparent;
      color: #64748b;
    }
    .btn--cancel:hover {
      background: rgba(100, 116, 139, 0.12);
      color: #334155;
    }

    /* ZONE-CARD-ACTIONS-1: dimensão comum dos três botões de ação do card de zona
       (Localizar/Abrir/Editar) — linha de botões de texto com largura igual e compacta.
       PIN-CARD-ACTIONS-PILOT-1: .btn--entity-action reaproveita a MESMA aparência para a
       action row textual do card aberto de pin/conexão na sidebar. .btn--zone-action segue
       exclusiva do Zone Manager; agrupadas só por compartilharem o visual (não-merge real). */
    .btn--zone-action,
    .btn--entity-action {
      flex: 1;
      border-radius: 6px;
      padding: 5px 0;
      font-size: 11px;
      font-weight: 600;
      justify-content: center;
    }

    /* ZONE-ACTION-ROW-UX-1 (ajuste): "Localizar" é o rótulo mais largo da row e
       apertava com ícone+texto. Ganha um pouco mais de peso horizontal — aplicado
       só ao botão Localizar do Zone Manager. Não toca .btn--zone-action global,
       nem Abrir/Editar. */
    .btn--zone-action--locate {
      flex: 1.25 1 0;
    }

    .btn:disabled,
    .btn[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    .feature-btn {
      transition: transform 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .feature-btn:hover {
      transform: scale(1.2);
    }

    /* Botão de ação primária em modais de confirmação */
    .btn-confirm-action {
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 600;
    }

    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 4px;
    }

    .form-label--section {
      font-size: 10px;
      font-weight: 800;
      color: #3b82f6;
      margin-top: 12px;
      margin-bottom: 4px;
    }

    .info-block-empty {
      color: #999;
      font-style: italic;
      margin-bottom: 10px;
    }

    /* Seção divider em cards (ex: CONEXÕES VINCULADAS) */
    .card-section-header {
      font-weight: 600;
      font-size: 12px;
      margin-bottom: 8px;
      color: #64748b;
    }

    /* UI-SECTION-CONEXOES-ALIGN-1: tipografia compartilhada do título de seção
       "CONEXÕES" (janela de pin / janela de zona / popup de leitura).
       Controla SOMENTE tipografia — background, padding, border, flex e margin
       estrutural permanecem no contexto de cada janela. Definida após
       .card-section-header para vencer o desempate de especificidade quando
       ambas estão no mesmo elemento (título do pin). */
    .connections-section-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      line-height: 1.2;
    }

    /* UI-HEADER-TYPO-ALIGN-1: tipografia base compartilhada do título das três
       janelas flutuantes (pin / zona / imagem). Controla SOMENTE tipografia —
       nada de overflow, white-space, min-width, display, margin, padding ou
       border, que permanecem inline no contexto de cada janela. */
    .floating-window-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      color: #1e293b;
    }

    /* Toast de sucesso (fixed bottom center) */
    .success-popup {
      position: fixed;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      background: #10b981;
      color: white;
      padding: 12px 24px;
      border-radius: 50px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 99999;
    }

    .success-popup__icon {
      background: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .popup-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
      padding-top: 10px;
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1 1 auto;
    }

    /* Custom Input Styling */
    input[type="text"],
    textarea {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-family: inherit;
      box-sizing: border-box;
      font-size: 13px;
      transition: border-color 0.2s;
    }

    input[type="text"]:focus,
    textarea:focus {
      outline: none;
      border-color: #3b82f6;
    }

    /* SEARCH-INPUT-UNIFICATION-1: aparência ÚNICA e autoritativa dos inputs de
       BUSCA. Qualificada com input.app-search-input (0,1,1) e posicionada APÓS a
       base global input[type="text"] — assim a classe comum é a única fonte de
       verdade da aparência, vencendo a global e qualquer classe de contexto
       (0,1,0). Matriz = input de busca da sidebar. Diferenças permitidas:
       placeholder, largura do container, margem externa, presença de ícone. */
    input.app-search-input,
    .app-search-input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fff;
      color: #0f172a;
      font-family: inherit;
      font-size: 13px;
      line-height: 1.2;
      outline: none;
      transition: border-color 0.2s;
    }

    input.app-search-input::placeholder,
    .app-search-input::placeholder {
      color: #94a3b8;
    }

    input.app-search-input:focus,
    .app-search-input:focus {
      border-color: #3b82f6;
    }

    /* Modificador de ícone com especificidade maior (0,2,1) para vencer o padding
       shorthand acima e preservar o espaço da lupa — sem !important. */
    input.app-search-input.app-search-input--with-icon,
    .app-search-input--with-icon {
      padding-left: 32px;
    }

    /* Wrapper + ícone (lupa) comuns dos inputs de BUSCA — lupa DENTRO do campo,
       idêntica à sidebar. O input usa --with-icon (padding-left) para o recuo do
       texto. A largura externa é definida pelo container (ex.: width:220 na
       Planilha); a aparência interna vem sempre destas classes. */
    .app-search-wrap {
      position: relative;
      width: 100%;
    }

    .app-search-icon {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      color: #94a3b8;
      pointer-events: none;
      z-index: 1;
    }

    label[style*="cursor:pointer"]:hover {
      transform: scale(1.02);
      transition: transform 0.2s;
    }

/* ==========================================================================
   06. Pins, Ícones, Badges e Favoritos
   ========================================================================== */

    /* Map Pin Custom Icon */
    .custom-pin {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .custom-pin svg {
      filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
      transform: rotate(var(--icon-rotation, 0deg));
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.2s;
    }

    .custom-pin:hover svg {
      /* Combine rotation with scale */
      transform: rotate(var(--icon-rotation, 0deg)) scale(1.2) translateY(-4px);
    }

    .pin-selected {
      z-index: 9999 !important;
      /* Always on top */
    }

    .pin-selected svg {
      animation: pin-idle 1.5s infinite ease-in-out;
      overflow: visible;
      filter: drop-shadow(0 0 6px white);
    }

    .pin-highlight-scale {
      animation: pin-highlight-pulse 2s infinite;
      z-index: 99999 !important;
    }

    .fav-pulsing {
      animation: none; /* Neutralizado: transform no root sobrescreve translate3d do Leaflet */
    }

    .fav-pulsing svg {
      animation: fav-pulse-svg 2s infinite ease-in-out;
      transform-origin: center center;
    }

    .weight-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      padding: 3px 8px;
      background: #ede9fe;
      color: #8b5cf6;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .weight-badge--isolated {
      background: #f3f4f6;
      color: #94a3b8;
    }

    .hide-weights .weight-badge {
      display: none !important;
    }

/* ==========================================================================
   07. Tooltips e Popups
   ========================================================================== */

    /* --- SISTEMA DE ANIMAÇÃO DOS TOOLTIPS --- */

    /* 1. CONTAINER BASE: Estilização visual da etiqueta (fundo, borda, sombra) */
    .custom-tooltip-container {
      background: white !important;
      border: 1px solid #ddd !important;
      border-radius: 50px !important;
      /* Forma arredondada (estilo pílula) */
      padding: 6px 10px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      color: #333 !important;
      font-family: 'Poppins', sans-serif !important;
      font-size: 13px !important;
      /* SUPRESSÃO DE TRANSIÇÃO: Evita que o tooltip "venha de longe" ao mudar de posição (bloqueia o transform) */
      /* No entanto, permitimos a opacidade ser suave para o efeito de fade-in/out */
      transition: opacity 0.4s ease !important;
    }

    /* 2. ACIONADORES DE ANIMAÇÃO: Definem COMO e de ONDE a animação começa */

    /* Efeito para quando o tooltip aparece à esquerda do pin */
    .tooltip-anim-left {
      /* Usa a keyframe de pop com uma curva 'elastic' (cubic-bezier) para um toque orgânico */
      animation: tooltip-emerge-left 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
      /* PONTO DE ORIGEM: Fixado na direita-centro para parecer que brota do pin */
      transform-origin: right center;
    }

    /* Efeito para quando o tooltip aparece acima do pin */
    .tooltip-anim-top {
      animation: tooltip-emerge-top 0.25s cubic-bezier(0.175, 0.5, 0.32, 1.275) forwards;
      /* PONTO DE ORIGEM: Fixado no centro-baixo para brotar de dentro do pin para cima */
      transform-origin: center bottom;
    }

    /* ESTADO ESTÁTICO: Usado no modo "Sempre Exibir" para evitar re-animações constantes */
    .tooltip-no-anim {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: scale(1) !important;
    }

    /* Detalhamento de Peso — Tooltip do Mapa */
    .weight-tooltip {
      background: rgba(30, 30, 30, 0.95) !important;
      border: 1px solid #4fc3f7 !important;
      border-radius: 6px !important;
      padding: 8px 12px !important;
      font-size: 11px !important;
      line-height: 1.5 !important;
      white-space: normal !important;
      color: #fff !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    .weight-tooltip::before {
      border-top-color: rgba(30, 30, 30, 0.95) !important;
    }

    .weight-tooltip-breakdown {
      font-family: 'Courier New', monospace;
      font-size: 11px;
      line-height: 1.5;
      white-space: pre;
      color: #fff;
      margin: 6px 0 0 0;
      padding: 0;
      display: block;
    }

    .success-popup {
      animation: slideIn 0.3s ease-out;
    }

/* ==========================================================================
   08. Zonas
   ========================================================================== */

    .vertex-handle {
      background: transparent;
      border: none;
      cursor: grab;
      width: 24px !important;
      height: 24px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* O visual real do vértice (o "ponto" branco) */
    .vertex-handle::after {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      background: #6366f1;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      transition: all 0.15s ease;
    }

    /* ZONE-EDITOR-VERTEX-HOVER-ACTIVE-UX-1: hover do vértice cresce um pouco mais (1.3 → 1.4)
       para destacar melhor o alvo sob o cursor. Drag (1.5, abaixo) segue como estado mais forte. */
    .vertex-handle:hover::after {
      transform: scale(1.4);
      background: #4f46e5;
      border-color: #fff;
      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.5);
    }

    .vertex-handle.vertex-dragging {
      cursor: grabbing;
    }

    .vertex-handle.vertex-dragging::after {
      transform: scale(1.5);
      background: #4338ca;
      border-color: #fff;
      box-shadow: 0 2px 12px rgba(67, 56, 202, 0.5);
    }

    .midpoint-handle {
      background: transparent;
      border: none;
      cursor: copy;
      width: 20px !important;
      height: 20px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.6;
      transition: opacity 0.2s;
    }

    .midpoint-handle:hover {
      opacity: 1;
    }

    .midpoint-handle::after {
      content: '';
      display: block;
      width: 8px;
      height: 8px;
      background: rgba(255, 255, 255, 0.8);
      border: 2px solid #4fc3f7;
      border-radius: 50%;
      transition: all 0.15s ease;
    }

    /* ZONE-EDITOR-VERTEX-HOVER-ACTIVE-UX-1: hover do midpoint cresce e fica preenchido,
       sinalizando "adicionar ponto" (afordância de inserção), distinto do vértice indigo.
       Reaproveita a gramática visual (scale + glow) das regras de vértice acima. */
    .midpoint-handle:hover::after {
      transform: scale(1.4);
      background: #4fc3f7;
      border-color: #fff;
      box-shadow: 0 2px 10px rgba(79, 195, 247, 0.55);
    }

/* ==========================================================================
   09. Menus Flutuantes e Painéis
   ========================================================================== */

    .data-maintenance-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      margin-top: 16px;
      margin-bottom: 16px;
    }

    .data-maintenance-table th,
    .data-maintenance-table td {
      border: 1px solid #e2e8f0;
      padding: 8px;
      text-align: left;
    }

    .data-maintenance-table th {
      background: #f8fafc;
      font-weight: 600;
      color: #475569;
    }

    .data-maintenance-empty {
      padding: 24px;
      text-align: center;
      color: #10b981;
      font-weight: 500;
      background: #ecfdf5;
      border-radius: 8px;
      margin: 16px 0;
    }

    .data-maintenance-warning {
      background: #fffbeb;
      color: #b45309;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #fde68a;
      font-size: 13px;
      margin-bottom: 16px;
    }

    .data-maintenance-modal {
      max-width: 700px;
    }

    .data-maintenance-summary {
      font-size: 13px;
      color: #64748b;
    }

    .data-maintenance-scroll {
      max-height: 400px;
      overflow-y: auto;
    }

    .data-maintenance-section-title {
      margin: 12px 0 8px;
      font-size: 14px;
    }

    .data-maintenance-table-cell-mono {
      font-family: monospace;
    }

    /* Floating Action Buttons (FABs) */

    .map-fab {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border: none;
      cursor: pointer;
      background: white;
      transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s;
    }

    .map-fab:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }

    .map-fab--primary {
      background: #3b82f6;
      color: white;
    }

    .map-fab--success {
      background: #10b981;
      color: white;
    }

    .map-fab--muted {
      background: white;
      color: #374151;
    }

    .map-fab--purple {
      background: #8b5cf6;
      color: white;
    }

    .map-fab--zones {
      background: #f97316;
      color: white;
    }

    .map-fab--zones:hover {
      background: #ea580c;
    }

    /* SIDEBAR-COLLAPSE-CONTROL-1: o botão de colapsar é o PRIMEIRO item do MESMO rail vertical
       dos FABs do mapa (.map-island--vertical) — herda .map-fab/.map-fab--muted, sem halo/base
       próprio. Aqui só o foco de teclado visível (acessibilidade), sem alterar o grupo. */
    .sidebar-collapse-fab:focus-visible {
      outline: 2px solid #3b82f6;
      outline-offset: 2px;
    }

    /* Conn Menu — Painel principal de visualização */

    .conn-menu-panel {
      background: white;
      padding: 16px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 220px;
      /* INLINE-STYLE-2: props estruturais antes repetidos inline nos 2 menus de FAB
         (Visualização e Arquivos/Perfis). minWidth específico do storage segue inline. */
      max-height: calc(100vh - 284px);
      overflow-x: hidden;
      overflow-y: auto;
    }

    .conn-menu-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .conn-menu-section-header {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
      text-transform: uppercase;
      color: #64748b;
    }

    .conn-menu-section-header--blue {
      color: #3b82f6;
    }

    .conn-menu-section-header--purple {
      color: #8b5cf6;
    }

    .conn-menu-divider {
      height: 1px;
      background: #e2e8f0;
      margin: 8px 0;
    }

    .conn-menu-control-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .conn-menu-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      border-radius: 6px;
      width: 100%;
      justify-content: flex-start;
      font-size: 11px;
      font-weight: 700;
    }

    .conn-menu-btn--blue {
      color: #3b82f6;
    }

    /* INLINE-STYLE-3: padrões A/B/C dos menus de FAB (Storage + topo do Visualização).
       --surface: fundo/borda antes inline. Inclui :hover para empatar com .btn--ghost:hover
       e manter o fundo estático que o inline garantia (texto ainda escurece via .btn--ghost:hover). */
    .conn-menu-btn--surface,
    .conn-menu-btn--surface:hover {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
    }

    .conn-menu-row-icon {
      color: #64748b;
    }

    .conn-menu-row-label {
      font-size: 13px;
      font-weight: 500;
      color: #334155;
    }

    .conn-menu-slider-card {
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 8px;
      margin-top: 4px;
    }

    .conn-menu-slider-card--green {
      background: #f0fdf4;
    }

    .conn-menu-slider-card--muted {
      background: #f8fafc;
    }

    .conn-menu-slider {
      width: 100%;
    }

    .conn-menu-color-input {
      width: 40px;
      height: 24px;
      padding: 0;
    }

    .conn-menu-help-text {
      font-size: 10px;
      color: #94a3b8;
      line-height: 1.4;
    }

    .conn-menu-subpanel {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    /* Zone Menu */

    /* AppSurfacePortal wrapper — rendered to document.body; z-index set exclusively by Surface Manager inline style */
    .app-surface-portal {
      position: fixed;
    }

    /* Menu Arquivos / Opções Avançadas */

    /* MAP-TOOLS-TOPRIGHT-1: o botão "Arquivos e Perfis" (engrenagem) saiu do rail vertical
       esquerdo e virou uma ilha própria no canto superior direito. Reusa .map-island (mesmo
       vidro fosco/blur:4px dos outros FABs — daí o botão manter o "blur de fundo"). */
    .storage-fab-topright {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 2000;
    }

    /* Âncora do popover: agora que o host vive no canto direito, o menu abre PARA BAIXO e
       alinhado à direita (right:0), senão vazaria pela borda direita da tela. */
    .storage-menu-host {
      position: relative;
    }

    .storage-menu-popover {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      left: auto;
      z-index: 2001;
    }

    /* MAP-HEADER-ACTIONS-DROPDOWN-1: dropdown de mapa + ações ancorado no header da sidebar
       (botão à esquerda do título). Posicionamento PRÓPRIO porque .storage-menu-popover é
       tunado para o FAB do mapa (top/left 50px). O VISUAL do painel e dos itens reaproveita
       .conn-menu-panel / .conn-menu-btn (sem classe visual nova). z-index 1000 espelha o
       .storage-menu-popover irmão (fica acima do corpo da sidebar, que vem depois no DOM). */
    .map-menu-host {
      position: relative;
      display: inline-flex;
    }
    .map-menu-popover {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 1000;
    }

    /* Weight Manager */

    /* CONSOLIDATE-OVERLAYS-1: backdrop das ferramentas centralizadas. Regra agrupada
       (Weight Manager + Category Manager) — as duas definicoes eram byte-identicas.
       Ambas as classes seguem no markup (o JS faz querySelector por elas e o Surface
       Manager define o z-index real via inline style; o valor abaixo e so fallback).
       A definicao de .cat-manager-overlay foi removida da subsecao Category Manager. */
    .weight-manager-overlay,
    .cat-manager-overlay {
      position: fixed;
      inset: 0;
      z-index: 300010; /* fallback — Surface Manager sobrescreve via inline style */
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(2px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Selector composto (0,2,0) para vencer .weight-manager-dialog (position:
       relative) e .cat-manager (position: fixed; inset/max-width) que estão no
       mesmo elemento — sem depender de ordem de fonte. */
    .weight-manager-dialog.weight-manager-dialog--standalone {
      /* Ancorado no topo: posição visual estável ao trocar de aba (não recentra
         pela altura do conteúdo). O corpo cresce e rola dentro do max-height,
         sem mover o topo do modal. Específico do Weight Manager — não toca o
         shell/modal global. */
      position: fixed;
      top: 32px;
      left: 50%;
      right: auto;
      bottom: auto;
      transform: translateX(-50%);
      flex-direction: column;
      max-width: 620px;
      max-height: calc(100vh - 64px);
    }

    .weight-manager-dialog {
      width: min(760px, calc(100vw - 40px));
      max-height: 85vh;
      overflow: auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      padding: 20px;
      position: relative;
    }

    .weight-manager-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .weight-manager-title {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      color: #111827;
    }

    .weight-manager-close {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      padding: 0;
    }

    .weight-manager-header--bordered {
      border-bottom: 1px solid #eee;
    }

    .weight-manager-close--muted {
      background: #f1f5f9;
      color: #64748b;
    }

    /* Cabeçalho colapsável do bloco "Categorias de peso ativas". É um <button>:
       button-proof (neutraliza chrome nativo) e usa a tipografia do rótulo. */
    .weight-toggles-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0;
      margin: 0;
      background: none;
      border: none;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: #64748b;
    }

    /* Grade estável de toggles. auto-fit com minmax(160px) dá 3 colunas no painel
       de 620px e degrada para 2/1 em telas menores — evita o overflow que um
       repeat(3) fixo causaria. align-items:center + labels nowrap alinham tudo. */
    .weight-manager-switches {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px 18px;
      align-items: center;
      margin: 12px 0 0 0;
    }

    .weight-manager-switches .flex-between {
      min-width: 0;
      gap: 12px;
    }

    .weight-manager-switches .flex-between > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* weight-manager-tabs: 5 abas de fatores de peso reaproveitando
       .sidebar-tabs/.sidebar-tab (sem badge — são seções de configuração, não
       contagem de entidades). Modificador apenas de espaçamento e fit no painel. */
    .weight-manager-tabs {
      margin: 0 0 12px 0;
    }

    .weight-manager-tabs .sidebar-tab {
      padding: 9px 10px;
      font-size: 12px;
      white-space: nowrap;
      min-width: 0;
    }

    .weight-manager-search {
      margin-bottom: 12px;
    }


    /* Aparência do input governada por .app-search-input (fonte única). */

    .weight-manager-results {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .weight-manager-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .weight-manager-section-title {
      font-size: 10px;
      font-weight: 800;
      color: #3b82f6;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 8px 0 4px;
    }

    .weight-manager-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .weight-manager-row-main {
      flex: 1;
      min-width: 0;
    }

    .weight-manager-color-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      flex-shrink: 0;
      background: var(--weight-manager-color, #94a3b8);
    }

    .weight-manager-item-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .weight-manager-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .weight-manager-iso-btn {
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 6px;
      background: transparent;
      color: #94a3b8;
      border: 1px solid #e2e8f0;
    }

    .weight-manager-iso-btn--active {
      background: #f59e0b;
      color: white;
      border-color: #f59e0b;
    }

    .weight-manager-input {
      width: 72px;
      padding: 5px 8px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 12px;
      text-align: center;
      background: #fff;
      color: #111827;
      box-sizing: border-box;
      outline: none;
    }

    .weight-manager-input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
    }

    .weight-manager-empty {
      padding: 16px;
      text-align: center;
      color: #94a3b8;
      font-size: 13px;
      font-style: italic;
    }

    .weight-manager-fav-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
    }

    .weight-manager-fav-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
    }

    .weight-manager-fav-card--warm {
      background: #fff9f2;
      border-color: #fed7aa;
    }

    /* Category Manager */

    /* .cat-manager-overlay: consolidado com .weight-manager-overlay numa regra
       agrupada na subsecao Weight Manager acima — CONSOLIDATE-OVERLAYS-1. */

    .cat-manager-dialog--standalone {
      position: relative;
      inset: auto;
      left: auto;
      transform: none;
      display: flex;
      flex-direction: column;
      padding: 0;
      max-height: 90vh;
      width: 95%;
      max-width: 900px;
      overflow: hidden;
    }

    .cat-manager-header {
      padding: 20px 25px 16px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cat-manager-title {
      margin: 0;
      color: #334155;
      font-size: 18px;
      font-weight: 800;
    }

    .cat-manager-close {
      background: #f1f5f9;
      color: #64748b;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      padding: 0;
    }

    .cat-manager-body {
      flex: 1;
      overflow-y: auto;
      padding: 25px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .cat-manager-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }

    @media (max-width: 700px) {
      .cat-manager-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 400px) {
      .cat-manager-grid {
        grid-template-columns: 1fr;
      }
    }

    .cat-manager-create-top {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f1f5f9;
    }

    .cat-manager-controls {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .cat-manager-name {
      flex: 1;
    }

    .cat-manager-empty {
      font-size: 12px;
      color: #94a3b8;
      padding: 10px 4px;
    }

    .cat-manager-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cat-manager-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
    }

    .cat-manager-pill-preview {
      flex: 1;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
      cursor: default !important;
      font-size: 11px !important;
      font-weight: 600;
    }

    .cat-manager-pill-preview:hover {
      transform: none !important;
      filter: none !important;
    }

    /* 2F: rename inline row */
    .cat-manager-rename-row {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      min-width: 0;
    }

    .cat-manager-rename-input {
      flex: 1;
      min-width: 0;
    }

    .cat-manager-rename-btn {
      flex-shrink: 0;
      opacity: 0.5;
    }

    .cat-manager-card-top:hover .cat-manager-rename-btn {
      opacity: 1;
    }

    .cat-manager-remove-btn {
      flex-shrink: 0;
    }

    .cat-manager-usage {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .cat-manager-usage-badge {
      font-size: 10px;
      color: #64748b;
      background: #e2e8f0;
      border-radius: 6px;
      padding: 2px 6px;
      white-space: nowrap;
      line-height: 1.4;
    }


    /* Zone List Sidebar */

    .zone-list-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 280px;
      background: white;
      box-shadow: -2px 0 10px rgba(0,0,0,0.1);
      z-index: 300010; /* fallback — Surface Manager sobrescreve via inline style */
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .zone-list-close {
      font-size: 20px;
      color: #666;
    }

/* ==========================================================================
   10. Planilha Interna
   ========================================================================== */

    /* SS-DIRTY-GUARD: stroke vermelho no container da Planilha quando há
       alterações não salvas. Usa outline (não afeta layout nem o box-shadow
       inline existente) para evitar shift visual. */
    .spreadsheet-modal--dirty {
      outline: 3px solid #ef4444;
      outline-offset: -3px;
    }

    .ss-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .ss-table th {
      white-space: normal;
      vertical-align: middle;
      line-height: 1.15;
    }

    /* Colunas canônicas da Planilha Interna (ss-col-* com hífen simples) */
    .ss-col-actions       { width: 80px; }
    .ss-col-id            { width: 36px; text-align: center; }
    .ss-col-title         { min-width: 240px; width: 260px; }
    .ss-col-categories    { min-width: 190px; width: 210px; }
    .ss-col-zone          { min-width: 150px; width: 170px; }
    .ss-col-weight        { width: 64px; text-align: center; }
    .ss-col-pinlinks      { min-width: 220px; width: 240px; }
    .ss-col-info          { min-width: 280px; }

    /* Linhas, células editáveis e marcação de linha */

    .ss-table-row {
      transition: background 0.12s ease;
    }

    .ss-table-row:not(.ss-table-row--deleted):hover,
    .ss-table-row:not(.ss-table-row--deleted):focus-within {
      background: #f8fafc !important;
      /* !important necessário: sobrescreve inline style background do _markColor em hover */
    }

    .ss-title-textarea {
      width: 100%;
      height: 34px;
      min-height: 34px;
      max-height: 34px;
      resize: none;
      overflow: hidden;
      border: 0;
      background: transparent;
      font: inherit;
      font-weight: 700;
      line-height: 16px;
      padding: 1px 4px;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
      display: block;
      box-sizing: border-box;
      outline: none;
      transition: color 0.12s ease, background 0.12s ease;
    }

    .ss-title-textarea:focus {
      background: rgba(255, 255, 255, 0.75);
      border-radius: 6px;
    }

    .ss-title-cell {
      vertical-align: middle;
    }

    .ss-info-textarea {
      flex: 1 1 0;
      min-width: 0;
      height: 50px;
      min-height: 50px;
      max-height: 50px;
      resize: none;
      overflow: hidden;
      border: 0;
      background: transparent;
      font: inherit;
      font-size: 11px;
      line-height: 16px;
      padding: 1px 4px;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
      display: block;
      box-sizing: border-box;
      outline: none;
      color: #334155;
      transition: height 0.15s ease, background 0.12s ease;
    }

    .ss-info-textarea--expanded {
      height: 112px;
      min-height: 112px;
      max-height: 112px;
      overflow-y: auto;
    }

    .ss-info-textarea:focus {
      background: rgba(255, 255, 255, 0.75);
      border-radius: 6px;
    }

    .ss-info-cell {
      vertical-align: middle;
    }

    .ss-info-cell-wrap {
      display: flex;
      align-items: flex-start;
      gap: 4px;
      width: 100%;
    }

    .ss-info-expand-btn {
      flex: 0 0 auto;
      white-space: nowrap;
      padding: 2px 5px;
      font-size: 9px;
      line-height: 1.4;
      border-radius: 4px;
      margin-top: 1px;
    }

    /* Marcação de linha — Power UX */

    .ss-table-row--marked {
      transition: background 0.12s ease;
    }

/* SPREADSHEET-UX-POLISH-1: destaque temporário da linha recém-criada. Pulso âmbar
   (não-destrutivo) que esmaece em ~2s, aplicado nas células para não brigar com o
   background inline de _markColor da <tr> nem alterar a altura da linha. Efêmero:
   a classe é removida por timer no React; nada é persistido nem exportado. */
    .ss-table-row--highlighted > td {
      animation: ssRowHighlight 2s ease-out;
    }
    @keyframes ssRowHighlight {
      0%   { background: #fde68a; }
      100% { background: transparent; }
    }

/* MULTISELECT-BULK-EDIT-1: linha selecionada na seleção múltipla. Background indigo suave
   pintado na CÉLULA (paints over o background inline da <tr>, sem !important); não altera
   altura; não-destrutivo (não-vermelho). O highlight de criação anima o td e tem prioridade
   temporária (a animação vence o background estático durante os ~2s). */
    .ss-table-row--selected > td {
      background: #e0e7ff;
    }
    .ss-table-row--selected {
      cursor: pointer;
    }

/* SPREADSHEET-MODIFIER-SELECTION-UX-1: enquanto Shift/Ctrl/Meta está pressionado dentro da
   Planilha, suspende seleção de texto para priorizar a seleção de linhas. Escopado ao container
   do corpo da tabela (.ss-modifier-selecting) — nunca user-select global no body. O bloqueio de
   foco/edição é feito por preventDefault no mousedown (capture), não por pointer-events. */
    .ss-modifier-selecting,
    .ss-modifier-selecting * {
      user-select: none;
      -webkit-user-select: none;
    }
    .ss-modifier-selecting input,
    .ss-modifier-selecting textarea,
    .ss-modifier-selecting select {
      cursor: default;
    }

/* Modais picker internos da Planilha */
    .ss-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 10px;
      flex-shrink: 0;
      border-top: 1px solid #e2e8f0;
      margin-top: 8px;
    }
    .ss-modal-subject {
      font-size: 11px;
      color: #64748b;
      padding: 2px 0 6px;
      flex-shrink: 0;
    }

/* CATEGORY-MODAL-RESPONSIVE-GRID-1: lista de seleção de categorias (modal de Pin/Conexão,
   #ssCatList) em grid responsivo — 3 colunas em tela larga, 2 em média, 1 em estreita.
   align-content:start evita esticar linhas quando há poucas categorias (sem scroll à toa);
   o overflow-y:auto inline do #ssCatList segue como fallback quando excede a altura útil.
   Apenas layout — cada item permanece um <label> com checkbox + cor + nome. */
    .category-picker-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      align-content: start;
    }
    /* item ocupa 100% da célula sem forçar overflow horizontal */
    .category-picker-list > label {
      min-width: 0;
    }
    /* nome aparece plenamente: quebra linha em vez de cortar com reticências */
    .category-picker-name {
      min-width: 0;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    @media (max-width: 760px) {
      .category-picker-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      .category-picker-list {
        grid-template-columns: 1fr;
      }
    }

/* CATEGORY-MODAL-RESPONSIVE-GRID-1: área de chips/tags selecionáveis dos modais INTERNOS
   da planilha (#ssCatChips do picker de categorias; chips de filtro do openEntityMultiPicker).
   Reaproveita display:flex/flex-wrap/gap de .sidebar-chip-list (sempre presente junto) e só
   controla altura/overflow: chips quebram em linhas limpas, sem barra horizontal; scroll
   vertical entra apenas como fallback quando há chips demais (max-height responsivo).
   Não aplicar fora de modal da planilha (sidebar/mapa/cards usam .sidebar-chip-list direto). */
    .ss-modal-chip-flow {
      align-content: flex-start;
      max-height: clamp(72px, 18vh, 150px);
      overflow-y: auto;
      overflow-x: hidden;
    }
    /* defensivo: nome absurdamente longo não estoura a faixa (trunca só nesse caso extremo) */
    .ss-modal-chip-flow > .sidebar-filter-chip {
      max-width: 100%;
    }

/* CATEGORY-MODAL-RESPONSIVE-GRID-1: lista principal dos pickers de VÍNCULO da planilha
   (openEntityMultiPicker — vincular pins/conexões/zonas). Cada item traz nome + badge, então
   2 colunas em tela larga (não 3, para não espremer nome/badge) e 1 coluna em tela estreita.
   align-content:start evita esticar linhas; o overflow-y:auto inline do #lstId segue como
   fallback. Classe própria (não reaproveita .category-picker-list) por o item ser mais denso. */
    .ss-entity-picker-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      align-content: start;
    }
    .ss-entity-picker-grid > label {
      min-width: 0;
    }
    /* nome da entidade aparece plenamente (quebra linha) em vez de cortar com reticências */
    .entity-picker-name {
      min-width: 0;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    @media (max-width: 560px) {
      .ss-entity-picker-grid {
        grid-template-columns: 1fr;
      }
    }

/* ==========================================================================
   11. Máscaras, Vignettes e Overlays
   ========================================================================== */

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(255, 255, 255, 0.9);
      z-index: 9999999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      backdrop-filter: blur(4px);
      /* BRAND-LOADER-UNIFY-1: Poppins (alinhado ao card de acesso); 'Inter' não era carregada. */
      font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }

    /* Map Vignette Overlay */
    .map-vignette {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 500;
    }

    /* Smooth Mask Border */
    .smooth-mask-border {
      filter: blur(var(--mask-blur, 4px));
      transition: filter 0.1s ease;
    }

/* ==========================================================================
   12. Categorias (Chips & Dots)
   ========================================================================== */
.category-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--category-color);
  flex-shrink: 0;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  background: var(--category-bg, #ccc);
  color: var(--category-text, #fff);
  border: 1px solid var(--category-border, transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.category-chip--filter {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: none;
  border: 1px solid #e2e8f0;
}

.category-chip--active {
  border-color: var(--category-color);
  background: var(--category-color);
  color: white;
}

/* ==========================================================================
   13. Animações
   ========================================================================== */

    @keyframes pin-idle {
      0% {
        transform: scale(1) translateY(0);
      }

      50% {
        transform: scale(1.15) translateY(-5px);
      }

      100% {
        transform: scale(1) translateY(0);
      }
    }

    @keyframes pin-highlight-pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      }

      70% {
        transform: scale(1.5);
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }
    }

    @keyframes slideIn {
      to {
        transform: translate(-50%, 0);
        opacity: 1;
      }
    }

    /* Animação de Pulsação para Favoritos — aplicada apenas no svg filho */
    @keyframes fav-pulse-svg {
      0% {
        transform: rotate(var(--icon-rotation, 0deg)) scale(1);
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
      }

      50% {
        transform: rotate(var(--icon-rotation, 0deg)) scale(1.15);
        filter: drop-shadow(0 0 8px currentColor);
      }

      100% {
        transform: rotate(var(--icon-rotation, 0deg)) scale(1);
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
      }
    }

    /* 3. FÍSICA DA ANIMAÇÃO (Keyframes): O movimento de 'brotar' */

    @keyframes tooltip-emerge-left {
      from {
        opacity: 0;
        transform: scale(0);
        /* Começa do zero absoluto para evitar "rastros" */
        /* Começa quase invisível e minúsculo */
      }

      to {
        opacity: 1;
        transform: scale(1);
        /* Expande até o tamanho real */
      }
    }

    @keyframes tooltip-emerge-top {
      from {
        opacity: 0;
        transform: scale(0);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

/* ==========================================================================
   14. Utilitários
   ========================================================================== */

    .hover-scale {
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: inline-block;
      /* Ensure transform works */
    }

    .hover-scale:hover {
      transform: scale(1.1);
      z-index: 5;
      /* Bring to front */
    }

    /* Painel de controle de vinhetas (máscara geográfica) */
    .vignette-panel {
      position: fixed;
      right: 70px;
      top: 330px;
      z-index: 1000;
      background: white;
      padding: 16px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 220px;
      max-height: 80vh;
      overflow-y: auto;
    }

/* ==========================================================================
   15. PinForm — Formulário de Criação/Edição de Pin
   ========================================================================== */
/* Usado via innerHTML em openPinFormModal() e openIconPicker().
   Nenhuma dependência de cascade com outras seções além de .btn--icon (seção 05)
   que é intencionalmente sobrescrito por .pf-icon-btn (36×36 vs 28×28). */

    .pf-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .pf-label {
      font-size: 11px;
      font-weight: 600;
      color: #666;
      display: block;
      margin-bottom: 4px;
    }

    .pf-input-group {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      min-width: 0;
      overflow: visible;
    }

    .pf-cat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 4px;
      background: #f9f9f9;
      padding: 6px;
      border-radius: 6px;
      border: 1px solid #eee;
      margin-bottom: 10px;
      min-height: 110px;
      max-height: 180px;
      overflow-y: auto;
      flex-shrink: 0;
    }

    .pf-icon-btn {
      width: 36px;
      height: 36px;
      border: 1px solid #ddd;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      padding: 0;
      background: white;
      cursor: pointer;
    }

    .pf-weight-box {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .pf-weight-input {
      width: 56px;
      flex-shrink: 0;
    }

    .pf-blocks-area {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .pf-block-line {
      margin-bottom: 6px;
    }

    .pf-block-controls {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .pf-block-remove {
      flex-shrink: 0;
    }

    .pf-footer-actions {
      display: flex;
      justify-content: flex-start;
      gap: 6px;
      margin-top: 12px;
      position: sticky;
      bottom: 0;
      background: #ffffff;
      padding-top: 8px;
      flex-shrink: 0;
    }

    .pf-zone-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 999px;
      background: #eef2ff;
      color: #3730a3;
    }

    .pf-muted-text {
      font-size: 10px;
      color: #666;
    }

    /* PINFORM-SAVE-LABEL-1: rótulo "Salvar"/"Criar" do botão de salvar do PinForm
       (#salvaPinBtn). Só o ícone em telas estreitas; texto reaparece a partir de
       400px — mesma intenção do autor original, agora em CSS válido. Substitui um
       @media escrito DENTRO de um style="" inline (CSS inválido que deixava o texto
       sempre oculto). Escopo: apenas este <span>. */
    .pf-save-label {
      display: none;
    }

    @media (min-width: 400px) {
      .pf-save-label {
        display: inline;
      }
    }

/* ==========================================================================
   16. Popup Read — Popup Principal de Leitura de Pin
   ========================================================================== */
/* Usado via innerHTML em criarPopupLeitura(). DOM imperativo.
   .popup-read-toggle é composto com .btn--ghost (section 05) — sobrescreve color/font-size. */

    .popup-read-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid #f0f0f0;
    }

    .popup-read-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .popup-read-title {
      font-size: 14px;
      font-weight: 700;
      color: #333;
      line-height: 1.2;
    }

    .popup-read-meta {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .popup-read-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 8px;
    }

    .popup-read-subpins {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 8px;
    }

    .popup-read-body {
      padding: 12px 14px 4px 14px;
      max-height: 250px;
      overflow-y: auto;
    }

    .popup-read-footer {
      padding: 8px 12px;
      background: #f9f9f9;
      border-top: 1px solid #eee;
      display: flex;
      gap: 8px;
      justify-content: space-between;
      border-radius: 0 0 12px 12px;
    }

    .popup-read-action-btn {
      width: 32px !important;
      height: 32px !important;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
    }

    .popup-read-action-btn svg {
      width: 16px !important;
      height: 16px !important;
    }

    /* PIN-POPUP-CONNECTION-ACTIONS-1: botão de texto compacto p/ ações por conexão
       (Localizar/Abrir) na lista detalhada do popup. Cor vem de btn--primary/btn--open;
       aqui só o tamanho/largura compacta da linha. Não confundir com popup-read-action-btn
       (botões-ícone 32×32 do footer geral). */
    .popup-read-conn-action {
      flex: 1;
      padding: 4px 0;
      font-size: 11px;
      font-weight: 600;
      border-radius: 6px;
      justify-content: center;
    }

    .popup-read-toggle {
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
    }

    .popup-read-sublist {
      display: none;
      margin-top: 8px;
    }

    /* CONNECTION-CARDS-UNIFY-1: card de conexão COMPARTILHADO entre a lista de
       conexões do popup de pin (string HTML/Leaflet, criarPopupLeitura) e a seção
       colapsável "CONEXÕES DA ZONA" da janela flutuante de zona (JSX). Mesma aparência
       nos dois lugares e funciona tanto em HTML string quanto em JSX. Estreito por
       design — não é design system: reaproveita o chip canônico (category-chip--filter) e .btn/.btn--open
       existentes SEM alterá-los; .connection-card-actions .btn só dimensiona o botão
       dentro do card (escopo descendente, não toca .btn global). .connection-section-toggle
       é o cabeçalho clicável de colapso (mesmo conceito do toggleSubList do popup). */
    .connection-card {
      padding: 7px 10px;
      border-bottom: 1px solid #f1f5f9;
      background: #fff;
    }
    .connection-card-header {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      row-gap: 3px;
    }
    .connection-card-title {
      font-weight: 600;
      font-size: 13px;
      color: #334155;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }
    .connection-card-code {
      font-size: 9px;
      font-weight: 700;
      color: #94a3b8;
      background: #f1f5f9;
      padding: 1px 5px;
      border-radius: 4px;
    }
    /* INFOBLOCKS-READ-UNIFY-1: .connection-card-details/.connection-card-detail é a ÚNICA
       fonte do estilo compacto "Label: valor" de LEITURA — reutilizada (sem renomear) também
       nos infoBlocks read-only do menu lateral, do card aberto de pin, da janela flutuante de
       pin e da seção INFORMAÇÕES da zona. Substitui ali a aparência pesada de input
       (.info-text/.info-block-value com caixa cinza). Editores e blocos de imagem não usam. */
    .connection-card-details {
      margin-top: 3px;
    }
    .connection-card-detail {
      font-size: 11px;
      line-height: 1.35;
      color: #64748b;
    }
    .connection-card-detail b {
      color: #475569;
      font-weight: 600;
    }
    .connection-card-actions {
      display: flex;
      margin-top: 6px;
    }
    .connection-card-actions .btn {
      flex: 1;
      padding: 5px 0;
      font-size: 11px;
      font-weight: 600;
      border-radius: 6px;
    }
    /* Cabeçalho clicável de colapso da seção "CONEXÕES DA ZONA". O texto continua via
       .connections-section-title (reaproveitada); aqui só o reset de botão + ícone. */
    .connection-section-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      color: #64748b;
    }

/* ==========================================================================
   17. Modais Secundários — Export Dialog e Block Line
   ========================================================================== */
/* Usado via innerHTML em handlerExportDialog() e openPinFormModal().
   .block-line é sempre composto com .pf-block-line (section 15) — valores idênticos,
   sem conflito. Sem pseudo-states. Sem dependência de z-index ou layout externo. */

    .block-line {
      margin-bottom: 6px;
    }

    .export-dialog-title {
      margin: 0 0 16px 0;
      font-size: 18px;
      color: #1e293b;
    }

    .export-dialog-input {
      width: 100%;
      padding: 10px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      font-size: 14px;
      font-family: monospace;
      margin-bottom: 20px;
    }

    .export-dialog-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }

/* ==========================================================================
   18. Icon Picker / Pin Selector
   ========================================================================== */
/* Usado via innerHTML em openIconPicker().
   .icon-item: seleção via inline style (background/border) que sobrescreve o default da classe.
   .icon-picker-grid: overflow-y:auto ativo apenas quando o container pai tem altura constrained. */

    .icon-item {
      width: auto;
      min-height: 58px;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border-radius: 8px;
      cursor: pointer;
      border: 1px solid transparent;
      background: #f3f4f6;
      transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }

    /* ICON-AUDIT-1B-A: label da key abaixo do ícone para auditoria visual. */
    .icon-item-label {
      font-size: 9px;
      line-height: 1.1;
      color: #64748b;
      text-align: center;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon-item:hover {
      background: #e5e7eb;
      border-color: #cbd5e1;
      transform: scale(1.05);
    }

    .icon-picker-title {
      margin: 0;
      font-size: 16px;
      color: #333;
    }

    .icon-picker-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      overflow-y: auto;
      padding: 2px;
    }

/* ==========================================================================
   19. Surface Stack Manager
   ========================================================================== */
/* Fase Modal 1.1 — Kinds: tool(300000) | window(320000) | dialog(400000) | modal(420000)
   z-index gerenciado exclusivamente via inline style em registerAppSurface().
   CSS aqui é apenas visual (position:fixed, filter, zone shadows) — sem z-index hardcoded.
   Compounds .app-modal-dialog e .cat-manager movidos para Seção 21 (Modal System),
   onde aparecem DEPOIS de .app-modal-dialog base — cascade correto.
   .zone-list-sidebar permanece aqui por ser infraestrutura de painel, não modal. */

/* Garante position:fixed nos elementos registrados que ainda não o têm */
.app-surface { position: fixed; }

/* Surface inteira inativa: desaturação leve */
.app-surface--inactive {
  filter: saturate(0.92);
  transition: filter 0.15s ease;
}

/* zone-list-sidebar: sombra lateral conforme estado */
.zone-list-sidebar.app-surface--active {
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.22);
}
.zone-list-sidebar.app-surface--inactive {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.10);
  opacity: 0.97;
}

/* ==========================================================================
   20. Modal System — Overlay, Dialog, Surface States, Botões
   ========================================================================== */
/* ── Contratos de Overlay e Stacking ─────────────────────────────────────
   Hierarquia de z-index (ascendente):
     FABs / tooltips Leaflet       : 1000–2000
     Window connections SVG        : APP_SURFACE_Z_BASES.window - 1 (319999)
     Super Planilha (JSX inline)   : 100000
     Mask Manager (JSX inline)     : 150000
     .app-modal-overlay (CSS base) : 200000  ← fallback / showMaintenanceModal
     Surface tier — tool           : 300000–319999  (cat/weight/zone-list)
     Surface tier — window         : 320000–399999  (bigPicture, pinForm)
     Surface tier — dialog         : 400000–419999  (iconPicker, pinSelector, export)
     Surface tier — modal          : 420000+         (modais bloqueantes)

   CONTRATOS:
   (1) Todo .app-modal-overlay criado imperativamente É registrado via
       registerAppSurface() — inline style sobrescreve z-index CSS.
   (2) .app-modal-overlay renderizado por React sem AppSurfacePortal
       (ex: showMaintenanceModal) USA o z-index CSS de 200000.
   (3) Modificadores de .app-modal-overlay (se criados) são puramente visuais —
       NÃO definem z-index; definir abaixaria o valor base silenciosamente.
       (O antigo .app-modal-overlay--dark foi removido por falta de uso — CSS-DEAD-1.)
   (4) .modal-form-header usa z-index:20 LOCAL dentro do stacking context
       do dialog — NÃO é z-index global.
   ───────────────────────────────────────────────────────────────────────── */

    .app-modal-overlay {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 200000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .app-modal-dialog {
      background: white;
      width: 300px;
      max-height: 80%;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .app-modal-dialog--wide {
      width: 100%;
      max-width: 1100px;
      max-height: 95vh;
      border-radius: 16px;
      overflow-y: auto;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      position: relative;
    }

    .app-modal-dialog--pin-form {
      width: min(700px, calc(100vw - 32px));
      max-height: calc(100vh - 48px);
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .app-modal-dialog--confirm {
      max-width: 500px;
      width: 90%;
      padding: 24px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      display: block; /* revert flex from base dialog just in case */
    }

    /* CATEGORY-MODAL-RESPONSIVE-GRID-1: largura própria do modal de categorias (Pin/Conexão),
       maior que o padrão para acomodar o grid de 3 colunas. Compound selector (após a base)
       para vencer .app-modal-dialog{width} no cascade. Não afeta outros modais. */
    .app-modal-dialog.category-picker-dialog {
      width: min(720px, calc(100vw - 32px));
      max-height: min(90vh, 760px);
    }

    /* CATEGORY-MODAL-RESPONSIVE-GRID-1: largura própria dos modais de VÍNCULO (pin/conexão/zona)
       para acomodar a lista em 2 colunas. Compound selector (após a base). Não afeta outros modais. */
    .app-modal-dialog.entity-picker-dialog {
      width: min(720px, calc(100vw - 32px));
      max-height: min(90vh, 760px);
    }

/* Surface state compounds — posicionados APÓS .app-modal-dialog base:
   garantia de cascade que box-shadow active/inactive sobrescreve o base. */

/* Dialog/panel ativo: sombra mais proeminente */
.app-surface--active .app-modal-dialog,
.app-surface--active .cat-manager {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  transition: box-shadow 0.15s ease;
}

/* Dialog/panel inativo: sombra reduzida + leve fade */
.app-surface--inactive .app-modal-dialog,
.app-surface--inactive .cat-manager {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  opacity: 0.96;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Base: 28×28 transparent icon button — fits template literals & JSX headers */
.modal-action-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  background: transparent;
  color: #64748b;
  flex-shrink: 0;
  padding: 0;
}
.modal-action-btn:hover {
  background: rgba(100, 116, 139, .12);
}
.modal-action-btn:active {
  transform: scale(.92);
}
.modal-action-btn svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* Variants */
.modal-action-btn--close {
  color: #64748b;
}
.modal-action-btn--close:hover {
  background: rgba(100, 116, 139, .12);
  color: #334155;
}

.modal-action-btn--minimize {
  color: #94a3b8;
}
.modal-action-btn--minimize:hover {
  background: rgba(148, 163, 184, .12);
  color: #64748b;
}

/* Template literal popup "box" buttons (zone/vignette popups) — uniform 28×28 */
.popup-box-btn {
  width: 32px !important;
  height: 32px !important;
  border: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity .15s ease, transform .1s ease;
}
.popup-box-btn:hover {
  opacity: 0.85;
}
.popup-box-btn:active {
  transform: scale(.92);
}
.popup-box-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

.popup-box-btn--edit  { background: #3b82f6; }
.popup-box-btn--delete { background: #ef4444; }
.popup-box-btn--locate { background: #3b82f6; }
.popup-box-btn--open   { background: #8b5cf6; }

.modal-form-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
}
.modal-form-header__title {
  min-width: 0;
  flex: 1;
}
.modal-form-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.modal-save-btn {
  white-space: nowrap;
}

/* ==========================================================================
   21. Template Literals e DOM Imperativo
   ========================================================================== */

    .subpin-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--subpin-color, #999);
      flex-shrink: 0;
    }

    .subpin-dot-container {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .subpin-card {
      position: absolute;
      background: white;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      padding: 8px;
      min-width: 160px;
      z-index: 10;
      display: none;
    }

    .subpin-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-right: 8px;
    }

    .unlink-x {
      cursor: pointer;
      font-size: 10px;
      color: #999;
      margin-left: -2px;
    }

    .unlink-x:hover {
      color: #ef4444;
    }

/* S7.0/S7.6 — Zone Pins */
.zone-pin-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.zone-pin-label {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--zone-color, #64748b);
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
  user-select: none;
  transform: translate(-50%, -50%);
  transition: box-shadow 0.15s ease;
}

.zone-pin-marker--selected .zone-pin-label {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 14px rgba(15, 23, 42, 0.25);
}

.zone-pin-marker--unlocked .zone-pin-label {
  cursor: grab;
}

.zone-pin-marker--unlocked .zone-pin-label:active {
  cursor: grabbing;
}

.zone-pin-marker--locked .zone-pin-label {
  cursor: pointer;
}

.zone-link-inherited-badge {
  display: inline-block;
  font-size: 9px;
  background: #e2e8f0;
  color: #475569;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  margin-left: 6px;
  font-weight: 700;
  font-style: italic;
}

/* ── S8.0 Zone Manager ────────────────────────────────── */

.zone-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
}

/* .zone-manager-search: aparência governada por .app-search-input (fonte única). */

.zone-manager-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.zone-manager-badge--inheritance {
  background: #dcfce7;
  color: #166534;
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 5px;
}

.zone-manager-zone-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.zone-manager-zone-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  margin: 0 8px 8px;
  overflow: hidden;
  transition: background 0.1s, box-shadow 0.2s ease, border-color 0.2s ease;
}
.zone-manager-zone-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-color: #e2e8f0;
}
.zone-manager-zone-card--expanded {
  background: #fafafa;
}

.zone-manager-zone-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  cursor: pointer;
  user-select: none;
}
.zone-manager-zone-summary:hover {
  background: #f8fafc;
}

.zone-manager-zone-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.zone-manager-zone-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zone-manager-zone-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.zone-manager-zone-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}
.zone-manager-zone-actions button:hover {
  filter: brightness(0.93);
}

/* ==========================================================================
   22. Utilitários (Refatoração Fases 4 e 5)
   ========================================================================== */

.ui-label-small {
  font-size: 10px;
  color: #999;
  font-weight: 700;
  text-transform: uppercase;
}

.ui-input-inline {
  border: none;
  border-bottom: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  background: transparent;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fixed-bottom-panel {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 12px 20px;
  border-radius: 50px;
  display: flex;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 2000;
}

.flex-gap-4 { gap: 4px; }
.flex-gap-8 { gap: 8px; }

/* S13.1 — Utilitários de Componente (extraídos de inline styles JSX) */
.ui-badge-count {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 4px;
}

.ui-meta-text {
  font-size: 10px;
  color: #94a3b8;
}

.ui-empty-hint {
  color: #94a3b8;
  font-size: 11px;
  font-style: italic;
  display: block;
  margin-bottom: 4px;
}

.ui-control-label {
  font-size: 11px;
  font-weight: 500;
  color: #334155;
}

/* Seletor de cor redondo (input[type=color] pill) */
.app-color-dot-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
}
.app-color-dot-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.app-color-dot-input::-webkit-color-swatch {
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
}
.app-color-dot-input::-moz-color-swatch {
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
}


/* ==========================================================================
   23. Sidebar UX Refinements (Lote 1.1)
   ========================================================================== */

:root {
  --sidebar-width: min(400px, 92vw);
}

/* Glassmorphism Sidebar Base */




.sidebar-glass.is-open {
  width: var(--sidebar-width);
  border-right: 1px solid rgba(0,0,0,0.1);
}

.sidebar-inner-wrap {
  min-width: var(--sidebar-width);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Title and Color Picker */
.sidebar-title-input {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}







/* Category Pills */
.sidebar-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.sidebar-filter-chip:hover {
  transform: translateY(-1px);
  filter: brightness(0.96);
}

/* UI Chevron */
.ui-chevron {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-chevron.is-open {
  transform: rotate(180deg);
}

.ui-chevron.left {
  transform: rotate(90deg);
}

.ui-chevron.right {
  transform: rotate(-90deg);
}

/* CHEVRON-UNIFY-CLASS-1: caixa quadrada padrão para setas de dropdown/expand-collapse.
   Wrapper visual; a rotação continua no .ui-chevron interno via .is-open. */
.ui-chevron-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.ui-chevron-button:hover {
  background: #e5e7eb;
}

/* CHEVRON-CONN-MENU-1: variante compacta p/ menus densos (ex.: headers de seção
   do menu de conexão, font-size 10px). Só sobrescreve o tamanho da caixa. */
.ui-chevron-button--compact {
  width: 28px;
  height: 28px;
}




.sidebar-color-picker-wrap {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  aspect-ratio: 1/1;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  display: block;
  position: relative;
  border: 1px solid rgba(0,0,0,0.1);
}


.sidebar-glass {
  /* SIDEBAR-FROSTED-OVERLAY-FIX-1: sidebar sai do fluxo flex e vira overlay sobre o
     mapa. Antes era item flex em fluxo (empurrava o #map para a direita), então não
     havia mapa atrás e o backdrop-filter borrava só o branco do documento. Com
     position:absolute o #map (flex:1) passa a ocupar 100% da largura e fica atrás da
     sidebar, fazendo o vidro fosco mostrar o mapa. width/.is-open/transition/alpha
     intactos. */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  min-width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: none;
  z-index: 1000;
  background: rgba(255, 255, 255, var(--sidebar-bg-alpha, 1));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
}

.sidebar-color-picker-input {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
}
.sidebar-color-picker-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.sidebar-color-picker-input::-webkit-color-swatch {
  border: 0;
  border-radius: 999px;
}

/* --- UNIFIED VISUAL ISLANDS --- */
.map-island {
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 4px;
  display: flex;
}
.map-island--horizontal {
  flex-direction: row;
  gap: 10px;
}
.map-island--vertical {
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   24. Guia do Usuário (USER-GUIDE-INAPP-MODAL-1)
   Apenas 2 utilitárias mínimas: corpo rolável do modal e tecla de atalho.
   Sem nova gramática de botão/chip/card/badge (reaproveitados do design system).
   ========================================================================== */
.user-guide-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px 16px;
}
.user-guide-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  line-height: 1.4;
}