/* ════════════════════════════════════════════════════════════════
   RMF — CSS da home / index (mapa fullscreen)
   Extraído dos blocos <style> inline de indexbeta.html.

   A home segue o design do app Flutter (Material 3, seed #2563EB) e por
   isso NÃO usa a paleta compartilhada de m3-tokens.css (#4E5B8E). As cores
   ficam centralizadas nos tokens --rmf-* logo abaixo (cada token = 1 valor;
   o tema escuro usa os tokens de sufixo -dk nos seus próprios blocos).

   Carregue DEPOIS do Tailwind (várias regras usam !important p/ vencê-lo):
     <link rel="stylesheet" href="/res/assets/css/index.css">
   Requer Font Awesome e a fonte Inter (res/fonts/fonts.css).
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   Tokens de cor (--rmf-*) — paleta do app Flutter (seed #2563EB).
   Cada token equivale a UM valor literal; trocar aqui reflete no arquivo
   inteiro. Os sufixos -dk são os valores já usados nos blocos de tema
   escuro (a home mantém os dois mecanismos: @media e classe .dark).
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Marca (seed oficial #4E5B8E — alinhado ao m3-tokens) */
  --rmf-brand:        #4E5B8E;            /* primary */
  --rmf-brand-light:  #B7C0E5;            /* inverse-primary (acento claro) */
  --rmf-brand-300:    #B7C0E5;            /* acento no tema escuro */

  /* Neutros (escala slate) */
  --rmf-white:        #FFFFFF;
  --rmf-ink:          #1E293B;            /* slate-800 — texto forte */
  --rmf-ink-muted:    #475569;            /* slate-600 */
  --rmf-ink-subtle:   #64748B;            /* slate-500 — ícone/placeholder */
  --rmf-ink-faint:    #94A3B8;            /* slate-400 */

  /* Estado ativo (chips / links / FAB) — família primary do m3 */
  --rmf-state-bg:     #DCE1FA;            /* primary-container (claro) */
  --rmf-state-fg:     #36426A;            /* texto sobre o container (claro) */
  --rmf-state-bg-dk:  #36426A;            /* primary-container (escuro) */
  --rmf-state-fg-dk:  #DCE1FA;            /* on-primary-container (escuro) */
  --rmf-state-bd-dk:  #B7C0E5;            /* inverse-primary (escuro) */

  /* Navegação ativa (rail / bottom-nav) */
  --rmf-nav-bg:       rgb(216,220,243);
  --rmf-nav-fg:       rgb(73,77,91);
  --rmf-nav-bg-dk:    rgb(70,75,94);
  --rmf-nav-fg-dk:    rgb(221,224,246);

  /* Superfícies */
  --rmf-rail-bg:      rgb(250,248,254);   /* rail/bottom-nav (claro) */
  --rmf-pill-dk:      rgb(41,42,46);      /* pill (escuro) */
  --rmf-dk-surface:   rgb(18,19,23);      /* painéis/modais (escuro) */
  --rmf-dk-surface-2: rgb(18,19,24);      /* rail/bottom-nav (escuro) */
  --rmf-dk-border:    rgb(39,40,46);      /* bordas/divisores (escuro) */
  --rmf-dk-on:        rgb(197,198,207);   /* texto/ícone (escuro) */
  --rmf-dk-on-2:      rgb(227,226,232);   /* texto forte (escuro) */
}

/* ════════════════════════════════════════════════════════════════
   Rebrand — sobrescreve o azul do Tailwind pela família #4E5B8E.
   Carregado DEPOIS do build do Tailwind, vence pelos vars:
     • --color-brand  → todas as utilities bg-brand/text-brand/…
     • escala --color-blue-* (usada nas utilities) → tons lavanda;
       o escopo claro/escuro é preservado (as utilities dark: já
       vivem em @media prefers-color-scheme).
     • --color-blue-700 = brand → hover:bg-blue-700 fica igual ao
       fundo: hover sem mudança de cor (só sombra/escala, p/ casar
       com os FABs).
   ════════════════════════════════════════════════════════════════ */
:root {
  /* !important garante que estes vars vençam o @layer theme do Tailwind,
     independente de ordem de carregamento (o build é preload+async). */
  --color-brand:       #4E5B8E !important;   /* era #2563EB */
  --color-brand-light: #DCE1FA !important;   /* era #eff6ff (azul) → primary-container */
  --color-blue-50:  #ECEEFB !important;
  --color-blue-100: #DCE1FA !important;   /* primary-container */
  --color-blue-200: #C5CBEC !important;
  --color-blue-300: #B7C0E5 !important;   /* inverse-primary (acento dark) */
  --color-blue-400: #B7C0E5 !important;
  --color-blue-700: #4E5B8E !important;   /* = brand → neutraliza o hover */
  --color-blue-800: #36426A !important;   /* texto escuro (claro) / borda (escuro) */
  --color-blue-900: #2B3556 !important;
}


/* ════════════════════════════════════════════════════════════════
   Mapa, overlays, header flutuante, pill de busca e chips de modo
   ════════════════════════════════════════════════════════════════ */
#map {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.overlay-ativo {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            z-index: 9999 !important;
        }
        .modal-ativo {
            transform: scale(1) !important;
        }

/* ════════════════════════════════════════════════════════════════
   Alinhamento visual com a home do app Flutter (Material 3 / seed #2563EB).
   O #map já é fullscreen; o header deixa de ser barra sólida e vira uma
   camada flutuante transparente — só a pill de busca e os chips de modo
   capturam toque, o resto deixa o mapa interagir por baixo.
   ════════════════════════════════════════════════════════════════ */
header.rmf-floating {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column;            /* mobile: busca em cima, chips embaixo (igual phone do Flutter) */
  align-items: stretch;
  gap: 8px;
  height: auto !important;
  padding: 8px !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  pointer-events: none;
}
header.rmf-floating > * { pointer-events: auto; }

/* Pill de busca — colorScheme.surface, radius 28, elevation ~3 */
.rmf-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;           /* mobile: largura cheia (override no ≥640) */
  min-width: 0;
  padding: 4px 6px;
  border-radius: 28px;
  background: var(--rmf-white);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark) {
  .rmf-pill {
    background: var(--rmf-pill-dk);
    box-shadow: 0 2px 10px rgba(0,0,0,.55);
  }
}
.rmf-search-box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding-left: 6px;
}
.rmf-search-ic { font-size: 14px; color: var(--rmf-ink-subtle); flex: none; }
.dark .rmf-search-ic { color: var(--rmf-ink-faint); }
/* Logo RMF como glifo de fonte (fa-rmf): cor segue o placeholder "Buscar cidade…",
   igual ao colorFilter do app no Flutter. */
.rmf-search-logo {
  width: 46px; height: 46px; flex: none;
  font-size: 40px;
  color: var(--rmf-ink-subtle);
  display: flex; align-items: center; justify-content: center;
}
@media (prefers-color-scheme: dark) { .rmf-search-logo { color: var(--rmf-dk-on); } }
.dark .rmf-search-logo { color: var(--rmf-dk-on); }
.rmf-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--rmf-ink);
}
.rmf-search::placeholder { color: var(--rmf-ink-subtle); }
@media (prefers-color-scheme: dark) {
  .rmf-search { color: var(--rmf-dk-on); }
  .rmf-search::placeholder { color: var(--rmf-dk-on); }
}
.rmf-search:disabled { opacity: .5; }

/* Ícones de ação dentro da pill — onSurfaceVariant */
.rmf-pill-icon {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 9999px;
  background: transparent; cursor: pointer;
  color: var(--rmf-ink-muted); font-size: 16px;
  transition: background .15s, color .15s;
}
.rmf-pill-icon:hover { background: rgba(15,23,42,.06); }
@media (prefers-color-scheme: dark) { .rmf-pill-icon { color: var(--rmf-dk-on); } }
.dark .rmf-pill-icon:hover { background: rgba(255,255,255,.08); }
/* Favoritos: mesma cor dos demais ícones da pill (era dourado #F59E0B) */
.rmf-pill-icon.rmf-clear { width: 32px; height: 32px; font-size: 13px; }
.rmf-pill-divider {
  flex: none; width: 1px; height: 20px; margin: 0 4px;
  background: rgba(100,116,139,.5);
}

/* ── Balão de notificações: pequeno popover que aponta para o sino da pill,
   na cor da marca (substitui o antigo banner centralizado). ── */
.notif-balloon {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  z-index: 2100;
  pointer-events: none;            /* só o card recebe toques */
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  transform-origin: top right;
  transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.notif-balloon.hidden { display: none; }
.notif-balloon.is-open { opacity: 1; transform: translateY(0) scale(1); }
/* Seta (left definido via JS para cair exatamente sob o sino) */
.notif-balloon__arrow {
  position: absolute;
  top: -6px;                       /* metade superior fica acima do card → ponta p/ cima */
  width: 14px; height: 14px;
  margin-left: -7px;               /* centraliza no left calculado */
  background: var(--rmf-brand);
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
.notif-balloon__card {
  position: relative;
  pointer-events: auto;
  width: min(290px, calc(100% - 4px));
  margin-left: auto;               /* encosta à direita, perto do sino */
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--rmf-brand);
  color: var(--rmf-white);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.notif-balloon__close {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: var(--rmf-white);
  font-size: 12px; cursor: pointer; transition: background .15s;
}
.notif-balloon__close:hover { background: rgba(255,255,255,.26); }
.notif-balloon__row { display: flex; align-items: flex-start; gap: 10px; padding-right: 22px; }
.notif-balloon__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: var(--rmf-white); font-size: 15px;
}
.notif-balloon__text { min-width: 0; }
.notif-balloon__title { margin: 1px 0 2px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--rmf-white); }
.notif-balloon__body { margin: 0; font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.86); }
.notif-balloon__cta {
  margin-top: 11px; width: 100%; padding: 8px 12px; border: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--rmf-white); color: var(--rmf-brand);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: opacity .15s;
}
.notif-balloon__cta:hover { opacity: .9; }
.notif-balloon__cta i { font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   DROPDOWN DA BUSCA — espelha o SearchOverlay do app (M3).
   Tile de Busca Avançada (tint de primary, some ao digitar), seções
   com header (ícone+rótulo+ação) e cards surfaceContainerHigh com
   divisores recuados. Tudo via tokens --md-sys-color-*, que já viram
   sozinhos no dark — sem variantes .dark aqui.
   ════════════════════════════════════════════════════════════════ */

/* Busca Avançada: tile com leve tint de primary; ícone e título em primary. */
.rmf-adv-tile {
  display: flex; align-items: center; gap: 12px;
  margin: 8px; padding: 12px 14px;
  width: calc(100% - 16px);
  border: none; cursor: pointer; text-align: left;
  border-radius: 16px;
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  transition: background .15s;
}
.rmf-adv-tile:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
}
.rmf-adv-tile__ic   { flex: none; font-size: 20px; color: var(--md-sys-color-primary); }
.rmf-adv-tile__body { min-width: 0; flex: 1; }
.rmf-adv-tile__title{ font-size: 14px; font-weight: 600; color: var(--md-sys-color-primary); }
.rmf-adv-tile__sub  { font-size: 12px; margin-top: 1px; color: var(--md-sys-color-on-surface-variant); }
.rmf-adv-tile__chev { flex: none; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }

/* Header de seção (Buscas recentes / Resultados). */
.rmf-srch-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 6px;
}
.rmf-srch-head__ic    { font-size: 15px; color: var(--md-sys-color-on-surface-variant); }
.rmf-srch-head__label { flex: 1; font-size: 13px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.rmf-srch-head__action {
  flex: none; border: none; background: none; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--md-sys-color-primary);
}
.rmf-srch-head__action:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }

/* Card que envolve a lista (recentes/resultados). */
.rmf-srch-card {
  margin: 0 8px 8px; border-radius: 16px; overflow: hidden;
  background: var(--md-sys-color-surface-container-high);
}

/* Item da lista. Divisor recuado (estilo Google Maps): alinhado após o ícone. */
.rmf-srch-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 6px 10px 14px; cursor: pointer;
  transition: background .12s;
}
.rmf-srch-item:hover,
.rmf-srch-item.rmf-sel { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
.rmf-srch-item:not(:first-child)::before {
  content: ''; position: absolute; left: 44px; right: 0; top: 0; height: 1px;
  background: var(--md-sys-color-outline-variant);
}
.rmf-srch-item__ic   { flex: none; width: 18px; text-align: center; font-size: 16px; color: var(--md-sys-color-on-surface-variant); }
.rmf-srch-item__body { min-width: 0; flex: 1; }
.rmf-srch-item__title{ font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmf-srch-item__sub  { font-size: 12px; margin-top: 1px; color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmf-srch-item__del {
  flex: none; width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-size: 13px; color: var(--md-sys-color-on-surface-variant);
  transition: background .12s, color .12s;
}
.rmf-srch-item__del:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); color: var(--md-sys-color-on-surface); }

/* Spinner enquanto busca. */
.rmf-srch-loading { display: flex; justify-content: center; padding: 22px; font-size: 20px; color: var(--md-sys-color-primary); }

/* Estado vazio (nenhuma cidade encontrada). */
.rmf-srch-hint { padding: 24px 22px; text-align: center; }
.rmf-srch-hint__ic    { font-size: 32px; color: var(--md-sys-color-outline); }
.rmf-srch-hint__title { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--md-sys-color-on-surface); }
.rmf-srch-hint__body  { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--md-sys-color-on-surface-variant); }
.rmf-srch-hint__btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 16px; border: none; cursor: pointer;
  border-radius: 9999px; font-size: 13px; font-weight: 600;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.rmf-srch-hint__btn:hover { filter: brightness(0.97); }

/* Chips de modo — mode_chips_bar (radius 18, ativo = primaryContainer) */
.rmf-chips {
  display: flex; align-items: center; gap: 8px;
  width: 100%;           /* mobile: linha própria abaixo da busca (override no ≥640) */
  min-width: 0;
  padding: 4px 2px;      /* folga vertical pra sombra dos chips não cortar */
  overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.rmf-chips::-webkit-scrollbar { display: none; }
/* Estado ocultado quando qualquer modal/painel está aberto. */
.rmf-chips.chips-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* No mobile os chips são uma 2ª linha, exatamente onde os painéis sobem; só
   visibility:hidden deixaria-os invisíveis mas ocupando a camada (z-1100) por
   cima do cabeçalho (X/share). display:none remove-os de vez do hit-testing.
   No desktop os chips ficam na linha da busca (não sobrepõem o painel) e usar
   display:none faria a pill esticar/“pular” — por isso só aplicamos no mobile. */
@media (max-width: 639px) {
  .rmf-chips.chips-hidden { display: none; }
}
.rmf-chips .tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; flex: none;
  height: 32px; padding: 0 12px;
  border-radius: 18px;
  font-size: 13px; font-weight: 600; line-height: 1;
  background: var(--rmf-white); color: var(--rmf-ink);
  border: 1px solid rgba(100,116,139,.45);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rmf-chips .tab-btn i { font-size: 14px; }
@media (prefers-color-scheme: dark) {
  .rmf-chips .tab-btn {
    background: var(--rmf-dk-surface);
    color: var(--rmf-dk-on-2);
    border-color: var(--rmf-dk-border);
  }
}
.rmf-chips .tab-btn.tab-active {
  background: var(--rmf-state-bg);
  color: var(--rmf-state-fg);
  border-color: var(--rmf-brand);
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  .rmf-chips .tab-btn.tab-active {
    background: var(--rmf-state-bg-dk);
    color: var(--rmf-state-fg-dk);
    border-color: var(--rmf-state-bd-dk);
    box-shadow: 0 2px 5px rgba(0,0,0,.35);
  }
}

/* ≥640px (tablet/desktop): busca à esquerda, chips à direita na mesma linha.
   Abaixo disso a coluna do header empilha os chips sob a busca (phone). */
@media (min-width: 640px) {
  header.rmf-floating { flex-direction: row; align-items: center; }
  .rmf-pill { flex: 1 1 auto; width: auto; max-width: var(--search-w, 480px); }
  .rmf-chips { flex: 0 1 auto; width: auto; }
}

/* CTA "Baixar app" — botão de AÇÃO (não filtro): preenchido com a cor da marca
   e cantos mais retos (10px vs. 18px dos chips). SÓ NO DESKTOP: fixado à direita
   (margin-left:auto), o que também limita até onde a barra de chips se estende.
   No mobile o CTA vive na bottom-nav (botão .bn-cta ao lado do "Mais").
   Some junto com os chips quando abre painel/modal (classe .chips-hidden). */
.rmf-getapp {
  display: none;                      /* mobile: oculto (CTA vive na bottom-nav) */
  align-items: center; gap: 11px;
  flex: none; white-space: nowrap;
  height: auto; padding: 7px 24px;    /* mais alto (2 linhas) e mais largo lateralmente */
  border-radius: 10px;                /* cantos mais quadrados */
  color: #fff; background: var(--rmf-brand);
  border: 1px solid var(--rmf-brand);
  box-shadow: 0 2px 6px rgba(78,91,142,.35);
  cursor: pointer;
  transition: filter .15s, box-shadow .15s, transform .05s, opacity .22s ease, visibility .22s ease;
}
.rmf-getapp i { font-size: 20px; }
/* Bloco de texto em 2 linhas: título + subtítulo */
.rmf-getapp .getapp-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.rmf-getapp .getapp-title { font-size: 14px; font-weight: 700; line-height: 1.15; }
.rmf-getapp .getapp-sub { font-size: 10.5px; font-weight: 500; line-height: 1.1; opacity: .85; }
.rmf-getapp:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(78,91,142,.45); }
.rmf-getapp:active { transform: translateY(1px); }
.rmf-getapp.chips-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 640px) {
  .rmf-getapp { display: inline-flex; margin-left: auto; }   /* desktop: canto direito */
}

/* Botão CTA na bottom-nav (mobile) — cor e forma diferentes dos demais itens:
   ícone preenchido com a marca (vs. transparente) e rótulo na cor da marca.
   Compacto (flex:none) pra não espremer os outros 4 itens da navbar.
   Escondido no app nativo via .getapp-entry (ver JS). */
.bn-cta { flex: 0 0 auto; padding: 6px 12px; }
.bn-cta .bn-ic {
  width: 46px;
  background: var(--rmf-brand);
  color: #fff;
  border-radius: 12px;                /* forma um pouco mais quadrada que os 16px dos demais */
  box-shadow: 0 2px 6px rgba(78,91,142,.4);
}
.bn-cta .bn-lbl { color: var(--rmf-brand); font-weight: 700; white-space: nowrap; }
.bn-cta:active .bn-ic { filter: brightness(1.1); }
@media (prefers-color-scheme: dark) {
  .bn-cta .bn-lbl { color: var(--rmf-brand-300); }
}

/* ════════════════════════════════════════════════════════════════
   Navegação principal (rail desktop / bottom-nav mobile / sheet "Mais")
   ════════════════════════════════════════════════════════════════ */
/* ============================================================
   NAVEGAÇÃO PRINCIPAL
   - Desktop/tablet (≥640px): rail vertical à ESQUERDA (72px),
     protegido por safe-area-inset-left/bottom.
   - Mobile (<640px): barra inferior, protegida por
     safe-area-inset-bottom.
   ============================================================ */
:root {
  --rail-w: 0px;                                       /* mobile: sem rail */
  --bottomnav-h: calc(60px + env(safe-area-inset-bottom, 0px));
  --search-w: 480px;                                   /* largura da caixa de busca (pill) no desktop */
}
@media (min-width: 640px) {
  :root {
    --rail-w: calc(78px + env(safe-area-inset-left, 0px));
    --bottomnav-h: 0px;                                /* desktop: sem barra inferior */
  }
}

/* Esconde a navegação até o app ficar pronto */
body:not(.app-ready) #rmf-rail,
body:not(.app-ready) #rmf-bottomnav { display: none !important; }

/* Loading do mapa = spinner na caixa de busca (substitui o splash grande) */
#loading { display: none !important; }
/* Barrinha indeterminada do mapa (.lpb "vai e volta") removida: o único
   indicador de carregamento agora é o spinner na caixa de busca. */
#map-progress-bar { display: none !important; }
/* Spinner da busca: aparece na carga inicial (até app-ready) e sempre que o
   mapa estiver carregando tiles (.map-loading espelha o dataloading/idle). */
/* Cor herdada de .rmf-pill-icon (mesma dos demais ícones da caixa de busca). */
#search-spinner { display: none; }
body:not(.app-ready) #search-spinner,
body.map-loading #search-spinner { display: flex; }

/* ---------- Rail vertical (desktop/tablet) ---------- */
#rmf-rail { display: none; }
@media (min-width: 640px) {
  #rmf-rail {
    position: fixed;
    top: 0;                                            /* vai até o topo, protegido pelo safe-inset abaixo */
    left: 0;
    bottom: 0;
    width: var(--rail-w);
    z-index: 890;                                      /* header é transparente+pointer-none, então o rail aparece/clica por baixo dele */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--rmf-rail-bg);
    border-right: 1px solid rgba(100,116,139,.16);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  #rmf-rail::-webkit-scrollbar { display: none; }
  /* Busca (header) começa depois do rail */
  header.rmf-floating { padding-left: calc(var(--rail-w) + 8px) !important; }
}
@media (min-width: 640px) and (prefers-color-scheme: dark) {
  #rmf-rail {
    background: var(--rmf-dk-surface-2);
    border-right-color: rgba(148,163,184,.14);
  }
}
#rmf-rail .rail-spacer { flex: 1 1 auto; }
#rmf-rail .rail-sep {
  width: 40px; height: 1px; margin: 6px 0;
  background: rgba(100,116,139,.22);
}
@media (prefers-color-scheme: dark) { #rmf-rail .rail-sep { background: rgba(148,163,184,.18); } }

/* Item com rótulo (Novidades / Estatísticas / Dados) */
.rail-btn {
  width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0 4px;
  border: none; background: transparent; cursor: pointer;
  color: var(--rmf-ink-muted);
  -webkit-tap-highlight-color: transparent;
}
.rail-btn .rail-ic {
  width: 56px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; font-size: 18px;
  transition: background .15s, color .15s;
}
.rail-btn .rail-lbl {
  font-size: 10px; font-weight: 600; line-height: 1;
  white-space: nowrap; letter-spacing: -0.2px;
}
.rail-btn:hover .rail-ic { background: rgba(78,91,142,.08); color: var(--rmf-brand); }
.rail-btn.rail-active { color: var(--rmf-nav-fg); }
.rail-btn.rail-active .rail-ic { background: var(--rmf-nav-bg); color: var(--rmf-nav-fg); }
@media (prefers-color-scheme: dark) {
  .rail-btn { color: var(--rmf-dk-on); }
  .rail-btn:hover .rail-ic { background: rgba(183,192,229,.14); color: var(--rmf-brand-300); }
  .rail-btn.rail-active { color: var(--rmf-nav-fg-dk); }
  .rail-btn.rail-active .rail-ic { background: var(--rmf-nav-bg-dk); color: var(--rmf-nav-fg-dk); }
}

/* Item só ícone (Notificações / Instalação / Feedback / Sobre) */
.rail-mini {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  border-radius: 9999px; color: var(--rmf-ink-subtle); font-size: 17px;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.rail-mini:hover { background: rgba(15,23,42,.06); color: var(--rmf-brand); }
@media (prefers-color-scheme: dark) {
  .rail-mini { color: var(--rmf-ink-faint); }
  .rail-mini:hover { background: rgba(255,255,255,.08); color: var(--rmf-brand-300); }
}

/* ---------- Barra inferior (mobile) ---------- */
#rmf-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 890;
  display: flex;
  align-items: stretch;
  height: var(--bottomnav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--rmf-rail-bg);
  border-top: 1px solid rgba(100,116,139,.16);
}
@media (prefers-color-scheme: dark) {
  #rmf-bottomnav {
    background: var(--rmf-dk-surface-2);
    border-top-color: rgba(148,163,184,.14);
  }
}
@media (min-width: 640px) { #rmf-bottomnav { display: none; } }

.bn-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: transparent; cursor: pointer;
  color: var(--rmf-ink-subtle); padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}
.bn-btn .bn-ic {
  width: 56px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; font-size: 18px;
  transition: background .15s, color .15s;
}
.bn-btn .bn-lbl { font-size: 11px; font-weight: 600; line-height: 1; }
.bn-btn.bn-active { color: var(--rmf-nav-fg); }
.bn-btn.bn-active .bn-ic { background: var(--rmf-nav-bg); color: var(--rmf-nav-fg); }
@media (prefers-color-scheme: dark) {
  .bn-btn { color: var(--rmf-ink-faint); }
  .bn-btn.bn-active { color: var(--rmf-nav-fg-dk); }
  .bn-btn.bn-active .bn-ic { background: var(--rmf-nav-bg-dk); color: var(--rmf-nav-fg-dk); }
}

/* ---------- Bottom-sheet "Mais" (mobile) ---------- */
#rmf-more-overlay {
  position: fixed; inset: 0; z-index: 5200;
  background: rgba(15,23,42,.5);
  opacity: 0; transition: opacity .3s;
}
#rmf-more-overlay.open { opacity: 1; }
#rmf-more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5201;
  background: var(--rmf-white);
  border-radius: 20px 20px 0 0;
  padding: 8px 12px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(0,0,0,.2);
  transform: translateY(100%);
  transition: transform .3s ease;
  max-height: 80vh;
  overflow-y: auto;
}
#rmf-more-overlay.open #rmf-more-sheet { transform: translateY(0); }
@media (prefers-color-scheme: dark) { #rmf-more-sheet { background: var(--rmf-dk-surface); } }
@media (min-width: 640px) { #rmf-more-overlay { display: none !important; } }
.more-grabber {
  width: 36px; height: 4px; border-radius: 9999px;
  background: rgba(100,116,139,.4); margin: 6px auto 10px;
}
.more-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 12px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 14px; text-align: left;
  font-size: 15px; font-weight: 500; color: var(--rmf-ink);
}
.more-item i { width: 22px; text-align: center; font-size: 17px; color: var(--rmf-ink-subtle); }
.more-item:hover { background: rgba(78,91,142,.07); }
@media (prefers-color-scheme: dark) {
  .more-item { color: var(--rmf-dk-on-2); }
  .more-item i { color: var(--rmf-ink-faint); }
  .more-item:hover { background: rgba(183,192,229,.12); }
}

/* ---------- MapLibre ctrl-group: estilo alinhado à pill da busca ---------- */
.maplibregl-ctrl-group {
  background: var(--rmf-white) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.maplibregl-ctrl-group button {
  background-color: transparent !important;
}
.maplibregl-ctrl-group button + button {
  border-top-color: rgba(15,23,42,.08) !important;
}
.maplibregl-ctrl-group button:hover {
  background-color: rgba(15,23,42,.06) !important;
}
@media (prefers-color-scheme: dark) {
  .maplibregl-ctrl-group {
    background: var(--rmf-pill-dk) !important;
    box-shadow: none !important;
  }
  .maplibregl-ctrl-group button + button { border-top-color: var(--rmf-dk-border) !important; }
  .maplibregl-ctrl-group button:hover    { background-color: rgba(255,255,255,.08) !important; }
  .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) opacity(.77); }
}
.dark .maplibregl-ctrl-group {
  background: var(--rmf-pill-dk) !important;
  box-shadow: none !important;
}
.dark .maplibregl-ctrl-group button + button { border-top-color: var(--rmf-dk-border) !important; }
.dark .maplibregl-ctrl-group button:hover    { background-color: rgba(255,255,255,.08) !important; }
.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) opacity(.77); }

/* ---------- Acomoda controles do mapa / FABs ---------- */
/* Desktop: empurra os controles bottom-left para a direita do rail. */
@media (min-width: 640px) {
  .maplibregl-ctrl-bottom-left { margin-left: var(--rail-w) !important; }
}
/* Mobile: sobe controles bottom-left e as FABs acima da barra inferior. */
@media (max-width: 639px) {
  .maplibregl-ctrl-bottom-left { margin-bottom: var(--bottomnav-h) !important; }
  #erb-fabs, #radio-fabs, #fiber-fabs {
    bottom: calc(1.5rem + 60px + env(safe-area-inset-bottom)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CSS crítico — tela de carregamento (loading)
   ════════════════════════════════════════════════════════════════ */
  
  /* CSS Crítico - RMF Brasil Loading */
  :root {
    --bg-load: #FAF8FE;
    --text-load: var(--rmf-ink);
    --brand: var(--rmf-brand); /* Azul brand */
    /* Mobile: pill (52px) + gap (8px) + chips (40px) + padding (8+8px) = 116px */
    --header-h: calc(116px + env(safe-area-inset-top, 0px));
    --top-inset: env(safe-area-inset-top, 0px);
  }

  /* Desktop: pill e chips em linha única → 8px + 52px + 8px = 68px */
  @media (min-width: 640px) {
    :root {
      --header-h: calc(68px + env(safe-area-inset-top, 0px));
    }
  }

  @media (display-mode: window-controls-overlay) {
    :root {
      --header-h: max(env(titlebar-area-height, 3.5rem), 3.5rem);
      --top-inset: env(titlebar-area-height, 3.5rem);
    }
    header {
      top: env(titlebar-area-y, 0) !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: max(env(titlebar-area-height, 3.5rem), 3.5rem) !important;
      padding-top: 0 !important;
      padding-left: env(titlebar-area-x, 0) !important;
      padding-right: calc(100% - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100%)) !important;
      -webkit-app-region: drag;
      app-region: drag;
    }
    header button,
    header input,
    header a {
      -webkit-app-region: no-drag;
      app-region: no-drag;
    }
  }
  
  /* Suporte nativo e instantâneo ao Dark Mode */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-load: #121318;
      --text-load: var(--rmf-white);
    }
  }

  /* Garante que o header (área da barra de status iOS) já tenha a cor correta
     antes do Tailwind carregar, evitando flash de cor diferente no safe-area. */
  header {
    background-color: var(--bg-load);
  }

  /* iOS PWA pinta a área da status bar / safe-area com o background do
     <html>/<body>. Sem isso, o iPhone mostra branco (UA default) ou o
     slate-100 do Tailwind, criando faixas de cor diferente do header. */
  html, body {
    background-color: var(--bg-load);
  }

  /* Container Principal */
  #loading {
    position: fixed; 
    bottom: 0; left: 0; right: 0;
    top: var(--header-h);
    z-index: 1000;
    background-color: var(--bg-load);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    /* Fonte do sistema (não bloqueia a renderização esperando o arquivo de fonte) */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: opacity 0.5s ease-out;
  }

  /* Animação do Ping (Bolinha pulsando) */
  @keyframes rmf-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
  }
  #loading .animate-ping {
    position: absolute; inset: 0; border-radius: 9999px;
    background-color: rgba(78,91,142, 0.3);
    animation: rmf-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  /* Tipografia Base */
  #loading .text-2xl { 
    font-size: 1.5rem; 
    font-weight: 300; 
    color: var(--text-load); 
    margin-bottom: 0.5rem; 
    letter-spacing: -0.025em;
  }
  #loading .text-2xl b { font-weight: 700; color: var(--brand); margin-left: 0.25rem; }
  
  #loading #lmsg { 
    font-size: 10px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    color: var(--rmf-ink-faint); 
    margin-bottom: 1.5rem; 
  }

  /* Barra de Progresso */
  #loading .w-64 { 
    width: 16rem; 
    height: 0.5rem; 
    border-radius: 9999px; 
    background-color: rgba(148, 163, 184, 0.2); 
    overflow: hidden; 
  }
  #loading .lpb { 
    height: 100%; 
    border-radius: 9999px; 
    background: linear-gradient(to right, var(--brand), var(--rmf-brand-light)); 
    box-shadow: 0 0 10px rgba(78,91,142,0.5); 
    width: 5%; /* Largura inicial mínima para mostrar que está vivo */
    transition: width 0.2s ease-out; 
  }


/* ════════════════════════════════════════════════════════════════
   FABs, animações e painéis deslizantes (detalhes / filtros)
   ════════════════════════════════════════════════════════════════ */
/* FAB containers: gap entre botões não captura cliques (vai pro mapa);
   só os botões filhos respondem. Equivale a [&>*]:pointer-events-auto do
   Tailwind v4, escrito em CSS puro porque o CSS estático servido pode não
   ter o arbitrary selector compilado. */
#erb-fabs > *, #radio-fabs > *, #fiber-fabs > * { pointer-events: auto; }

/* Animação suave para as abas do Modal */
  @keyframes fadeInTab {
    from { 
      opacity: 0; 
      transform: translateY(8px); 
    }
    to { 
      opacity: 1; 
      transform: translateY(0); 
    }
  }
  .animate-fade-in {
    animation: fadeInTab 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes ai-wand-pulse {
    0%, 100% { background-color: transparent; color: rgb(148 163 184); }
    50%       { background-color: rgb(241 245 249); color: var(--rmf-brand); }
  }
  .dark .ai-wand-pulse {
    animation: ai-wand-pulse-dark 0.7s ease-in-out 1;
  }
  @keyframes ai-wand-pulse-dark {
    0%, 100% { background-color: transparent; color: rgb(148 163 184); }
    50%       { background-color: rgb(51 65 85); color: rgb(96 165 250); }
  }
  .ai-wand-pulse {
    animation: ai-wand-pulse 0.7s ease-in-out 1;
  }

  @keyframes bell-shake {
    0%   { transform: rotate(0); }
    12%  { transform: rotate(-20deg); }
    24%  { transform: rotate(20deg); }
    36%  { transform: rotate(-15deg); }
    48%  { transform: rotate(15deg); }
    60%  { transform: rotate(-8deg); }
    72%  { transform: rotate(8deg); }
    85%  { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
  }
  .bell-shake {
    animation: bell-shake 0.85s ease-in-out 1;
    transform-origin: top center;
    display: inline-block;
  }

  .fp-tab-active { background: white; color: var(--rmf-brand); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .dark .fp-tab-active { background: var(--rmf-ink); color: var(--rmf-brand-light); }

  /* Capacitor (Android WebView): backdrop-filter é caro — desabilita e deixa
     o fundo semi-opaco do Tailwind (bg-slate-900/70 etc.) cobrir o efeito. */
  html.is-capacitor .backdrop-blur-sm,
  html.is-capacitor .backdrop-blur,
  html.is-capacitor .backdrop-blur-md,
  html.is-capacitor .backdrop-blur-lg {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Promove para camada de composição GPU os elementos que animam com mais
     frequência (entradas/saídas de menu, modais e transições de página). */
  #side-menu,
  #side-menu-overlay,
  #subpage-overlay,
  #page-transition,
  #api-modal,
  #api-modal-overlay,
  #update-modal,
  #update-modal-overlay,
  #settings-modal,
  #settings-modal-overlay,
  #push-invite-banner {
    will-change: transform, opacity;
  }

  /* Painéis de Filtros (direita): animam via transform translateX (compositor GPU).
     O JS continua trocando `.dp-open` / `.panel-open` — só reagimos a elas. */
  #dp, #radio-dp, #fiber-dp,
  #fp, #radio-fp, #fiber-fp {
    transition-property: transform !important;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    will-change: transform;
  }
  /* Painéis de Detalhes (Estação ERB / Rádio-TV / Enlace de Fibra): ficam
     APÓS o rail (left:--rail-w) e ABAIXO da busca (top:--header-h), surgindo
     de baixo pra cima via translateY (transform = compositor GPU, eficiente). */
  #dp, #radio-dp, #fiber-dp {
    left: var(--rail-w) !important;
    /* top é controlado pelo ResizeObserver (syncHeaderHeight) via
       setProperty('top', h+'px', 'important') — valor em px puro,
       sem env() dentro de var() (problemático em alguns browsers).
       Fallback CSS estático enquanto o JS não rodou ainda: */
    top: calc(env(safe-area-inset-top, 0px) + 116px) !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 0;
    border-right-width: 0;
    transform: translateY(100%);
  }
  @media (min-width: 640px) {
    /* Fallback desktop até o ResizeObserver medir o header real */
    #dp, #radio-dp, #fiber-dp {
      top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
      /* Alinhado à caixa de busca: mesma borda esquerda e mesma largura.
         --dp-left / --dp-width são medidos por JS (rect real da pill);
         o fallback cobre o intervalo antes do JS rodar. */
      left: var(--dp-left, calc(var(--rail-w) + 8px)) !important;
      width: var(--dp-width, var(--search-w));
    }
  }
  /* Painéis clipam o conteúdo pros cantos arredondarem; o scroll fica no
     corpo interno (*-bd, flex-1 overflow-y-auto), não no painel. */
  #dp, #radio-dp, #fiber-dp { overflow: hidden; }
  #dp.dp-open, #radio-dp.dp-open, #fiber-dp.dp-open {
    transform: translateY(0);
    will-change: auto;
  }
  #fp, #radio-fp, #fiber-fp {
    right: 0 !important;
    /* Mesmo mecanismo dos dp panels: fallback CSS até o ResizeObserver
       medir e injetar o valor real via setProperty(...,'important'). */
    top: calc(env(safe-area-inset-top, 0px) + 116px) !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
    transform: translateX(100%);
  }
  @media (min-width: 640px) {
    #fp, #radio-fp, #fiber-fp { top: calc(env(safe-area-inset-top, 0px) + 68px) !important; }
  }
  #fp.panel-open, #radio-fp.panel-open, #fiber-fp.panel-open {
    transform: translateX(0);
    will-change: auto;
  }


/* ════════════════════════════════════════════════════════════════
   Paleta dark personalizada (fundo rgb(18,19,23) / bordas rgb(39,40,46))
   ════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

  /* ── 1. Fundo principal: painéis laterais + modais centrais ── */
  #fp, #radio-fp, #fiber-fp,
  #dp, #radio-dp,  #fiber-dp,
  #side-menu,
  #ai-modal, #settings-modal, #about-modal,
  #signal-modal,  #api-modal {
    background-color: var(--rmf-dk-surface) !important;
  }

  /* ── 2. Borda lateral dos painéis deslizantes ── */
  #fp, #radio-fp, #fiber-fp,
  #dp, #radio-dp,  #fiber-dp {
    border-color: var(--rmf-dk-border) !important;
  }

  /* ── 3. Cabeçalhos internos (primeiro .shrink-0) ── */
  #fp    > .shrink-0, #radio-fp  > .shrink-0, #fiber-fp  > .shrink-0,
  #dp    > .shrink-0, #radio-dp  > .shrink-0, #fiber-dp  > .shrink-0,
  #side-menu > .shrink-0 {
    background-color: var(--rmf-dk-surface) !important;
    border-color:     var(--rmf-dk-border) !important;
  }

  /* ── 4. Divisores h-px dentro dos painéis ── */
  #fp .h-px,    #radio-fp .h-px,  #fiber-fp .h-px,
  #dp .h-px,    #radio-dp .h-px,  #fiber-dp .h-px,
  #side-menu .h-px {
    background-color: var(--rmf-dk-border) !important;
  }

  /* ── 5. Todas as bordas neutras dentro dos painéis laterais ── */
  #fp    .border-b, #fp    .border-t, #fp    .border,
  #radio-fp .border-b, #radio-fp .border-t, #radio-fp .border,
  #fiber-fp .border-b, #fiber-fp .border-t, #fiber-fp .border,
  #dp    .border-b, #dp    .border-t, #dp    .border,
  #radio-dp .border-b, #radio-dp .border-t, #radio-dp .border,
  #fiber-dp .border-b, #fiber-dp .border-t, #fiber-dp .border,
  #side-menu .border-b, #side-menu .border-t, #side-menu .border {
    border-color: var(--rmf-dk-border) !important;
  }

  /* ── 6. Separador do header nos modais centrais ── */
  #ai-modal      > div:first-child,
  #settings-modal > div:first-child,
  #about-modal   > div:first-child,
  #signal-modal  > div:first-child,
  #api-modal     > div:first-child {
    border-color: var(--rmf-dk-border) !important;
  }

}

/* ════════════════════════════════════════════════════════════════
   Popups do mapa (maplibre) + dropdown de busca (#search-results).
   Os modais grandes já são tratados no bloco acima; aqui trazemos os
   popups/dropdown pra mesma superfície/borda da paleta do app no dark.
   (No claro permanecem brancos — superfície neutra padrão.)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* Superfície: wrapper do popup + divs internas (bg-white / bg-slate-*) */
  .maplibregl-popup-content,
  .maplibregl-popup-content [class*="bg-white"],
  .maplibregl-popup-content [class*="bg-slate-800"],
  .maplibregl-popup-content [class*="bg-slate-900"],   /* ex.: input #fav-name-input */
  #search-results,
  #search-results [class*="bg-white"],
  #search-results [class*="bg-slate-900"] {
    background-color: var(--rmf-dk-surface) !important;
  }

  /* Catch-all: qualquer uso de slate-700 (bordas, border-y, divide-*, scrollbar,
     hover) dentro de popups/dropdown/painéis/modais resolve como a borda índigo
     do app. Robusto (não depende da classe de largura) e seguro — slate-700 NÃO
     é superfície (essas usam slate-800/900). */
  .maplibregl-popup-content, #search-results,
  #dp, #radio-dp, #fiber-dp, #fp, #radio-fp, #fiber-fp,
  #side-menu, #ai-modal, #settings-modal, #about-modal, #signal-modal, #api-modal {
    --color-slate-700: var(--rmf-dk-border) !important;
  }

  /* Bico (tip) do popup — era #fff; cor por âncora */
  .maplibregl-popup-anchor-top        .maplibregl-popup-tip,
  .maplibregl-popup-anchor-top-left   .maplibregl-popup-tip,
  .maplibregl-popup-anchor-top-right  .maplibregl-popup-tip { border-bottom-color: var(--rmf-dk-surface) !important; }
  .maplibregl-popup-anchor-bottom       .maplibregl-popup-tip,
  .maplibregl-popup-anchor-bottom-left  .maplibregl-popup-tip,
  .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--rmf-dk-surface) !important; }
  .maplibregl-popup-anchor-left  .maplibregl-popup-tip { border-right-color: var(--rmf-dk-surface) !important; }
  .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:  var(--rmf-dk-surface) !important; }

  /* Bordas neutras internas (border / border-b / border-t em slate) */
  .maplibregl-popup-content .border, .maplibregl-popup-content .border-b, .maplibregl-popup-content .border-t,
  #search-results, /* o próprio container tem `border` */
  #search-results .border, #search-results .border-b, #search-results .border-t {
    border-color: var(--rmf-dk-border) !important;
  }

  /* Hover dos itens (era slate-700/800) → tom elevado sutil */
  #search-results .sr-item:hover,
  .maplibregl-popup-content .group:hover {
    background-color: var(--rmf-dk-border) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Estado ativo de FAB — mesmas cores dos chips ativados (light & dark)
   ════════════════════════════════════════════════════════════════ */
  /* Light mode: chip active = #DBEAFE bg / #1E3A8A text / #2563EB border */
  .link-active,
  #btn-gps.active {
    background-color: var(--rmf-state-bg) !important;
    color: var(--rmf-state-fg) !important;
    border-color: var(--rmf-brand) !important;
  }
  #btn-gps:hover { color: var(--rmf-state-fg) !important; }

  /* Dark mode: chip active = rgb(54,67,116) bg / rgb(214,219,246) text / rgb(149,161,211) border */
  @media (prefers-color-scheme: dark) {
    #btn-gps.active {
      background-color: var(--rmf-state-bg-dk) !important;
      color: var(--rmf-state-fg-dk) !important;
      border-color: var(--rmf-state-bd-dk) !important;
    }
    #btn-gps:hover { color: var(--rmf-state-fg-dk) !important; }
  }

/* ════════════════════════════════════════════════════════════════
   IA do RMF — chips, sugestões e bolhas de chat do modal
   ════════════════════════════════════════════════════════════════ */
  /* Log e estado vazio */
  .ai-log { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
  .ai-empty { display: flex; flex-direction: column; align-items: center; padding: 24px 20px 16px; }
  .ai-empty__icon { font-size: 64px; color: color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent); }
  .ai-empty__title { margin-top: 12px; font-size: 18px; font-weight: 600; color: var(--md-sys-color-on-surface); text-align: center; }
  .ai-empty__sub { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); text-align: center; max-width: 22rem; }
  .ai-empty__label { align-self: flex-start; margin-top: 20px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
  .ai-empty__chips { align-self: stretch; display: flex; flex-wrap: wrap; gap: 8px; }
  .ai-chip-suggest {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit;
    padding: 7px 14px; border-radius: 100px; font-size: 13px; font-weight: 500;
    background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant); transition: background .15s;
  }
  .ai-chip-suggest:hover { background: var(--md-sys-color-surface-container-highest); }
  .ai-chip-suggest i { font-size: 12px; color: var(--md-sys-color-primary); }

  /* Bolhas de chat */
  .ai-row { display: flex; padding: 4px 0; }
  .ai-row--user { justify-content: flex-end; }
  .ai-row--bot  { justify-content: flex-start; }
  .ai-bubble { max-width: 78%; padding: 10px 14px; font-size: 13.5px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
  .ai-bubble--user  { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
  .ai-bubble--bot   { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-radius: 16px 16px 16px 4px; }
  .ai-bubble--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-radius: 16px 16px 16px 4px; }
  .ai-bubble p { margin: 0 0 6px; } .ai-bubble p:last-child { margin-bottom: 0; }
  .ai-bubble a { color: var(--md-sys-color-primary); text-decoration: underline; font-weight: 600; }
  .ai-bubble strong { font-weight: 700; }
  .ai-bubble em { font-style: italic; }
  .ai-bubble ul { margin: 4px 0; padding-left: 18px; } .ai-bubble li { margin: 2px 0; }
  .ai-bubble code { font-family: ui-monospace, monospace; font-size: .92em; background: color-mix(in srgb, var(--md-sys-color-on-surface) 9%, transparent); padding: 1px 5px; border-radius: 6px; }

  /* Botão de ação (aplicar no mapa) dentro da bolha */
  .ai-action-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; font: inherit;
    height: 38px; padding: 0 16px; border-radius: 100px; border: none; font-size: 13px; font-weight: 600;
    background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); transition: filter .15s;
  }
  .ai-action-btn:hover:not(:disabled) { filter: brightness(1.06); }
  .ai-action-btn:disabled { opacity: .6; cursor: default; }

  /* Chips de pergunta sugerida abaixo da resposta */
  .ai-followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ai-followup {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit;
    padding: 6px 10px; border-radius: 14px; font-size: 12.5px; font-weight: 600; border: none; text-align: left;
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); color: var(--md-sys-color-primary);
  }
  .ai-followup i { font-size: 11px; }

  /* Chips de filtros aplicados (check) */
  .ai-applied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .ai-applied__chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); color: var(--md-sys-color-primary);
  }
  .ai-applied__chip i { font-size: 10px; opacity: .9; }

  /* Bolha "digitando" (spinner) */
  .ai-typing { display: inline-flex; align-items: center; justify-content: center; padding: 13px 15px; border-radius: 16px 16px 16px 4px; background: var(--md-sys-color-surface-container-high); }
  .ai-typing i { color: var(--md-sys-color-primary); font-size: 14px; }

  /* Bolha de status com shimmer (estilo Claude Code) */
  .ai-status { padding: 12px 15px; border-radius: 16px 16px 16px 4px; background: var(--md-sys-color-surface-container-high); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
  .ai-status__text {
    background: linear-gradient(100deg,
      var(--md-sys-color-on-surface-variant) 35%,
      var(--md-sys-color-on-surface) 50%,
      var(--md-sys-color-on-surface-variant) 65%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: ai-shimmer 1.4s linear infinite;
  }
  @keyframes ai-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .ai-status__text { color: var(--md-sys-color-on-surface-variant); -webkit-text-fill-color: currentColor; animation: none; background: none; }
  }

  /* Composer */
  .ai-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 12px; flex-shrink: 0; }
  .ai-input {
    flex: 1; min-width: 0; resize: none; font: inherit; font-size: 14px; line-height: 1.4;
    padding: 13px 16px; border-radius: 24px; border: none; outline: none; max-height: 120px;
    background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  }
  .ai-input::placeholder { color: var(--md-sys-color-on-surface-variant); }
  .ai-send {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); transition: filter .15s;
  }
  .ai-send:hover:not(:disabled) { filter: brightness(1.06); }
  .ai-send:disabled { opacity: .5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
   Marca d'água do mapa (© OpenStreetMap © CARTO)
   As classes Tailwind usavam slate-800/700/400 (cinza-azulado) que
   destoava da nova superfície dark do mapa (near-black). Aqui as cores
   passam a usar os tokens --rmf-* (id > utility, sem !important).
   ════════════════════════════════════════════════════════════════ */
#osm-watermark {
  color: var(--rmf-ink-subtle);                 /* #64748B */
  background-color: rgb(255 255 255 / 0.9);
  border-color: rgb(226 232 240 / 0.6);         /* slate-200 ~ borda clara */
}
#osm-watermark:hover { color: var(--rmf-brand); }   /* #4E5B8E */

@media (prefers-color-scheme: dark) {
  #osm-watermark {
    color: var(--rmf-dk-on);                    /* rgb(197,198,207) */
    background-color: rgb(18 19 23 / 0.9);      /* = --rmf-dk-surface */
    border-color: var(--rmf-dk-border);         /* rgb(39,40,46) */
  }
  #osm-watermark:hover { color: var(--rmf-brand-300); }  /* #B7C0E5 acento dark */
}

/* ===== Tokens M3 + sistema de modais nv-modal (portado de m3-tokens.css + novidades.css) ===== */
:root {
  /* Paleta tonal derivada de #4E5B8E (RGB 78, 91, 142) */
  --md-sys-color-primary: #4E5B8E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #DCE1FA;
  --md-sys-color-on-primary-container: #0A1633;
  --md-sys-color-inverse-primary: #B7C0E5;

  --md-sys-color-secondary: #595E72;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #DEE1F4;
  --md-sys-color-on-secondary-container: #161B2C;

  --md-sys-color-tertiary: #74566D;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FED7F2;
  --md-sys-color-on-tertiary-container: #2B1228;

  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  /* Backgrounds preservados do app */
  --md-sys-color-background: #FAF8FE;
  --md-sys-color-on-background: #1C1B1F;
  --md-sys-color-surface: #FAF8FE;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E2E2EE;
  --md-sys-color-on-surface-variant: #45475A;
  --md-sys-color-surface-tint: #4E5B8E;

  --md-sys-color-outline: #75778B;
  --md-sys-color-outline-variant: #C5C6DC;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  --md-sys-color-inverse-surface: #322F35;
  --md-sys-color-inverse-on-surface: #F5EFF7;

  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F3F1FA;
  --md-sys-color-surface-container: #EDEBF4;
  --md-sys-color-surface-container-high: #E7E5EE;
  --md-sys-color-surface-container-highest: #E1DFE8;

  /* Token de sucesso ad-hoc (M3 não tem oficial) */
  --md-sys-color-success: #386A20;
  --md-sys-color-success-container: #B7F3A4;
  --md-sys-color-on-success-container: #002201;

  /* App bar — cor do estado elevado (rolado). Medida do app nativo. */
  --md-rmf-appbar-scrolled: #E1E1EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #B7C0E5;
    --md-sys-color-on-primary: #202B53;
    --md-sys-color-primary-container: #36426A;
    --md-sys-color-on-primary-container: #DCE1FA;
    --md-sys-color-inverse-primary: #4E5B8E;

    --md-sys-color-secondary: #C1C5DC;
    --md-sys-color-on-secondary: #2B3041;
    --md-sys-color-secondary-container: #424658;
    --md-sys-color-on-secondary-container: #DEE1F4;

    --md-sys-color-tertiary: #E2BCD3;
    --md-sys-color-on-tertiary: #43273E;
    --md-sys-color-tertiary-container: #5B3D55;
    --md-sys-color-on-tertiary-container: #FED7F2;

    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;

    --md-sys-color-background: #121318;
    --md-sys-color-on-background: #E6E1E5;
    --md-sys-color-surface: #121318;
    --md-sys-color-on-surface: #E6E1E5;
    --md-sys-color-surface-variant: #45475A;
    --md-sys-color-on-surface-variant: #C5C6DC;
    --md-sys-color-surface-tint: #B7C0E5;

    --md-sys-color-outline: #8F90A5;
    --md-sys-color-outline-variant: #45475A;

    --md-sys-color-inverse-surface: #E6E1E5;
    --md-sys-color-inverse-on-surface: #322F35;

    --md-sys-color-surface-container-lowest: #0D0E13;
    --md-sys-color-surface-container-low: #1B1C22;
    --md-sys-color-surface-container: #1E1F24;
    --md-sys-color-surface-container-high: #2A2B30;
    --md-sys-color-surface-container-highest: #35363B;

    --md-sys-color-success: #9CD67E;
    --md-sys-color-success-container: #1F4E0A;
    --md-sys-color-on-success-container: #B7F3A4;

    --md-rmf-appbar-scrolled: #2A2C35;
  }
}

.nv-modal {
  position: fixed; inset: 0; z-index: 2000; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 45%, transparent);
  backdrop-filter: blur(4px); transition: opacity .2s;
}
.nv-modal.hidden { display: none; }
.nv-modal__panel {
  width: 100%; max-width: 28rem; max-height: 90vh; display: flex; flex-direction: column;
  border-radius: 28px; overflow: hidden; transition: transform .2s;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
}
.nv-modal__panel--lg { max-width: 32rem; }
.nv-modal__panel.scale-95 { transform: scale(.95); }
.nv-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 20px; flex-shrink: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.nv-modal__title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--md-sys-color-on-surface); }
.nv-modal__title i { color: var(--md-sys-color-primary); }
.nv-modal__actions { display: flex; align-items: center; gap: 4px; }
.nv-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.nv-modal__map { position: relative; width: 100%; height: 11rem; flex-shrink: 0; overflow: hidden; background: var(--md-sys-color-surface-container-high); }
.nv-modal__info { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow: auto; max-height: 20rem; font-size: 14px; color: var(--md-sys-color-on-surface); }
.nv-modal__foot { padding: 12px 16px; flex-shrink: 0; border-top: 1px solid var(--md-sys-color-outline-variant); display: flex; justify-content: flex-end; }

/* .ibtn é escopado em .nv-modal (e .nv-body) pra não tocar o botão homônimo
   dos modais próprios do host index no modo SPA. */
.nv-modal .ibtn, .nv-body .ibtn {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-sys-color-on-surface-variant); background: transparent; transition: background .15s;
}
.nv-modal .ibtn:hover, .nv-body .ibtn:hover { background: var(--md-sys-color-surface-container-highest); }
.nv-modal .ibtn--filled, .nv-body .ibtn--filled { background: var(--md-sys-color-surface-container-highest); }
.nv-modal .ibtn--sm, .nv-body .ibtn--sm { width: 32px; height: 32px; }

/* Campos de formulário (modais) */
.nv-field { display: flex; flex-direction: column; gap: 6px; }
.nv-field__label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.nv-control { position: relative; }
.nv-control select, .nv-control input, .nv-input {
  width: 100%; height: 44px; padding: 0 14px; font: inherit; font-size: 14px;
  border-radius: 12px; border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface);
}
.nv-control select { appearance: none; padding-right: 38px; cursor: pointer; }
.nv-control select:focus, .nv-control input:focus, .nv-input:focus {
  outline: none; border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}
.nv-control__chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.nv-control--search input { padding-left: 38px; }
.nv-control__search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }

/* Botões dos modais */
.nv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 100px; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background .15s, filter .15s;
}
.nv-btn--filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.nv-btn--filled:hover { filter: brightness(1.05); }
.nv-btn--tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.nv-btn--outline { background: transparent; color: var(--md-sys-color-on-surface); border-color: var(--md-sys-color-outline); }
.nv-btn--outline:hover { background: var(--md-sys-color-surface-container-high); }
.nv-btn--block { width: 100%; }
.nv-btn--sm { height: 36px; padding: 0 14px; font-size: 12px; }

/* Modal de alertas: lista de cidades + sugestões */
.nv-alert-intro { font-size: 12px; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); }
.nv-city-add { display: flex; gap: 8px; }
.nv-suggestions {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 50;
  max-height: 12rem; overflow-y: auto; list-style: none; padding: 0; margin-bottom: 0;
  border-radius: 12px; border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high); font-size: 14px;
}
.nv-suggestions.hidden { display: none; }
/* Itens da lista de sugestões — renderizados pelo app-notifications.js com
   classes Tailwind (inexistentes no standalone). Escopado em .nv-body. */
.nv-body #city-suggestions li {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; cursor: pointer; color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant); transition: background .12s;
}
.nv-body #city-suggestions li:last-child { border-bottom: 0; }
.nv-body #city-suggestions li:hover { background: var(--md-sys-color-surface-container-high); }
.nv-body #city-suggestions li span:last-child { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }

.nv-city-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 2rem; list-style: none; padding: 0; margin: 0; }

/* ─── Chips de cidade do modal de Notificações ───────────────────────
   Renderizados pelo app-notifications.js (compartilhado, NÃO reescrito): o
   próprio <li> É o chip (classes Tailwind inline) com o nome + <span> da UF +
   um <button> de remover. Estado vazio = <li class="... italic">. No SPA o
   Tailwind do host resolve; no standalone (sem Tailwind) recriamos o estilo
   aqui, ESCOPADO em .nv-body pra não tocar a UI do host. */
.nv-body #city-list > li {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 28px; padding: 0 6px 0 12px; border-radius: 100px;
  font-size: 12px; font-weight: 500; line-height: 1;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
/* Estado vazio ("Nenhuma cidade cadastrada.") — não é chip */
.nv-body #city-list > li.italic {
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  height: auto; padding: 4px; font-style: italic; font-weight: 400;
}
.nv-body #city-list > li > span { opacity: .7; font-size: 10px; }
/* Botão de remover (×) dentro do chip */
.nv-body #city-list > li button {
  width: 18px; height: 18px; flex-shrink: 0; padding: 0;
  border: none; cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: inherit; opacity: .75; transition: background .15s, opacity .15s;
}
.nv-body #city-list > li button:hover {
  opacity: 1; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container);
}
.nv-divider { padding-top: 16px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.nv-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; cursor: pointer; }
.nv-toggle-row__txt { flex: 1; padding-right: 4px; }
.nv-toggle-row__txt strong { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface); }
.nv-toggle-row__txt strong i { color: var(--md-sys-color-primary); }
.nv-toggle-row__txt span { display: block; font-size: 11px; margin-top: 2px; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); }
/* Linhas/painéis de conteúdo interno dos modais (substituem os cards
   bg-white/slate por superfícies tokenizadas M3). */
.nv-row, .nv-panel {
  padding: 12px; border-radius: 12px;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.nv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: border-color .15s; }
.nv-row:hover { border-color: var(--md-sys-color-primary); }
.nv-row__t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface); }
.nv-row__t i { color: var(--md-sys-color-primary); }
.nv-row__d { font-size: 10px; margin-top: 2px; color: var(--md-sys-color-on-surface-variant); }
.nv-row__chev { color: var(--md-sys-color-on-surface-variant); transition: color .15s; }
.nv-row:hover .nv-row__chev { color: var(--md-sys-color-primary); }
.nv-panel__label { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); margin-bottom: 8px; padding: 0 4px; }

.nv-modal__section { display: flex; flex-direction: column; gap: 16px; }
.nv-modal__section.hidden { display: none; }
.nv-modal__actions-row { display: flex; gap: 8px; padding-top: 4px; }
.nv-modal__actions-row .nv-btn { flex: 1; }

/* Conteúdo dos modais ERB/TV (info renderizada pelo JS) */
.nv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.nv-info-grid > div { display: flex; align-items: center; gap: 6px; }
.nv-info-grid .col-span-2 { grid-column: span 2; }
.nv-info-grid i { flex-shrink: 0; opacity: .7; }
.nv-info-grid .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-info-freq {
  padding: 8px 12px; border-radius: 12px; font-size: 12px;
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant);
}
.nv-info-freq__head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.nv-info-freq__head i { color: var(--md-sys-color-primary); }