/* ═══════════════════════════════════════════════════════════════════════════
   Barra superior e dock — a navegação do sistema desde que a barra lateral saiu.

   Quatro superfícies vivem aqui: a barra do topo (marca, buscas, ícones), o dock
   de baixo (categorias, Módulos, Histórico), o painel Módulos (mega-menu) e a
   paleta "Ir para" (Ctrl K). As categorias do dock, o painel e a paleta são
   montados por static/js/main/topo.js a partir da lista que o servidor
   renderizou em main/common/menu_fonte.html.

   Os tokens --amp-* são os mesmos da barra lateral antiga, de propósito: a cor
   da marca e o azul escuro do menu não mudaram, só o lugar onde aparecem.
   Ficam escopados em .amp-topo e nos dois painéis — nunca em :root, para não
   vazar para o resto do sistema (foi bug real no banco_talentos em 08/08/2026).

   Referência: DESIGN_SYSTEM.md
   ═══════════════════════════════════════════════════════════════════════════ */

.amp-topo,
.amp-dock,
.amp-mega,
.amp-paleta-veu {
  --amp-bg: #1b2559;
  --amp-brand: #8ba0ff;
  --amp-brand-dark: #3b5bdb;
  --amp-brand-soft: rgba(139, 160, 255, .14);
  --amp-brand-ring: rgba(139, 160, 255, .28);
  --amp-marca-bg: #001fff;
  --amp-line: rgba(255, 255, 255, .11);
  --amp-ink: #eef1ff;
  --amp-muted: #939fd4;
  --amp-hover: rgba(255, 255, 255, .07);
  --amp-star: #f8c76a;
  --amp-danger: #e74a3b;

  /* A barra deixou de ser a faixa azul do topo e virou ferramenta: fundo
     acinzentado, abaixo da faixa de saudação (que herdou o azul). */
  --amp-barra-bg: #eef0f7;
  --amp-barra-ink: #3a3b45;
  --amp-barra-muted: #6b6e80;
  --amp-barra-linha: #d8dbe8;
  --amp-barra-hover: rgba(27, 37, 89, .07);

  --amp-surface: #fff;
  --amp-surface-2: #f8f9fc;
  --amp-text: #3a3b45;
  --amp-text-2: #5a5c69;
  --amp-text-muted: #858796;
  --amp-borda: #eaecf4;
  --amp-borda-2: #d1d3e2;
  --amp-titulo: #111827;
  --amp-altura: 40px;
  --amp-radius: 8px;

  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── A barra ─────────────────────────────────────────────────────────────── */
/* Pílula centralizada, do tamanho do que carrega, e não faixa de ponta a ponta:
   esticada, sobrava um vão vazio entre a marca, a busca e os ícones. */
.amp-topo {
  position: sticky;
  top: 6px;
  z-index: 1035;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  height: var(--amp-altura);
  padding: 0 8px 0 4px;
  /* O respiro vertical soma os mesmos 64px de antes (40 de barra + 24 embaixo):
     ~220 telas contam com ele, e há `calc(100vh - Npx)` calibrados assim.
     A mesa ajusta o de baixo por conta própria. */
  margin: 6px auto 18px;
  background: var(--tema-surface, #fff);
  color: var(--amp-barra-ink);
  border: 1px solid var(--amp-barra-linha);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(27, 37, 89, .08);
  font-size: 12.5px;
}

.amp-topo-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--amp-titulo);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.01em;
  text-decoration: none;
  flex: none;
}
.amp-topo-marca:hover { color: var(--amp-brand-dark); text-decoration: none; }
.amp-topo-selo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--amp-marca-bg);
  display: grid;
  place-items: center;
}
/* 22px: com 15px o lockup empilhado mal se lia. */
.amp-topo-logo { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.amp-topo-nome { display: none; }

/* Largura fixa: numa barra do tamanho do conteúdo, `flex-basis` não diz nada. */
.amp-topo-google {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  flex: none;
  width: 260px;
  padding: 0 12px;
  border: 1px solid var(--amp-barra-linha);
  border-radius: 999px;
  background: var(--amp-barra-bg);
}
.amp-topo-google:focus-within { border-color: var(--amp-brand-dark); }
.amp-topo-google i { color: var(--amp-text-muted); font-size: 12px; }
.amp-topo-google input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--amp-barra-ink);
  font-size: 12px;
  font-weight: 600;
}
.amp-topo-google input::placeholder { color: var(--amp-barra-muted); font-weight: 400; }

/* Rodapé das telas: o texto vai para a direita porque o centro da base é da aba do
   dock, e a folga à direita é do botão "voltar ao topo" (sb-admin), fixo no mesmo canto. */
footer.sticky-footer .copyright { padding-right: 4rem; }

/* ── Dock ────────────────────────────────────────────────────────────────────
   A navegação desceu para baixo, em todas as telas. Duas formas:

   · Fora da mesa, RECOLHIDO: sobra uma aba no rodapé, e o dock abre por cima do
     conteúdo (`position: fixed`). Nenhuma tela perdeu altura — há dezenas de
     `calc(100vh - Npx)` calibrados para a barra do topo, que continua com 40px.
   · Na mesa, SEMPRE ABERTO e dentro da corrente de altura (regras em mesa.css):
     a grade sabe que ele existe e não fica atrás dele.

   Aberto é `data-aberto` no próprio #ampDock, posto por topo.js.            */
/* Centrado por margem, NUNCA por `transform`: um transform aqui viraria o bloco
   de referência do `position: fixed` do Histórico, que abre de dentro da barra
   rolável e seria cortado por ela. */
.amp-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1034;
  width: max-content;
  max-width: calc(100vw - 16px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.amp-dock-barra,
.amp-dock-aba,
.amp-dock-pop { pointer-events: auto; }

/* Sem rolagem lateral em tela larga: `overflow` aqui cortaria o menu da conta,
   que abre para cima de dentro da barra. Só abaixo de 720px ela rola (e o menu
   passa a `fixed`, ver o fim do arquivo). */
.amp-dock-barra {
  display: none;
  align-items: stretch;
  gap: 2px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 18px 18px 0 0;
  background: var(--amp-bg);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .22);
  scrollbar-width: none;
}
.amp-dock-barra::-webkit-scrollbar { display: none; }
.amp-dock[data-aberto] .amp-dock-barra { display: flex; animation: amp-dock-sobe .16s ease-out; }
.amp-dock[data-aberto] .amp-dock-aba { display: none; }
@keyframes amp-dock-sobe { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.amp-dock-aba {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: var(--amp-bg);
  color: var(--amp-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, .18);
  opacity: .92;
}
.amp-dock-aba:hover,
.amp-dock-aba:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 2px var(--amp-brand-ring); }
.amp-dock-aba i { font-size: 10px; }

.amp-dock-grupos { display: flex; align-items: stretch; gap: 2px; }
/* Rótulo por extenso ("Administrativo"): o botão cresce com ele, sem reticências. */
.amp-dock-grupos .amp-dock-item { width: auto; min-width: 78px; padding: 0 12px; }
/* Sem acesso à Administração o botão Adm não nasce, e a vaga não pode abrir buraco. */
.amp-dock-grupos:empty { display: none; }

/* Ícone em cima, nome embaixo. */
.amp-dock-item {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 78px;
  height: 50px;
  padding: 0 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--amp-muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}
.amp-dock-item i { font-size: 16px; color: #c7d0f5; }
.amp-dock-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp-dock-item:hover,
.amp-dock-item:focus-visible { background: var(--amp-hover); color: #fff; text-decoration: none; outline: none; }
.amp-dock-item:hover i { color: #fff; }
.amp-dock-item[aria-expanded="true"] { background: #4a6cf7; color: #fff; }
.amp-dock-item[aria-expanded="true"] i { color: #fff; }
/* A categoria (ou a Mesa) da tela onde a pessoa está: marca discreta, não botão aceso. */
.amp-dock-item[aria-current]:not([aria-expanded="true"]) { background: rgba(139, 160, 255, .16); color: #fff; }
.amp-dock-item[aria-current]:not([aria-expanded="true"]) i { color: var(--amp-brand); }

/* Menu da conta: o mesmo dropdown do Bootstrap de antes, abrindo para cima. */
.amp-dock-conta { position: relative; flex: none; display: flex; }
.amp-dock #userDropdown::after { display: none; }
.amp-dock .dropdown-menu {
  top: auto;
  bottom: calc(100% + 12px);
  right: 0;
  left: auto;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--amp-borda);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .26) !important;
}
.amp-dock .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--amp-text);
  font-size: 12.5px;
  font-weight: 600;
}
.amp-dock .dropdown-item:hover,
.amp-dock .dropdown-item:focus { background: rgba(74, 108, 247, .08); color: var(--amp-brand-dark); }
.amp-dock .dropdown-divider { margin: 4px 6px; border-top-color: var(--amp-borda); }

.amp-dock-fechar {
  flex: none;
  align-self: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--amp-muted);
  font-size: 11px;
  cursor: pointer;
}
.amp-dock-fechar:hover { background: var(--amp-hover); color: #fff; }
.amp-dock[data-fixo] /* Menu da conta: o mesmo dropdown do Bootstrap de antes, abrindo para cima. */
.amp-dock-conta { position: relative; flex: none; display: flex; }
.amp-dock #userDropdown::after { display: none; }
.amp-dock .dropdown-menu {
  top: auto;
  bottom: calc(100% + 12px);
  right: 0;
  left: auto;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--amp-borda);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .26) !important;
}
.amp-dock .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--amp-text);
  font-size: 12.5px;
  font-weight: 600;
}
.amp-dock .dropdown-item:hover,
.amp-dock .dropdown-item:focus { background: rgba(74, 108, 247, .08); color: var(--amp-brand-dark); }
.amp-dock .dropdown-divider { margin: 4px 6px; border-top-color: var(--amp-borda); }

.amp-dock-fechar { display: none; }

/* Painel da categoria, para cima do botão que o abriu. `left` vem do topo.js. */
.amp-dock-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  background: var(--amp-surface);
  border: 1px solid var(--amp-borda);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .26);
  overflow: hidden;
}
.amp-dock-pop[hidden] { display: none; }
.amp-dock-pop-cab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--amp-borda);
  background: var(--amp-surface-2);
}
.amp-dock-pop-cab .ic {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(74, 108, 247, .1);
  color: var(--amp-brand-dark);
  font-size: 12px;
}
.amp-dock-pop-cab b { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--amp-titulo); }
.amp-dock-pop-cab small { font-size: 10.5px; font-weight: 700; color: var(--amp-text-muted); }
.amp-dock-pop-lista { overflow-y: auto; padding: 8px 12px 10px; scrollbar-width: thin; }
.amp-dock-pop-pe {
  display: flex;
  justify-content: flex-end;
  padding: 7px 10px;
  border-top: 1px solid var(--amp-borda);
  background: var(--amp-surface-2);
}
.amp-dock-pop-pe button {
  border: 0;
  border-radius: 8px;
  padding: 4px 10px;
  background: transparent;
  color: var(--amp-brand-dark);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.amp-dock-pop-pe button:hover { background: rgba(74, 108, 247, .1); }

/* ── Histórico ───────────────────────────────────────────────────────────────
   Painel ancorado no próprio botão (por isso o invólucro é `position: relative`),
   e não um dropdown do Bootstrap: posicionado por CSS, sem Popper para reescrever
   o lugar dele um quadro depois. No dock ele abre PARA CIMA.                  */
.amp-topo-hist,
.amp-topo-acoes { position: relative; flex: none; display: flex; align-items: stretch; gap: 2px; }
/* Sem ação de página (toda tela que não é a mesa) a vaga não abre buraco. */
.amp-topo-acoes:empty { display: none; }
.amp-hist {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1045;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--amp-surface);
  border: 1px solid var(--amp-borda);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  overflow: hidden;
}
.amp-hist[hidden] { display: none; }
.amp-hist-cab {
  padding: 11px 14px;
  border-bottom: 1px solid var(--amp-borda);
  background: var(--amp-surface-2);
  color: var(--amp-titulo);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.amp-hist-lista { max-height: 58vh; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.amp-hist-lista::-webkit-scrollbar { width: 8px; }
.amp-hist-lista::-webkit-scrollbar-thumb { background: var(--amp-borda-2); border-radius: 999px; }
.amp-hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 9px;
  color: var(--amp-text);
  text-decoration: none;
}
.amp-hist-item:hover { background: rgba(74, 108, 247, .08); color: var(--amp-brand-dark); text-decoration: none; }
.amp-hist-item > i { flex: none; width: 14px; text-align: center; font-size: 11px; color: var(--amp-text-muted); }
.amp-hist-item .corpo { min-width: 0; display: flex; flex-direction: column; }
.amp-hist-item .nome {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amp-hist-item .pe {
  font-size: 10.5px;
  color: var(--amp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amp-hist-nada { margin: 0; padding: 22px 16px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--amp-text-muted); }

/* ── O bloco de ícones herdado (ícones da pessoa, sino, humor, avatar) ───── */
.amp-topo #icon-container {
  /* O `ml-auto` do Bootstrap empurrava os ícones para a ponta da faixa antiga;
     na pílula não há sobra para empurrar. */
  margin-left: 0 !important;
  display: flex;
  /* `.navbar-nav` do Bootstrap é coluna e só vira linha dentro de um
     `.navbar-expand`, que saiu junto com o <nav> antigo. Sem esta linha os
     ícones, o sino e o avatar empilham um sobre o outro. */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin: 0 0 0 8px;
  padding: 0;
  list-style: none;
}
.amp-topo #icon-container > li { position: relative; }
.amp-topo #icon-container .dropdown-menu { position: absolute; right: 0; left: auto; }
.amp-topo #icon-container > li { display: flex; align-items: center; }
.amp-topo #icon-container .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 5px;
  border-radius: var(--amp-radius);
  color: var(--amp-barra-muted);
  position: relative;
}
.amp-topo #icon-container .nav-link:hover { background: var(--amp-barra-hover); color: var(--amp-brand-dark); }
/* "Criar tarefa": o único item preenchido da pílula, para não se confundir com o
   "+" de adicionar atalho (`#addIcon`). O rótulo some abaixo de 992px: ali a
   busca do Google e os atalhos já ocupam a pílula. */
.amp-topo #icon-container .amp-topo-criar {
  gap: 6px;
  margin: 0 2px;
  padding: 0 9px;
  border: 0;
  background: var(--amp-brand-soft);
  color: var(--amp-brand-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.amp-topo #icon-container .amp-topo-criar:hover { background: var(--amp-barra-hover); }
.amp-topo #icon-container .amp-topo-criar:focus-visible { outline: 2px solid var(--amp-brand-dark); outline-offset: 1px; }
.amp-topo #icon-container .amp-topo-criar[aria-busy="true"] { cursor: progress; opacity: .7; }
/* Lixeira dos atalhos: botão sem caixa, que acende enquanto um atalho é arrastado (topbar.html). */
.amp-topo #icon-container .amp-topo-lixeira { border: 0; background: transparent; font: inherit; cursor: pointer; }
.amp-topo #icon-container.amp-arrastando-atalho .amp-topo-lixeira { color: var(--tema-req-txt, var(--amp-danger)); }
.amp-topo #icon-container #trashIcon.amp-lixeira-alvo .amp-topo-lixeira {
  background: var(--tema-req-soft, rgba(231, 74, 59, .12));
  color: var(--tema-req-txt, var(--amp-danger));
}
.amp-topo #icon-container .badge-counter {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--amp-danger);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.amp-topo .topbar-divider {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--amp-barra-linha);
  border: 0;
}
/* Só quem não tem dock ainda vê o menu da conta aqui (topbar.html). */
.amp-topo #userDropdown {
  width: 30px;
  min-width: 30px;
  font-size: 14px;
}
.amp-topo #userDropdown::after { display: none; }
.amp-topo #baloon { display: none; }

.amp-topo #emoji { font-size: 15px; line-height: 1; }
.amp-topo .pagination-icons .btn { color: var(--amp-barra-muted); }
.amp-topo .pagination-icons .btn:hover { color: var(--amp-brand-dark); }
.amp-topo .dropdown-menu { margin-top: 6px; }

/* ── Central de alertas ──────────────────────────────────────────────────────
   O conteúdo é montado em JS dentro de topbar.html, com classes do Bootstrap.
   Não mexa no markup de lá: o X de dispensar e a regra de quem pode ser
   dispensado moram naquele arquivo. Aqui é só a pele.

   ⚠️ A causa do layout espremido era `.dropdown-item { white-space: nowrap }`,
   do próprio Bootstrap: a mensagem não quebrava linha, empurrava a largura e
   nascia uma barra de rolagem horizontal dentro do painel.                    */
#alertsDropdownMenu {
  /* Acima da barra de ferramentas (1035). Na mesa a central abre a partir da
     faixa de saudação, que fica ACIMA da barra no DOM: sem isto a barra, que é
     sticky e tem z-index próprio, passa por cima do painel aberto. */
  z-index: 1040;
  width: 400px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--amp-borda);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
}
#alertsDropdownMenu .dropdown-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--amp-borda);
  background: var(--amp-surface-2);
  color: var(--amp-titulo);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#alertsDropdownMenu .dropdown-header .close {
  margin-left: auto;
  padding: 0 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--amp-text-muted);
  opacity: 1;
  text-shadow: none;
}
#alertsDropdownMenu .dropdown-header .close:hover { color: var(--amp-titulo); }

#alertsHelpText {
  padding: 8px 14px;
  border-bottom: 1px solid var(--amp-borda);
  background: rgba(74, 108, 247, .06);
  color: var(--amp-text-2);
  font-size: 11.5px;
  line-height: 1.45;
}
#alertsHelpText strong { color: var(--amp-titulo); font-weight: 800; }

#alertsList {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
#alertsList::-webkit-scrollbar { width: 8px; }
#alertsList::-webkit-scrollbar-thumb { background: var(--amp-borda-2); border-radius: 999px; }

#alertsList .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* a linha que consertou o painel */
  white-space: normal;
  padding: 10px 14px;
  border-bottom: 1px solid var(--amp-borda);
  color: var(--amp-text);
}
#alertsList .dropdown-item:last-child { border-bottom: 0; }
#alertsList .dropdown-item:hover,
#alertsList .dropdown-item:focus { background: var(--amp-surface-2); color: var(--amp-text); }
#alertsList .dropdown-item > .mr-3,
#alertsList .onb-alerta-topo > .mr-3 { margin-right: 0 !important; }
#alertsList .icon-circle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(246, 194, 62, .18);
}
#alertsList .icon-circle i { font-size: 12px; color: var(--tema-warn-txt, #7a5a08); }
#alertsList .icon-circle.bg-warning { background: rgba(246, 194, 62, .18) !important; }
#alertsList .icon-circle.bg-warning i { color: var(--tema-warn-txt, #7a5a08) !important; }
#alertsList .dropdown-item > div[style*="flex"],
#alertsList .onb-alerta-topo > div[style*="flex"] { min-width: 0; }
#alertsList .small.text-gray-500 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amp-text-muted) !important;
  margin-bottom: 2px;
}
#alertsList .dropdown-item > div > div:last-child,
#alertsList .onb-alerta-topo > div > div:last-child {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--amp-text);
  overflow-wrap: anywhere;
  margin-bottom: 1px;
}
#alertsList .dropdown-item .ml-2 { gap: 4px; flex: none; }
#alertsList .dropdown-item .btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border-radius: 8px;
  font-size: 11px !important;
  margin: 0 !important;
}
#alertsList .dropdown-item .btn-outline-primary {
  border-color: transparent;
  background: rgba(74, 108, 247, .1);
  color: var(--amp-brand-dark);
}
#alertsList .dropdown-item .btn-outline-primary:hover { background: var(--tema-brand-fill, var(--amp-brand-dark)); color: #fff; }
#alertsList .dropdown-item .btn-outline-secondary {
  border-color: transparent;
  background: var(--amp-surface-2);
  color: var(--amp-text-muted);
}
#alertsList .dropdown-item .btn-outline-secondary:hover {
  background: rgba(231, 74, 59, .12);
  color: var(--tema-req-txt, #a52c20);
}
#alertsList > p.dropdown-item {
  display: block;
  padding: 26px 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--amp-text-muted);
  white-space: normal;
}
#alertsList > p.dropdown-item:hover { background: transparent; }

/* Alerta com ação inline (grill-me 29/09/2026) — linha vira coluna: topo
   (ícone + texto + Acessar/X, igual todo alerta) e um rodapé próprio pras
   ações. Rodapé fica FORA de `.ml-2` de propósito: aquela coluna é só pros
   botões de ícone 28×28 acima, e um botão de texto ou <select> não cabem
   nisso — daí as classes `.onb-alerta-*`, nunca `.btn`/`.btn-outline-*`. */
#alertsList .dropdown-item.onb-alerta-com-acoes {
  flex-direction: column;
  align-items: stretch;
}
#alertsList .onb-alerta-topo { width: 100%; }

#alertsList .onb-alerta-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  /* alinhado com o texto da mensagem acima, não com o ícone (30px + gap 10px) */
  padding-left: 40px;
}
#alertsList .onb-alerta-grupo-confirmar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 180px;
}
#alertsList .onb-alerta-select {
  flex: 1 1 auto;
  min-width: 90px;
  height: 26px;
  padding: 0 6px;
  font-size: 11.5px;
  color: var(--amp-text);
  background: var(--amp-surface);
  border: 1px solid var(--amp-borda-2);
  border-radius: 6px;
}
#alertsList .onb-alerta-select:focus { outline: none; border-color: var(--amp-brand-dark); }

#alertsList .onb-alerta-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--tema-brand-fill, var(--amp-brand-dark));
  border: 0;
  border-radius: 6px;
  transition: background .15s ease;
}
#alertsList .onb-alerta-btn:hover { background: #2c46b0; }
#alertsList .onb-alerta-btn i { margin-right: 3px; }
/* Estado de confirmação (2º clique) — mesma cor de marca, mais escura, sem
   virar vermelho/perigo: liberar não é uma ação destrutiva. */
#alertsList .onb-alerta-btn--confirmando { background: #1f2d5a; }

#alertsList .onb-alerta-link {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--amp-text-2);
  text-decoration: none;
}
#alertsList .onb-alerta-link:hover { color: var(--amp-brand-dark); text-decoration: underline; }
#alertsList .onb-alerta-link i { font-size: 9px; margin-left: 2px; }

/* "Mostrar mais N alertas" (dev, 29/09/2026) — a lista colapsa depois de
   LIMITE_ALERTAS_VISIVEIS itens pra reduzir a poluição visual, sem dar
   poder de dispensar pendência real: nada é marcado como resolvido, só
   recolhido nesta sessão. */
#alertsList .onb-alerta-mostrar-mais {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--amp-brand-dark);
  background: var(--amp-surface-2);
  border: 0;
  border-top: 1px solid var(--amp-borda);
  cursor: pointer;
}
#alertsList .onb-alerta-mostrar-mais:hover { background: var(--amp-brand-soft); }

/* "Marcar todas como lidas" e abas Sistema | Projetos | Menções (task 10803).
   As abas e os painéis só existem para quem vê Projetos; quem desenha os dois
   painéis é static/js/projetos/sino_projetos.js. `display` explícito apaga o
   atributo `hidden`, daí a regra [hidden] de cada um. */
#alertsDropdownMenu .amp-sino-marcar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--amp-brand-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
#alertsDropdownMenu .amp-sino-marcar[hidden] { display: none; }
#alertsDropdownMenu .amp-sino-marcar:hover { background: var(--amp-brand-soft); }
#alertsDropdownMenu .amp-sino-marcar:disabled { opacity: .55; cursor: progress; }
#alertsDropdownMenu .amp-sino-marcar:not([hidden]) + .close { margin-left: 0; }

.amp-sino-abas {
  display: flex;
  padding: 0 8px;
  border-bottom: 1px solid var(--amp-borda);
  background: var(--amp-surface);
}
.amp-sino-aba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 9px 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--amp-text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.amp-sino-aba:hover { color: var(--amp-titulo); }
.amp-sino-aba[aria-selected="true"] { color: var(--amp-titulo); border-bottom-color: var(--amp-brand-dark); }
.amp-sino-conta {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--amp-surface-2);
  color: var(--amp-text-2);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.amp-sino-conta:empty { display: none; }
.amp-sino-aba[aria-selected="true"] .amp-sino-conta { background: var(--amp-brand-soft); color: var(--amp-brand-dark); }

.amp-sino-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--amp-borda);
  background: var(--amp-surface-2);
}
.amp-sino-select {
  flex: 1 1 120px;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--amp-borda-2);
  border-radius: 8px;
  background: var(--amp-surface);
  color: var(--amp-text);
  font-size: 12px;
}
.amp-sino-select:focus { outline: none; border-color: var(--amp-brand-dark); }
.amp-sino-seg {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--amp-borda-2);
  border-radius: 8px;
  overflow: hidden;
}
.amp-sino-seg button {
  height: 26px;
  padding: 0 9px;
  border: 0;
  background: var(--amp-surface);
  color: var(--amp-text-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.amp-sino-seg button + button { border-left: 1px solid var(--amp-borda-2); }
.amp-sino-seg button[aria-pressed="true"] { background: var(--tema-brand-fill, var(--amp-brand-dark)); color: #fff; }

.amp-sino-lista {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.amp-sino-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--amp-borda);
}
.amp-sino-item:hover { background: var(--amp-surface-2); }
.amp-sino-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
}
.amp-sino-item.nao-lida .amp-sino-ponto { background: var(--amp-brand-dark); }
.amp-sino-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--amp-text);
  text-decoration: none;
}
.amp-sino-corpo:hover { color: var(--amp-text); text-decoration: none; }
.amp-sino-meta {
  color: var(--amp-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.amp-sino-texto {
  color: var(--amp-text);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.amp-sino-item.nao-lida .amp-sino-texto { color: var(--amp-titulo); font-weight: 700; }
.amp-sino-corpo:hover .amp-sino-texto { color: var(--amp-brand-dark); }
.amp-sino-rodape {
  overflow: hidden;
  color: var(--amp-text-muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.amp-sino-x {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--amp-surface-2);
  color: var(--amp-text-muted);
  font-size: 11px;
  cursor: pointer;
}
.amp-sino-x:hover { background: var(--amp-brand-soft); color: var(--amp-brand-dark); }
.amp-sino-vazio {
  margin: 0;
  padding: 26px 14px;
  color: var(--amp-text-muted);
  font-size: 12.5px;
  text-align: center;
}
.amp-sino-mais {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: var(--amp-surface-2);
  color: var(--amp-brand-dark);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.amp-sino-mais:hover { background: var(--amp-brand-soft); }

/* O painel nasce ancorado no <li> do sino, que não é o último ícone da pílula:
   com a largura da janela ele saía pela esquerda e era cortado. No celular a
   âncora passa a ser a pílula inteira. */
@media (max-width: 575.98px) {
  .amp-topo #icon-container > li.dropdown { position: static; }
  .amp-topo #icon-container #alertsDropdownMenu { left: 0; right: 0; width: auto; max-width: none; }
  /* Título, rótulo e o X de 40px não cabem juntos em 390: fica o ícone, com aria-label. */
  #alertsDropdownMenu .amp-sino-marcar span { display: none; }
  /* A lixeira só recebe atalho arrastado, e no celular a pílula já ia no limite
     (354 de 354px em 390): sem ela, cabe o "Criar tarefa". */
  .amp-topo #icon-container > #trashIcon { display: none; }
}

/* ── Painel Módulos ──────────────────────────────────────────────────────────
   Modal no meio da tela, e não a cortina de ponta a ponta que era antes: o menu
   tem nove categorias, e esticado na largura inteira do monitor cada coluna
   ficava a um palmo da outra — ler o menu virava varredura de olho.
   `.amp-mega` é o véu; quem tem fundo branco é `.amp-mega-painel`.            */
.amp-mega {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(17, 24, 39, .45);
}
/* `display` de classe vence o `[hidden]` da folha do navegador — sem esta linha
   o véu nasceria aberto e cobriria o sistema inteiro. Vale para a paleta também. */
.amp-mega[hidden] { display: none; }
.amp-mega-painel {
  width: 100%;
  max-width: 1040px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--amp-surface);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
  overflow: hidden;
}
.amp-mega-cab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--amp-borda);
  background: var(--amp-surface-2);
}
.amp-mega-marca { display: flex; align-items: center; gap: 10px; flex: none; }
.amp-mega-marca .ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--amp-brand-soft);
  color: var(--amp-brand-dark);
  font-size: 13px;
}
.amp-mega-marca b { display: block; font-size: 14px; font-weight: 800; color: var(--amp-titulo); line-height: 1.2; }
.amp-mega-marca small { display: block; font-size: 10.5px; color: var(--amp-text-muted); }

/* Com o botão da paleta fora da barra, é este campo que faz "ir para uma tela"
   para quem usa o mouse. O Ctrl K continua abrindo a paleta. */
.amp-mega-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 420px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--amp-borda-2);
  border-radius: var(--amp-radius);
  background: var(--amp-surface);
}
.amp-mega-busca:focus-within { border-color: var(--amp-brand-dark); box-shadow: 0 0 0 3px var(--amp-brand-ring); }
.amp-mega-busca i { color: var(--amp-text-muted); font-size: 12px; }
.amp-mega-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--amp-text);
  font: 600 12.5px/1.4 inherit;
}
.amp-mega-busca input::placeholder { color: var(--amp-text-muted); font-weight: 400; }
.amp-mega-fechar {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--amp-text-muted);
  font-size: 13px;
  cursor: pointer;
}
.amp-mega-fechar:hover { background: var(--amp-borda); color: var(--amp-titulo); }
.amp-mega-corpo { overflow: auto; padding: 14px 16px 18px; background: var(--amp-surface-2); }
.amp-mega-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 12px;
  align-items: start;
}

/* Cada categoria é um cartão, não uma coluna solta: com nove delas lado a lado
   sem moldura, não dá para ver onde uma acaba e a outra começa. */
.amp-mega-cartao,
.amp-mega-favoritos {
  padding: 10px 12px 11px;
  border: 1px solid var(--amp-borda);
  border-radius: 12px;
  background: var(--amp-surface);
}
.amp-mega-favoritos { margin-bottom: 12px; }
.amp-mega h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--amp-titulo);
}
.amp-mega h4 .ic {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--amp-brand-soft);
  color: var(--amp-brand-dark);
  font-size: 10px;
}
.amp-mega h4 .ic.estrela { background: rgba(248, 199, 106, .2); color: var(--tema-warn-txt, #8a6410); }
.amp-mega h4 .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp-mega h4 .n {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--amp-surface-2);
  color: var(--amp-text-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.amp-mega-nada { padding: 34px 14px; text-align: center; font-size: 12.5px; color: var(--amp-text-muted); }
.amp-mega-item { display: flex; align-items: center; gap: 6px; }
.amp-mega-item > a {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 7px;
  color: var(--amp-text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amp-mega-item > a:hover { background: rgba(74, 108, 247, .08); color: var(--amp-brand-dark); text-decoration: none; }
.amp-mega-item > a.amp-sub { padding-left: 18px; }
.amp-mega-sub {
  margin: 8px 0 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amp-text-muted);
  opacity: .8;
}
.amp-estrela {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--amp-borda-2);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  transition: opacity .12s, color .12s;
}
/* Some em repouso só onde existe hover: no toque a estrela não teria como aparecer. */
@media (hover: hover) {
  .amp-estrela { opacity: 0; }
  .amp-mega-item:hover .amp-estrela,
  .amp-estrela[aria-pressed="true"] { opacity: 1; }
}
.amp-estrela:hover { color: var(--amp-star); background: rgba(248, 199, 106, .16); }
.amp-estrela[aria-pressed="true"] { color: var(--amp-star); }
.amp-mega-favoritos .amp-mega-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.amp-mega-favoritos .amp-mega-item > a {
  margin: 0;
  padding: 5px 11px;
  border: 1px solid var(--amp-borda);
  border-radius: 999px;
  background: var(--amp-surface-2);
}
.amp-mega-vazio { font-size: 12px; color: var(--amp-text-muted); }

/* ── Paleta "Ir para" ────────────────────────────────────────────────────── */
.amp-paleta-veu {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: grid;
  place-items: start center;
  padding-top: 9vh;
  background: rgba(17, 24, 39, .45);
}
.amp-paleta-veu[hidden] { display: none; }
.amp-paleta {
  width: 640px;
  max-width: calc(100vw - 32px);
  background: var(--amp-surface);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
  overflow: hidden;
}
.amp-paleta-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--amp-borda);
  color: var(--amp-text-muted);
}
.amp-paleta-campo input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--amp-text);
  font: 600 15px/1.4 inherit;
}
.amp-paleta-lista { max-height: 52vh; overflow: auto; padding: 8px; }
.amp-paleta-grupo {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amp-text-muted);
}
.amp-paleta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--amp-text);
  text-decoration: none;
  cursor: pointer;
}
.amp-paleta-item:hover,
.amp-paleta-item.sel { background: rgba(74, 108, 247, .1); color: var(--amp-brand-dark); text-decoration: none; }
.amp-paleta-item .nome { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp-paleta-item .grupo { font-size: 11px; color: var(--amp-text-muted); white-space: nowrap; }
.amp-paleta-item i { width: 14px; text-align: center; color: var(--amp-text-muted); font-size: 12px; }
/* Cliente e projeto não podem empurrar o título da tarefa para fora. */
.amp-paleta-tarefa .grupo { max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.amp-paleta-pe {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--amp-borda);
  background: var(--amp-surface-2);
  font-size: 11px;
  color: var(--amp-text-muted);
}
.amp-paleta-pe kbd {
  padding: 2px 5px;
  margin-right: 4px;
  border: 1px solid var(--amp-borda-2);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--amp-text-2);
  background: var(--tema-surface, #fff);
}
.amp-paleta-conta { margin-left: auto; }
.amp-paleta-nada { padding: 14px 12px; font-size: 12.5px; color: var(--amp-text-muted); }

/* A lista de destinos é dado para o JS, não tela. */
.amp-menu-fonte { display: none !important; }


@media (max-width: 767.98px) {
  .amp-topo { gap: 6px; padding: 0 8px 0 4px; }
  .amp-topo-google { display: none; }
  /* Sem a busca do Google, some o `margin-left: auto` que empurrava os ícones. */
  .amp-topo #icon-container { margin-left: auto; }
  .amp-dock-item { width: 64px; }
  .amp-dock-barra { overflow-x: auto; }
  .amp-dock .dropdown-menu { position: fixed; bottom: 76px; right: 8px; }
  .amp-hist { width: calc(100vw - 24px); }
  .amp-mega-grade { grid-template-columns: 1fr; }
  /* Abaixo de 16px o iOS amplia a página ao abrir o filtro. */
  .amp-sino-select { font-size: 16px; }
}
/* Dedo: o alvo ganha a altura da própria pílula (40px), e o desenho não muda.
   O fallback do token é para o painel do sino, que na mesa sai de `.amp-topo`. */
@media (pointer: coarse) {
  .amp-topo-marca,
  .amp-topo #icon-container .nav-link,
  .amp-topo .pagination-icons .btn { min-height: var(--rsp-toque-texto, 40px); }
  .amp-topo .pagination-icons .btn { display: inline-flex; align-items: center; }
  /* Área de toque sem mexer na caixa da busca: o que cresce é o campo, por dentro. */
  .amp-topo-google input { padding-block: 13px; margin-block: -13px; }
  .amp-dock-aba { height: var(--rsp-toque-texto, 40px); }
  #alertsDropdownMenu .dropdown-header .close { min-width: var(--rsp-toque-texto, 40px); min-height: var(--rsp-toque-texto, 40px); }
  #alertsDropdownMenu .amp-sino-marcar,
  .amp-sino-aba,
  .amp-sino-select,
  .amp-sino-seg button { min-height: var(--rsp-toque-texto, 40px); }
  #alertsDropdownMenu .amp-sino-marcar { min-width: var(--rsp-toque-texto, 40px); justify-content: center; }
  .amp-sino-x { width: var(--rsp-toque-texto, 40px); height: var(--rsp-toque-texto, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .amp-topo *, .amp-dock *, .amp-mega *, .amp-paleta * { transition: none !important; animation: none !important; }
}

/* Tema no menu da conta (task 10817): três opções lado a lado. Na barra do topo de quem não tem
   dock o menu também fica dentro de .amp-topo, então os tokens --amp-* valem nos dois lugares. */
.amp-tema { padding: 6px 10px 4px; }
.amp-tema-rotulo { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; color: var(--amp-text-muted, #858796); }
.amp-tema-opcoes { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--amp-barra-bg, #eef0f7); }
.amp-tema-opcoes button {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent;
  font-size: 11.5px; font-weight: 600; color: var(--amp-text, #3a3b45); cursor: pointer; white-space: nowrap;
}
.amp-tema-opcoes button:hover { color: var(--amp-brand-dark, #3b5bdb); }
.amp-tema-opcoes button.ativo { background: var(--amp-surface, #fff); color: var(--amp-brand-dark, #3b5bdb); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
@media (pointer: coarse) { .amp-tema-opcoes button { min-height: 40px; } }
.amp-tema-nota { display: block; margin-top: 6px; font-size: 11px; line-height: 1.35; color: var(--amp-text-muted, #858796); white-space: normal; }