/* ============================================================
   APP: navegação (redesign de 02/11/2026)
   Última camada da cascata, por isso vence. Só usa as variáveis, então
   segue a marca de cada empresa e o escuro.
     - Computador: topo branco com a marca, os atalhos do dia a dia, a
       busca (Ctrl+K), "+ Novo", o condomínio, o sino e o perfil. "Mais"
       abre o painel com todos os recursos.
     - Celular: barra de abas fixa embaixo (Início, dois atalhos, "+ Novo"
       no meio e Menu); o topo leva a marca, o condomínio e as ferramentas.
   ============================================================ */

/* ── Conteúdo ocupa a largura toda: não tem coluna fixa ──────────── */
#conteudo{margin-left:0}

/* ── Topo ─────────────────────────────────────────────────────────── */
#topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:10px clamp(16px,3vw,32px);background:color-mix(in srgb,var(--cor-card) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--cor-border);box-shadow:none}
#topbar>div:first-child{flex:1 1 auto;min-width:0;gap:8px!important}
#topbar>div:last-child{flex:0 0 auto;gap:6px!important}
/* O título da tela já está no conteúdo; o perfil e o papel estão no avatar. */
#topbar h5,#topbar-usuario,#badge-perfil{display:none!important}
#btn-menu{display:none!important}
#btn-sair-topo{display:none!important}
body.nav-travada #btn-sair-topo{display:inline-flex!important}

.topo-marca{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;min-width:0;
  color:var(--cor-texto);font-weight:650;font-size:.95rem;letter-spacing:-.01em}
.topo-marca:hover{color:var(--cor-texto)}
.topo-logo{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;overflow:hidden;color:var(--cor-primaria-texto,#fff);font-size:1rem;background:var(--cor-primaria)}
.topo-logo.com-logo{width:auto;background:none;border-radius:0}
.topo-logo img{max-height:30px;max-width:120px;object-fit:contain}
.topo-logo .marca-icone-img{width:100%;height:100%;object-fit:cover}
.topo-marca .marca-nome{max-width:180px;overflow:hidden;text-overflow:ellipsis}

.topo-nav{display:none;align-items:center;gap:2px;margin-left:12px;min-width:0;overflow:hidden}
.tn-item{border:0;background:none;font:inherit;font-size:var(--fs-md);font-weight:500;color:var(--cor-texto-muted);
  padding:6px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease,color .15s ease}
.tn-item i{font-size:.95rem}
.tn-item:hover{color:var(--cor-texto);background:var(--cor-suave)}
.tn-item.active{color:var(--cor-texto);font-weight:600;background:var(--cor-suave)}
.tn-item.tn-fora{display:none}
.tn-mais{flex:0 0 auto}

/* Ferramentas da direita: botões de ícone do mesmo tamanho. */
#topbar .btn-ic,#topbar #btn-tema,#topbar #btn-instalar,#topbar .btn-sino,#topbar #btn-recarregar,#topbar #btn-sair-topo{
  width:36px;height:36px;padding:0!important;border:0!important;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:none!important;color:var(--cor-texto-muted)!important;flex:0 0 auto}
#topbar .btn-ic:hover,#topbar #btn-tema:hover,#topbar #btn-instalar:hover,#topbar .btn-sino:hover,#topbar #btn-recarregar:hover,#topbar #btn-sair-topo:hover{
  background:var(--cor-suave)!important;color:var(--cor-texto)!important}
#topbar .btn-sino{position:relative;overflow:visible}
#badge-sino{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;line-height:1;
  background:var(--cor-perigo);color:#fff;border:2px solid var(--cor-card)}
#badge-sino.d-none{display:none}

/* Busca: no computador parece um campo, com o atalho do teclado. */
.busca-topo{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:var(--fs-md);color:var(--cor-texto-muted);background:var(--cor-suave);border:1px solid transparent;
  transition:border-color .15s ease,background-color .15s ease}
.busca-topo:hover{border-color:var(--cor-border);background:var(--cor-card)}
.busca-topo .bt-rot{min-width:96px;text-align:left}
.busca-topo kbd{font:inherit;font-size:.7rem;font-weight:500;padding:1px 6px;border-radius:5px;color:var(--cor-texto-muted);
  background:var(--cor-card);border:1px solid var(--cor-border)}
#btn-novo-topo{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px}

/* Condomínio aberto: um botão discreto com a seta de trocar. */
#topbar .chip-condominio{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 12px;border-radius:8px;
  font-size:var(--fs-sm);font-weight:500;color:var(--cor-texto);background:var(--cor-card);border:1px solid var(--cor-border);
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
#topbar .chip-condominio::after{content:'';flex:0 0 auto;width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55}
#topbar .chip-condominio:hover{background:var(--cor-suave)}

/* Avatar: abre o perfil. */
#btn-perfil-topo{width:32px;height:32px;min-height:0;align-self:center;padding:0!important;border-radius:50%!important;border:0!important;overflow:hidden;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;margin-left:2px;
  background:var(--cor-suave)!important;color:var(--cor-texto)!important;font-size:.72rem;font-weight:600;letter-spacing:.02em}
#btn-perfil-topo img{width:100%;height:100%;object-fit:cover}
#btn-perfil-topo:hover{box-shadow:0 0 0 2px var(--cor-border)}

@media(min-width:992px){
  .topo-nav{display:flex}
}
/* Tela média: atalhos sem ícone, busca só com o ícone. */
@media(min-width:992px) and (max-width:1279px){
  .tn-item:not(.tn-mais) i{display:none}
  .busca-topo .bt-rot,.busca-topo kbd{display:none}
  .busca-topo{width:36px;padding:0;justify-content:center;background:none}
  #topbar .chip-condominio{max-width:160px}
}
@media(max-width:991px){
  .busca-topo{width:36px;padding:0;justify-content:center;background:none}
  .busca-topo .bt-rot,.busca-topo kbd{display:none}
  #btn-novo-topo{display:none!important}
  #topbar{min-height:56px;padding:8px 12px}
  .topo-marca .marca-nome{display:none}
}
/* Celular estreito: o topo tem que caber na largura da tela. Passando
   alguns pixels que fosse, o navegador encolhia a página INTEIRA pra
   caber (tudo miúdo, com rolagem de lado). O condomínio é o único que
   estica e corta com reticências; o tema fica em Configurações. */
@media(max-width:576px){
  #topbar>div:last-child{flex:1 1 auto;justify-content:flex-end;min-width:0}
  #topbar>div:first-child{flex:0 0 auto}
  #topbar .chip-condominio{flex:0 1 auto;min-width:0;max-width:none}
  #topbar #btn-tema,#topbar #btn-recarregar{display:none!important}
  #conteudo{min-height:100dvh}
}

/* ── Painel "Todos os recursos" (o antigo #sidebar) ───────────────── */
#sidebar{display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;position:fixed;
  background:var(--cor-card);color:var(--cor-texto);border:1px solid var(--cor-border);box-shadow:var(--sombra-flutua);
  --cor-sidebar-texto:var(--cor-texto);--cor-sidebar-muted:var(--cor-texto-muted)}
#sidebar-overlay{z-index:110;background:color-mix(in srgb,#000 32%,transparent);backdrop-filter:none}
#sidebar{z-index:120}
.lado-marca{display:flex;align-items:center;gap:12px;padding:18px 20px 6px}
.lado-marca::after{display:none}
.lado-logo{width:32px;height:32px;border-radius:9px;border:0;color:var(--cor-primaria-texto,#fff);background:var(--cor-primaria);font-size:1rem}
.lado-logo img{width:100%;height:100%;object-fit:cover}
.lado-marca .marca-nome{color:var(--cor-texto);letter-spacing:-.01em;font-size:.95rem;font-weight:650}
.lado-marca .marca-produto{color:var(--cor-texto-muted);font-size:var(--fs-xs)}
.btn-fechar-launcher{display:block;margin-left:auto;color:var(--cor-texto-muted);width:32px;height:32px;border-radius:8px}
.btn-fechar-launcher:hover{background:var(--cor-suave);color:var(--cor-texto)}
.menu-lateral{padding:0 14px 12px;flex:1 1 auto;overflow:visible}
.launcher-secao+.launcher-secao{margin-top:2px}
.menu-lateral .nav-section{padding:14px 6px 6px;font-size:var(--fs-xs);font-weight:500;letter-spacing:0;text-transform:none;color:var(--cor-texto-muted)}
.launcher-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:4px}
.menu-lateral .nav-link{position:relative;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;margin:0;width:100%;
  padding:10px 4px 8px;border:0;border-radius:10px;background:none;font:inherit;font-size:var(--fs-xs);font-weight:500;
  line-height:1.25;text-align:center;color:var(--cor-texto);cursor:pointer;display:flex}
.menu-lateral .nav-link:hover{background:var(--cor-suave);color:var(--cor-texto)}
.menu-lateral .nav-link.active{background:none;color:var(--cor-texto);font-weight:600}
.menu-lateral .nav-link.active::before{display:none}
.menu-lateral .nav-link i,.menu-lateral .nav-link:hover i,.menu-lateral .nav-link.active i{color:inherit;font-size:1.15rem;width:auto}

/* O ícone em quadradinho, como as categorias de um app. Serve ao painel,
   às ações rápidas e ao "+ Novo". */
.nl-ic{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--cor-texto);font-size:1.15rem;background:var(--cor-suave);transition:background-color .15s ease,color .15s ease}
.nav-link:hover .nl-ic,.atalho:hover .nl-ic{color:var(--cor-primaria)}
.nav-link.active .nl-ic{background:var(--cor-primaria);color:var(--cor-primaria-texto,#fff)}
.nav-acao .nl-ic{color:var(--cor-perigo);background:color-mix(in srgb,var(--cor-perigo) 10%,transparent)}
.lado-usuario{display:flex;align-items:center;gap:12px;padding:12px 20px 16px;cursor:pointer;border-top:1px solid var(--cor-border)}
.lado-usuario:hover{background:var(--cor-suave)}
.lado-avatar{width:32px;height:32px;color:var(--cor-texto);background:var(--cor-suave);border:0;font-size:.72rem}
.lado-usuario .nome{color:var(--cor-texto)}
.lado-usuario small{color:var(--cor-texto-muted)}

/* Computador: painel que desce do topo, centralizado. */
@media(min-width:992px){
  #sidebar{top:68px;left:50%;right:auto;bottom:auto;width:min(880px,calc(100vw - 48px));
    max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);border-radius:var(--radius-lg);
    opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s}
  #sidebar.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  #sidebar-overlay.show{background:color-mix(in srgb,#000 12%,transparent)}
}
/* Celular e tablet: folha que sobe de baixo, com a alça. */
@media(max-width:991px){
  #sidebar{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88vh;max-height:88dvh;border-width:1px 0 0;
    border-radius:16px 16px 0 0;transform:translateY(104%);transition:transform .22s ease,visibility .22s;
    padding-bottom:env(safe-area-inset-bottom);visibility:hidden}
  #sidebar.open{transform:translateY(0);visibility:visible;box-shadow:var(--sombra-flutua)}
  #sidebar::before{content:'';display:block;width:36px;height:4px;border-radius:999px;margin:8px auto 0;flex:0 0 auto;
    background:var(--cor-border)}
  .lado-marca{padding:10px 16px 4px}
  .launcher-grade{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:360px){ .launcher-grade{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ── Barra de abas do celular ─────────────────────────────────────── */
#mobile-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:98;align-items:stretch;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-radius:0;
  background:color-mix(in srgb,var(--cor-card) 94%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-top:1px solid var(--cor-border);box-shadow:none}
#mobile-nav .mn-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;font-family:inherit;cursor:pointer;padding:4px 2px;border-radius:10px;
  color:var(--cor-texto-muted);font-size:.68rem;font-weight:500;line-height:1.1}
#mobile-nav .mn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mobile-nav .mn-item i{font-size:1.25rem;line-height:1;height:30px;display:flex;align-items:center;justify-content:center}
#mobile-nav .mn-item.active{color:var(--cor-primaria)}
#mobile-nav .mn-item.active span{font-weight:600}
#mobile-nav .mn-item:active{background:var(--cor-suave)}
/* "+ Novo": o botão do meio, na cor da marca. */
#mobile-nav .mn-novo i{width:44px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--cor-acento);color:var(--cor-acento-texto);font-size:1.2rem}
#mobile-nav .mn-novo{color:var(--cor-texto)}
@media(max-width:991px){
  #mobile-nav{display:flex}
  #conteudo{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  #pagina{padding-bottom:40px}
  /* O aviso (toast) sobe acima da barra de abas, sem cobrir ela. */
  #toasts{bottom:calc(76px + env(safe-area-inset-bottom));right:12px;left:12px;max-width:none}
}

/* ── "+ Novo": a lista do que dá pra criar ───────────────────────── */
.novo-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.novo-grade .atalho{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:10px;font-size:var(--fs-md);font-weight:500}
.novo-grade .atalho .nl-ic{width:36px;height:36px;font-size:1.05rem;color:var(--cor-primaria)}
@media(max-width:576px){ .novo-grade{grid-template-columns:1fr 1fr} }

/* ── Números e filtros no celular ─────────────────────────────────
   Os cartões de número viram uma fileira que desliza de lado, e os
   filtros ficam dois por linha: antes, quatro números e três filtros
   empilhados enchiam a tela antes de a lista aparecer. */
@media(max-width:576px){
  .grade-stat{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;scrollbar-width:none;
    margin:0 -16px 16px;padding:0 16px 4px;scroll-padding-inline:16px}
  .grade-stat::-webkit-scrollbar{display:none}
  .grade-stat>.stat-card{flex:0 0 150px;scroll-snap-align:start;padding:12px 14px}
  .grade-stat>.stat-card .valor{font-size:1.3rem;margin-top:4px}
  .filtros{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filtros>*{min-width:0;max-width:none!important}
  .filtros .busca{grid-column:1 / -1}
  .filtros>[hidden]{display:none}
  /* Campo com letra menor que 16px faz o iPhone dar zoom ao tocar. */
  .form-control,.form-select{font-size:16px}
}

/* ── Ações rápidas (página inicial) ───────────────────────────────── */
.acoes-rapidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0 0 20px}
.atalho{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:92px;
  padding:14px;border-radius:12px;text-align:left;cursor:pointer;font:inherit;font-size:var(--fs-md);font-weight:550;line-height:1.25;
  color:var(--cor-texto);background:var(--cor-card);border:1px solid var(--cor-border);box-shadow:var(--sombra-card);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.atalho:hover{box-shadow:var(--sombra-card-hover);border-color:color-mix(in srgb,var(--cor-texto) 18%,var(--cor-border))}
.atalho .nl-ic{color:var(--cor-primaria)}
/* Celular: uma fileira que desliza de lado. */
@media(max-width:576px){
  .acoes-rapidas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;scrollbar-width:none;
    margin:0 -16px 18px;padding:2px 16px 4px;scroll-padding-inline:16px}
  .acoes-rapidas::-webkit-scrollbar{display:none}
  .atalho{flex:0 0 112px;min-height:96px;scroll-snap-align:start;padding:12px}
}

/* ── Interação: foco, toque e estados ─────────────────────────────── */
:where(.btn,.nav-link,.tn-item,.mn-item,.atalho,.hero-pilula,.chip-condominio,.topo-marca,.busca-topo,a,button,[role="button"]):focus-visible{
  outline:2px solid var(--cor-primaria);outline-offset:2px}
.btn{transition:transform .12s ease,background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.btn:active:not(:disabled):not(.disabled){transform:scale(.98)}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed}
.atalho:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Cards da página inicial que abrem a tela ─────────────────────── */
.stat-link{cursor:pointer}
.stat-link:hover{box-shadow:var(--sombra-card-hover)}
.stat-link:active{transform:scale(.99)}
.stat-link:focus-visible{outline:2px solid var(--cor-primaria);outline-offset:2px}

/* ── Botão esperando o servidor (chamarBackend) ───────────────────── */
.btn.btn-carregando{opacity:.8;cursor:progress}
.btn.btn-carregando::after{content:'';display:inline-block;width:.9em;height:.9em;margin-left:.5em;vertical-align:-.12em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:giro-btn .7s linear infinite}
@keyframes giro-btn{to{transform:rotate(360deg)}}

/* ── Listas no celular: cada linha vira um cartão ─────────────────────
   Os rótulos vêm do cabeçalho da tabela (rotularTabelas, no nucleo.js).
   A primeira coluna é o título do cartão; a de ações vai pro pé, à direita. */
@media(max-width:767px){
  .tabela-wrap:has(.tabela-cards){overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
  .tabela-wrap table.tabela-cards,.tabela-cards tbody{display:block;width:100%;min-width:0!important}
  .tabela-cards thead{display:none}
  .tabela-cards tbody tr{display:block;margin:0 0 8px;padding:14px 16px;border-radius:12px;background:var(--cor-card);
    border:1px solid var(--cor-border);box-shadow:var(--sombra-card)}
  .tabela-cards tbody tr:hover{background:var(--cor-card)}
  /* Grade de 2 colunas: rótulo à esquerda; tudo que a célula tem (nome e
     unidade, por exemplo) empilhado à direita, junto. */
  .tabela-cards tbody td{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:center;column-gap:12px;
    justify-items:end;text-align:right;
    padding:6px 0!important;border:0!important;min-height:0;white-space:normal!important;min-width:0;overflow-wrap:anywhere}
  .tabela-cards tbody td>*{grid-column:2}
  .tabela-cards tbody td::before{content:attr(data-label);grid-column:1;grid-row:1 / span 6;justify-self:start;text-align:left;
    font-size:var(--fs-xs);font-weight:500;color:var(--cor-texto-muted)}
  .tabela-cards tbody td:not([data-label])::before,.tabela-cards tbody td[data-label=""]::before{display:none}
  .tabela-cards tbody td:not([data-label]),.tabela-cards tbody td[data-label=""]{grid-template-columns:minmax(0,1fr)}
  .tabela-cards tbody td:not([data-label])>*,.tabela-cards tbody td[data-label=""]>*{grid-column:1}
  /* Título do cartão: a primeira coluna, sem rótulo, em destaque. */
  .tabela-cards tbody td:first-child{display:block;text-align:left;justify-items:normal;font-weight:600;font-size:.95rem;
    padding:0 0 8px!important;margin-bottom:4px;border-bottom:1px solid var(--cor-border)!important}
  .tabela-cards tbody td:first-child::before{display:none}
  /* Sem rótulo (coluna de botões): pé do cartão, à direita. */
  .tabela-cards tbody td:last-child:not(:first-child):not([data-label]),
  .tabela-cards tbody td:last-child:not(:first-child)[data-label=""]{justify-items:end;padding-top:10px!important}
  .tabela-cards tbody td.td-cheia{display:block;text-align:center;justify-items:normal}
  .tabela-cards tfoot{display:block}
  .tabela-cards tfoot tr{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px 4px}
  .tabela-cards tfoot td,.tabela-cards tfoot th{border:0!important;padding:0!important}
}

/* ── Formulários no celular: folha que sobe de baixo ──────────────── */
@media(max-width:576px){
  .modal-dialog,.modal-dialog.modal-dialog-centered,.modal-dialog.modal-dialog-scrollable{
    margin:0!important;max-width:none!important;width:100%;min-height:100%;height:100%;display:flex;align-items:flex-end}
  .modal-content{border-radius:16px 16px 0 0!important;max-height:94vh;max-height:94dvh;width:100%;border-width:1px 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
  .modal-content::before{content:'';display:block;width:36px;height:4px;border-radius:999px;margin:8px auto 0;
    background:var(--cor-border)}
  .modal.fade .modal-dialog{transform:translateY(30px)}
  .modal.show .modal-dialog{transform:none}
  /* Botões grandes, lado a lado, fáceis de alcançar com o polegar. */
  .modal-footer{flex-wrap:nowrap;gap:8px}
  .modal-footer>.btn,.modal-footer>a.btn{flex:1 1 0;min-height:46px;margin:0}
  /* Campos com altura de toque e sem zoom do iPhone (16px). */
  .modal .form-control,.modal .form-select{min-height:46px;font-size:16px}
}

/* Gráfico nunca mais largo que o bloco (celular de 320px). */
.bloco canvas{max-width:100%!important}
.grade>.bloco{min-width:0}

/* Sem condomínio escolhido: nada de atalho, busca nem "Novo" (a
   navegação está travada até a escolha; ver TELAS_SEM_CONDOMINIO). */
body.nav-travada .topo-nav,body.nav-travada .busca-topo,body.nav-travada #btn-novo-topo{display:none!important}

/* ── Instalar o app ───────────────────────────────────────────────── */
.instalar-vantagens{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px}
.instalar-vantagens>div{display:flex;align-items:center;gap:12px;font-size:.9rem}
.instalar-vantagens i{font-size:1.2rem;color:var(--cor-primaria)}
.instalar-url{padding:8px 12px;border-radius:8px;background:var(--cor-input-bg);color:var(--cor-texto);word-break:break-all;font-size:.85rem}
.instalar-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--esp-4);align-items:start}
.instalar-grade>.bloco+.bloco{margin-top:0}
.instalar-passos ol{margin:0;padding-left:1.2rem;font-size:.9rem;line-height:1.6}
.instalar-passos li+li{margin-top:6px}
.instalar-atual{border-color:color-mix(in srgb,var(--cor-primaria) 35%,var(--cor-border))}