/* topo-em-botoes.css — [12/10/2026] O TOPO DO APP DA ÁREA EM BOTÕES (docs/topo-em-botoes.md)

   Vale para o app da área inteiro (Base, Matriz, Negociações e Comercial), no computador e no celular, com a bandeira
   do Studio ou sem ela. Saem a barra de cima e a faixa de abas. Ficam, soltos sobre a tela:
     - as seções: botões redondos de 42 px, em vidro, só com o ícone; o da seção aberta fica em lime com reflexo e
       estica mostrando o nome (largura e cor animadas, 380 ms);
     - as ações (Salvar, Atlas, Inc): botões redondos do mesmo padrão. No computador, em linha, no canto direito de
       cima. No celular, em coluna, no canto direito. O Salvar ganha uma bolinha lime quando há alteração sem salvar;
     - no computador, um "Solos" pequeno à esquerda das seções (sem o selo de versão e sem caixa).

   SÓ PELE. Os botões são os mesmos de antes, com os mesmos ids, e continuam ligados às mesmas funções. Nenhuma regra
   daqui mexe em `display` com !important: quem aparece e quem some (por aba, por perfil, pelo celular) continua
   decidido onde sempre foi (style no próprio botão, commercial.css, pipeline/estilo.css, base-celular.css).

   Os ícones vão por máscara no ::before, sem nenhum elemento dentro do botão: o Salvar e o Inc. escrevem o próprio
   texto ("Salvando...", "Salvo ✓", "Gerando link…") e apagariam um ícone posto dentro deles. O texto continua lá,
   para o leitor de tela e para o teste; só não é desenhado nos botões de ícone.

   Peso dos seletores: `html:root` e as quatro classes da barra na frente, para vencer as folhas antigas (cheias de
   !important) seja qual for a ordem de carga. */

/* ── a caixa some: ficam só os botões ─────────────────────────────────────────────────────────────── */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar {
  --topo-vidro: rgba(255,255,255,.84);
  --topo-lime: linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.16) 62%, rgba(255,255,255,0) 100%), #CDEB6E;
  --topo-sombra: 0 6px 16px rgba(27,31,26,.14);
  --topo-brilho: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 16px rgba(170,200,70,.32);
  --topo-tinta: #1B1F1A;
  position: fixed !important;
  top: calc(18px + var(--solos-seguro-cima, env(safe-area-inset-top, 0px))) !important;
  left: calc(24px + var(--solos-seguro-esq, 0px)) !important; right: calc(24px + var(--solos-seguro-dir, 0px)) !important;
  height: 54px !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important;
  overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  pointer-events: none;                 /* o vão entre as seções e as ações é do mapa e da página */
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar::before { content: none !important; display: none !important; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar > * { pointer-events: auto; }

/* ── "Solos", pequeno, sem selo e sem caixa ─────────────────────────────────────────────────────── */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-brand {
  order: 0; display: flex !important; align-items: center; height: 42px; padding: 0 !important; margin: 0 6px 0 2px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font: 700 16px/1 Jost, -apple-system, system-ui, sans-serif !important; letter-spacing: 0 !important; color: var(--topo-tinta) !important;
  text-shadow: 0 0 2px rgba(247,245,239,.95), 0 0 12px rgba(247,245,239,.9);       /* legível sobre o mapa e sobre a página que rola */
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-brand .bt-version { display: none !important; }

/* ── as seções ──────────────────────────────────────────────────────────────────────────────────── */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar #v14-tabs.bt-tabs {
  order: 1; display: flex !important; flex: 0 0 auto; width: auto !important; align-items: center; justify-content: flex-start !important;
  gap: 6px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: visible !important; visibility: visible !important;
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar #v14-tabs.bt-tabs .v14-tab.tab-link:not(.bt-tab-hidden) {
  box-sizing: border-box; display: inline-flex !important; flex: 0 0 auto; align-items: center; justify-content: flex-start;
  height: 42px !important; min-width: 42px; max-width: 42px; padding: 0 11px !important; margin: 0 !important;
  border: 0 !important; border-radius: 21px !important; overflow: hidden; white-space: nowrap; cursor: pointer;
  font: 700 13px/1 Jost, -apple-system, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  color: transparent !important;        /* fechado: só o ícone; o nome continua no botão, para quem não vê a tela */
  background: var(--topo-vidro) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--topo-sombra) !important;
  transition: max-width 380ms cubic-bezier(.2,.9,.2,1), color 240ms ease, background 260ms ease, box-shadow 260ms ease, transform 180ms ease;
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar #v14-tabs.bt-tabs .v14-tab.tab-link:not(.bt-tab-hidden)::before {
  content: ''; flex: none; width: 20px; height: 20px; margin-right: 7px; background-color: var(--topo-tinta);
  -webkit-mask: var(--topo-icone) center / 20px 20px no-repeat; mask: var(--topo-icone) center / 20px 20px no-repeat;
}
/* a seção aberta: lime com reflexo, esticada, com o nome à vista */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar #v14-tabs.bt-tabs .v14-tab.tab-link.active:not(.bt-tab-hidden) {
  max-width: 168px; color: var(--topo-tinta) !important; background: var(--topo-lime) !important; box-shadow: var(--topo-brilho) !important;
  border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar #v14-tabs.bt-tabs .v14-tab.tab-link:not(.bt-tab-hidden):active { transform: scale(.95); }
/* os ícones das seções (os do desenho aprovado) */
html:root #v14-view-area #v14-tabs .v14-tab[data-tab="analise"] { --topo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 3 L18 7 V15 L11 19 L4 15 V7 Z M4 7 L11 11 L18 7 M11 11 V19' stroke='black' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html:root #v14-view-area #v14-tabs .v14-tab[data-tab="matriz"] { --topo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 4 H10 V10 H4 Z M12 4 H18 V10 H12 Z M4 12 H10 V18 H4 Z M12 12 H18 V18 H12 Z' stroke='black' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html:root #v14-view-area #v14-tabs .v14-tab[data-tab="neg"] { --topo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 8 H17 M14 5 L17 8 L14 11 M18 14 H5 M8 11 L5 14 L8 17' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html:root #v14-view-area #v14-tabs .v14-tab[data-tab="commercial"] { --topo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 8 H18 V17 H4 Z M8 8 V5.5 H14 V8 M4 12 H18' stroke='black' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ── a pílula com o nome do ativo (aparece onde já aparecia; só ganha o lime do padrão) ───────────── */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-ativo-chip { order: 2; margin-left: auto !important; min-width: 0; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-ativo-chip #v14-area-header-nome {
  display: inline-flex; align-items: center; height: 42px; max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 16px; border: 0; border-radius: 21px; background: var(--topo-lime); box-shadow: var(--topo-brilho); color: var(--topo-tinta);
  font: 700 12px/1 Jost, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}

/* ── as ações ───────────────────────────────────────────────────────────────────────────────────── */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions {
  order: 3; display: flex; flex-direction: row; align-items: center; gap: 8px !important; margin: 0 0 0 8px !important; height: auto !important;
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn {
  box-sizing: border-box; position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; min-width: 42px; height: 42px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 21px !important; overflow: visible; cursor: pointer;
  font: 700 11.5px/1 Jost, -apple-system, system-ui, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--topo-tinta) !important; white-space: nowrap;
  background: var(--topo-vidro) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--topo-sombra) !important;
  transition: transform 280ms cubic-bezier(.2,.9,.25,1.25), background 260ms ease, box-shadow 260ms ease, opacity 200ms ease;
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn:active { transform: scale(.94); transition-duration: 80ms; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn:disabled { opacity: .62; cursor: default; }
/* no computador: Inc., Atlas e, no canto, Salvar */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-btn-share-prop-header,
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-btn-share-inc-header,
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-pipeline { order: 1; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-atlas { order: 2; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version { order: 3; }
/* Salvar e Atlas: só o ícone (o texto continua no botão, sem ser desenhado) */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version.bt-btn,
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-atlas.bt-btn { font-size: 0 !important; letter-spacing: 0 !important; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version.bt-btn::before,
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-atlas.bt-btn::before {
  content: ''; flex: none; width: 20px; height: 20px; background-color: var(--topo-tinta);
  -webkit-mask: var(--topo-icone) center / 20px 20px no-repeat; mask: var(--topo-icone) center / 20px 20px no-repeat;
  transition: opacity 200ms ease;
}
html:root #v14-view-area .bt-actions #v14-save-version { --topo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 4 V13 M7.5 10 L11 13.5 L14.5 10 M4.5 15.5 V18 H17.5 V15.5' stroke='black' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html:root #v14-view-area .bt-actions #v14-go-atlas { --topo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3.5 6 L8.5 4 L13.5 6 L18.5 4 V16 L13.5 18 L8.5 16 L3.5 18 Z M8.5 4 V16 M13.5 6 V18' stroke='black' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* a bolinha do Salvar: há alteração sem salvar (quem marca é o topo-em-botoes.mjs) */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version.bt-btn[data-alterado="1"]::after {
  content: ''; position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.16) 62%, rgba(255,255,255,0) 100%), #CDEB6E;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 2px #FFFFFF;
}
/* o que o Salvar está fazendo: salvando (ícone apagado), salvo (lime, com o visto) e erro (âmbar) */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version.bt-btn[data-estado="salvando"]::before { opacity: .4; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version.bt-btn[data-estado="salvo"] {
  background: var(--topo-lime) !important; box-shadow: var(--topo-brilho) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  --topo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5 L9.2 15.5 L17 6.8' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version.bt-btn[data-estado="erro"] {
  box-shadow: 0 0 0 2px #D58A2A, 0 6px 16px rgba(27,31,26,.14) !important;
}
/* Inc. gerando o link: o texto ("Gerando link…") não cabe no botão; ficam três pontos */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn[aria-busy="true"] { font-size: 0 !important; }
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn[aria-busy="true"]::before { content: '···'; font: 700 16px/1 Jost, sans-serif; letter-spacing: .04em; color: var(--topo-tinta); }
/* Pipeline (só aparece no Comercial, para quem já via): o nome não cabe num círculo, vira pílula do mesmo vidro */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-pipeline.bt-btn { width: auto; padding: 0 15px !important; }

/* ── foco visível ───────────────────────────────────────────────────────────────────────────────── */
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar #v14-tabs.bt-tabs .v14-tab.tab-link:focus-visible,
html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn:focus-visible { outline: 2px solid #1B1F1A !important; outline-offset: 2px; }

/* a Negociações começa logo abaixo dos botões (vinha do barra-do-estudo.css) */
@media (min-width: 861px) {
  html:root #v14-panel-neg:not(.neg-gaveta) { padding-top: 72px !important; }
}

/* ── CELULAR (o mesmo corte do app: até 860 px) ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar {
    top: calc(12px + var(--solos-seguro-cima, env(safe-area-inset-top, 0px))) !important;
    left: calc(10px + var(--solos-seguro-esq, 0px)) !important; right: calc(10px + var(--solos-seguro-dir, 0px)) !important;
    height: 42px !important; gap: 6px !important; align-items: flex-start !important;
  }
  /* no celular não há "Solos" nem a pílula do nome: a largura é das seções */
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-brand,
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-ativo-chip { display: none !important; }
  /* as ações em coluna, no canto direito; de cima para baixo: Salvar, Atlas, Inc */
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions {
    position: absolute; right: 0; top: 0; flex-direction: column; align-items: flex-end; gap: 8px !important; margin: 0 !important;
  }
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-save-version { order: 1; }
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-atlas { order: 2; }
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-btn-share-prop-header,
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-btn-share-inc-header,
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-pipeline { order: 3; }
  /* nas páginas de documento a coluna tem só Salvar e Atlas: o Inc. fica na Base (esta regra só esconde, nunca mostra) */
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar[data-active-tab]:not([data-active-tab="analise"]) .bt-actions #v14-btn-share-inc-header { display: none !important; }
  /* o Pipeline (no Comercial) fica na linha das seções: mais curto, para não encostar nelas num celular estreito */
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions #v14-go-pipeline.bt-btn { padding: 0 11px !important; font-size: 10.5px !important; }
  /* as páginas de documento começam abaixo da coluna de ações (Salvar e Atlas): 12 + 42 + 8 + 42 + 12 */
  html:root:root #v14-panel-matriz,
  html:root:root #v14-panel-neg:not(.neg-gaveta),
  html:root:root #v14-panel-arquivos,
  html:root:root #v14-panel-historico { padding-top: calc(116px + var(--solos-seguro-cima, env(safe-area-inset-top, 0px))) !important; }
}

/* ── menos movimento: só troca ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar #v14-tabs.bt-tabs .v14-tab.tab-link,
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn,
  html:root #v14-view-area .card.v14-area-header.v22-header-line.v45-topbar .bt-actions .bt-btn::before { transition: none !important; }
}