/* aBeelity Design System — componentes do PDIA v2 (usa os tokens em tokens/*.css) */
@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap");
@import "tokens/fonts.css?v=20261002";
@import "tokens/colors.css";
@import "tokens/typography.css?v=20261002";
@import "tokens/spacing.css";
@import "tokens/effects.css";

*, *::before, *::after { box-sizing: border-box; }
/* 29/09: o atributo hidden tem de vencer os componentes. Sem isto, .ab-btn { display: inline-flex } mostrava botão
   "escondido" — ex.: "Enviar convite do Profiler" com o Profiler em dia. O legado já tinha a regra (sttngs.css). */
[hidden] { display: none !important; }
html { font-size: 16px; }
body { margin: 0; background: var(--ab-gray-100); color: var(--text-strong); font-family: var(--font-body); letter-spacing: var(--ls-normal); line-height: var(--lh-body); }
a { color: inherit; }
button { font-family: var(--font-body); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ab-gray-400); border-radius: 999px; }

/* ---- shell: sidebar 300px + conteúdo ------------------------------------------------ */
.v2-shell { display: flex; min-height: 100vh; }
/* `height: 100vh` FIXO com `overflow` padrão significa que tudo o que não couber
   sai do fundo escuro e aparece por cima da página clara. Foi o que aconteceu em
   22/09 ao acrescentar Departamentos e Comportômetro: dois itens a mais, e o
   bloco do usuário e a marca caíram para fora da barra.

   Quem rola é a NAVEGAÇÃO, não a barra: assim o usuário e a marca continuam
   sempre visíveis no rodapé, dentro do escuro. */
.v2-side { width: 300px; flex: none; background: var(--ab-ink-700); color: var(--ab-white); padding: 40px 32px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* 96px e não 120px (22/09/2026): com 9 itens principais a barra passava de 900px
   e não cabia numa tela de notebook. Este é também o valor que a casca legada já
   usava — as duas passam a ter os MESMOS números, conferidos por teste. */
/* 26/09/2026: a logomarca completa (ícone + nome), alinhada à esquerda com os itens, no grafite da própria
   marca (#2E2C2B). Saíram o quadrado do ícone e a assinatura repetida no pé. */
.v2-side .logo { width: auto; height: auto; margin: 0 0 28px; }
.v2-side .logo img { width: 150px; height: auto; display: block; }
/* min-height: 0 é o que permite ao nav ENCOLHER dentro do flex — sem ele, o
   overflow-y não tem efeito e o conteúdo empurra para fora mesmo assim. */
.v2-side nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
.v2-side nav a { display: block; padding: 5px 0; font-size: 16px; font-weight: 400; color: var(--ab-gray-500); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.v2-side nav a:hover { color: var(--ab-gray-400); }
.v2-side nav a.ativo { color: var(--ab-white); font-weight: 700; }
/* IDÊNTICOS aos demais (22/09): mesmo tamanho, mesma família e MESMA COR. O que
   separa o grupo é a régua e o rótulo acima, não o item ser mais apagado. Só o
   `margin-top: auto` fica, que é o que empurra o bloco para o pé da navegação. */
.v2-side nav a.secundario { margin-top: auto; }
.v2-side .user { flex: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 12px; }
.v2-side .user .nome { font-size: 14px; font-weight: 700; line-height: 1.2; }
.v2-side .user .meta { font-family: var(--font-meta); font-size: 11px; color: var(--ab-gray-500); }
.v2-side .wordmark { flex: none; width: 100px; margin: 18px auto 0; display: block; opacity: .95; }
/* 26/09/2026 — em notebook (tela até ~900px de altura) a lista não cabia: o nav rolava por dentro, a barra de
   rolagem do Mac fica invisível e o grupo Configurar parecia vazio, escondido atrás do nome e da marca.
   Em tela baixa a casca encolhe (logo menor, sem a assinatura aBeelity embaixo, itens mais juntos) e, se ainda
   assim sobrar lista, o pé do nav esmaece para mostrar que há mais. Mesmos valores nas duas cascas (teste). */
.v2-side .user > div { min-width: 0; }
.v2-side .user .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) and (max-height: 900px) {
  .v2-side { padding-top: 24px !important; padding-bottom: 20px !important; }
  .v2-side .logo { margin: 0 0 18px; }
  .v2-side .logo img { width: 128px; }
  .v2-side nav a, .v2-side nav .breve { padding: 3px 0; }
  .v2-side nav .grupo { margin-top: 10px; padding-top: 8px; }
  .v2-side .wordmark { display: none; }
  .v2-side .user { margin-top: 12px; padding-top: 12px; }
  .v2-side nav { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 28px; }
}
.v2-main { flex: 1; min-width: 0; padding: 36px 40px 64px; max-width: var(--content-max); margin-inline: auto; width: 100%; }
@media (max-width: 900px) {
  .v2-shell { flex-direction: column; }
  .v2-side { width: 100%; height: auto; position: static; padding: 20px 24px; }
  .v2-side .logo { margin: 0 0 12px; }
  .v2-side .logo img { width: 120px; }
  .v2-side nav { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .v2-side nav a { font-size: 15px; padding: 5px 0; }
  .v2-side nav .grupo { display: none; }
  .v2-side .wordmark, .v2-side .user { display: none; }
  .v2-main { padding: 24px 16px 48px; }
}

/* ---- tipografia ----------------------------------------------------------------- */
.ab-eyebrow { font-family: var(--font-meta); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ab-honey-700); margin-bottom: 6px; }
.ab-eyebrow.roxo { color: #7B2E93; }
.ab-h1 { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1.05; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
.ab-h2 { font-family: var(--font-display); font-weight: 900; font-size: 22px; margin: 0; }
.ab-h3 { font-family: var(--font-display); font-weight: 900; font-size: 19px; margin: 0 0 12px; }
.ab-label { font-family: var(--font-meta); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-label); }
.ab-muted { color: var(--text-muted); }
.ab-body { color: var(--text-body); }
.ab-num { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; }
.ab-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ab-header .acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- botões --------------------------------------------------------------------- */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: var(--transition-base); }
.ab-btn:active { transform: translateY(1px); }
.ab-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ab-btn--honey { background: var(--ab-honey-500); color: var(--ab-ink-700); }
.ab-btn--honey:hover { background: var(--ab-honey-600); }
.ab-btn--ink { background: var(--ab-ink-800); color: var(--ab-white); }
.ab-btn--ink:hover { background: var(--ab-ink-900); }
.ab-btn--ghost { background: var(--ab-white); border-color: var(--border-input); color: var(--text-strong); }
.ab-btn--ghost:hover { border-color: var(--ab-ink-700); }
.ab-btn--dashed { background: var(--ab-white); border: 1px dashed var(--border-strong); color: var(--text-body); }
/* botão de solução (26/09): cada solução na sua cor, com moldura e anel — funciona em fundo claro e escuro.
   O 9-Box é escuro: a moldura amarela é o que o separa de um rodapé escuro. Mesmo padrão do rodapé do site. */
.ab-btn--sol { border-width: 2px; border-radius: var(--radius-md); font-weight: 700; letter-spacing: .02em; }
.ab-btn--sol:hover { transform: translateY(-2px); }
.ab-btn--sol-pdia     { background: var(--sol-pdia);     color: var(--ab-ink-700); border-color: var(--ab-honey-200); box-shadow: 0 0 0 4px rgba(255,197,44,.35); }
.ab-btn--sol-pdia:hover     { background: var(--ab-honey-600); }
.ab-btn--sol-9box     { background: var(--sol-9box);     color: var(--ab-white);   border-color: var(--ab-honey-500); box-shadow: 0 0 0 4px rgba(255,197,44,.22); }
.ab-btn--sol-9box:hover     { background: var(--ab-ink-900); }
.ab-btn--sol-formacao { background: var(--sol-formacao); color: var(--ab-white);   border-color: var(--ab-plum-300); box-shadow: 0 0 0 4px rgba(123,46,147,.45); }
.ab-btn--sol-formacao:hover { background: var(--ab-plum-600); }
.ab-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }
.ab-btn--md { height: 40px; padding: 0 18px; font-size: 13.5px; }
.ab-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ab-select { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; background: var(--ab-white); border: 1px solid var(--border-input); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; }
.ab-select select { border: none; background: transparent; font: inherit; color: inherit; }

/* ---- cartões e KPIs -------------------------------------------------------------- */
.ab-card { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.ab-card--pad { padding: 22px 26px; }
.ab-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .ab-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ab-kpis { grid-template-columns: 1fr; } }
.ab-kpi { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-top: 4px solid var(--ab-honey-500); padding: 20px; }
.ab-kpi--danger { border-top-color: var(--ab-danger); }
.ab-kpi--ok { border-top-color: #12B05A; }
.ab-kpi .valor { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.ab-kpi .valor .n { font-family: var(--font-display); font-size: 44px; font-weight: 900; line-height: 1; color: var(--ab-honey-700); }
.ab-kpi--danger .valor .n { color: var(--ab-danger); }
.ab-kpi--ok .valor .n { color: #12B05A; }
.ab-kpi .valor .d { font-size: 14px; color: var(--text-body); }
.ab-kpi .nota { margin-top: 10px; font-size: 12.5px; color: var(--text-body); line-height: 1.4; }

/* ---- barras, pílulas, hexágono ---------------------------------------------------- */
.ab-bar { height: 8px; background: var(--ab-gray-200); border-radius: 999px; overflow: hidden; display: block; }
.ab-bar > span { display: block; height: 100%; background: var(--ab-honey-500); }
.ab-bar > span.ok { background: #12B05A; }
.ab-bar > span.ink { background: var(--ab-ink-700); }
.ab-bar > span.danger { background: var(--ab-danger); }
.ab-bar > span.cinza { background: var(--ab-gray-500); }
.ab-bar--fina { height: 7px; }
/* ---- abas -----------------------------------------------------------------------
   Duas telas que respondem a mesma pergunta passam a viver sob um item de menu so
   (21/09/2026): Meu time e Colaboradores, Relatorio em aberto e encerrados. */
.ab-abas { display: flex; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid var(--border-subtle); }
.ab-abas a {
  padding: 10px 16px; font-size: 14.5px; font-weight: 600; color: var(--text-body);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.ab-abas a:hover { color: var(--text-strong); }
.ab-abas a.ativa { color: var(--text-strong); font-weight: 700; border-bottom-color: var(--ab-honey-500); }
@media (max-width: 560px) { .ab-abas { overflow-x: auto; } }

.ab-pill { display: inline-block; font-family: var(--font-meta); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--ab-gray-200); color: var(--text-body); white-space: nowrap; }
.ab-pill--ok { background: #12B05A; color: #fff; }
.ab-pill--honey { background: var(--ab-honey-500); color: var(--ab-ink-700); }
.ab-pill--danger { background: var(--ab-danger); color: #fff; }
.ab-pill--ink { background: var(--ab-ink-700); color: #fff; }
.ab-hex { width: 34px; height: 34px; flex: none; background: var(--ab-ink-800); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display: inline-flex; align-items: center; justify-content: center; color: var(--ab-honey-500); font-family: var(--font-meta); font-size: 11px; font-weight: 800; }
.ab-hex--honey { background: var(--ab-honey-500); color: var(--ab-ink-700); }
.ab-hex--cinza { background: var(--ab-gray-300); color: var(--ab-ink-700); }
.ab-hex--lg { width: 56px; height: 56px; font-family: var(--font-display); font-size: 18px; font-weight: 900; }
.ab-hex--xl { width: 70px; height: 70px; font-family: var(--font-display); font-size: 22px; font-weight: 900; }
.ab-toggle { display: inline-flex; gap: 4px; background: var(--ab-gray-200); border-radius: var(--radius-pill); padding: 3px; }
.ab-toggle a, .ab-toggle span { padding: 7px 16px; font-family: var(--font-meta); font-size: 11.5px; color: var(--text-body); border-radius: var(--radius-pill); text-decoration: none; }
.ab-toggle .ativo { background: var(--ab-ink-800); color: #fff; font-weight: 600; }
/* Chave liga/desliga (07/10/2026, "Receber lembretes pelo WhatsApp"): um checkbox de verdade com role="switch". */
input[type="checkbox"][role="switch"] { appearance: none; -webkit-appearance: none; flex: none; width: 36px; height: 20px; margin: 1px 0 0; border-radius: var(--radius-pill); background: var(--ab-gray-300); position: relative; cursor: pointer; transition: background .15s; }
input[type="checkbox"][role="switch"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ab-white); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
input[type="checkbox"][role="switch"]:checked { background: var(--ab-honey-500); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(16px); }
input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid var(--focus-ring, #822A7E); outline-offset: 2px; }

/* ---- listas em linhas (tabela flex) --------------------------------------------- */
.ab-lista .cab { display: flex; align-items: center; gap: 12px; padding: 10px 26px; background: var(--ab-gray-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-meta); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-label); }
.ab-lista .linha { display: flex; align-items: center; gap: 12px; padding: 13px 26px; border-bottom: 1px solid var(--ab-gray-200); color: inherit; text-decoration: none; }
.ab-lista .linha:last-of-type { border-bottom: none; }
.ab-lista .linha:hover { background: var(--ab-gray-50); }
.ab-lista .linha.destaque { background: var(--ab-honey-100); }
.ab-lista .pessoa { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ab-lista .pessoa .nome { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-lista .pessoa .cargo { display: block; font-family: var(--font-meta); font-size: 11px; color: var(--text-muted); }
.ab-lista .col { flex: none; }
.ab-lista .num { font-family: var(--font-display); font-size: 19px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.ab-lista .meta { font-family: var(--font-meta); font-size: 12px; color: var(--text-body); }
.ab-lista .meta.alerta { color: var(--ab-danger); font-weight: 600; }
.ab-lista .rodape { padding: 14px 26px; background: var(--ab-gray-50); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ab-lista .vazio { padding: 40px 26px; text-align: center; color: var(--text-muted); }
@media (max-width: 900px) { .ab-lista .cab { display: none; } .ab-lista .linha { flex-wrap: wrap; padding: 12px 16px; } .ab-lista .pessoa { flex-basis: 100%; } }

/* ---- painéis escuros e avisos ---------------------------------------------------- */
.ab-dark { background: var(--surface-dark); color: var(--ab-white); border-radius: var(--radius-lg); padding: 24px; }
.ab-dark .ab-label { color: var(--ab-gray-500); }
.ab-aviso { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; }
.ab-aviso .dot { width: 18px; height: 18px; flex: none; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; background: var(--ab-warning); }
.ab-aviso .dot.danger { background: var(--ab-danger); }
.ab-aviso .dot.ok { background: var(--ab-success); }
.ab-nota-rodape { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.ab-grid-2 { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
/* Sem isto, um item de grade com conteúdo largo (uma lista com linhas sem quebra) estoura a coluna e empurra a lateral para fora da tela. */
.ab-grid-2 > * { min-width: 0; }
.ab-lista .linha, .ab-lista .cab { min-width: 0; }
@media (max-width: 1100px) { .ab-grid-2 { grid-template-columns: 1fr; } }
.ab-podio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; align-items: end; }
@media (max-width: 700px) { .ab-podio { grid-template-columns: 1fr; } }
.ab-podio .lugar { background: var(--ab-gray-200); border: 3px solid var(--ab-gray-300); border-radius: var(--radius-xl); padding: 22px; text-align: center; }
.ab-podio .lugar.primeiro { background: var(--ab-honey-500); border-color: var(--ab-honey-500); box-shadow: 0 12px 28px rgba(255,197,44,.4); padding: 28px 22px; }
.ab-podio .pos { font-family: var(--font-display); font-size: 16px; font-weight: 900; color: var(--text-body); margin-bottom: 12px; }
.ab-podio .primeiro .pos, .ab-podio .primeiro .nome { color: var(--ab-ink-700); }
.ab-podio .nome { font-size: 16px; font-weight: 800; margin-top: 12px; }
.ab-podio .cargo { font-family: var(--font-meta); font-size: 11.5px; color: var(--text-body); margin-bottom: 12px; }
.ab-podio .primeiro .cargo { color: var(--ab-ink-600); }
.ab-podio .score { font-family: var(--font-display); font-size: 36px; font-weight: 900; line-height: 1; }
.ab-podio .primeiro .score { font-size: 46px; color: var(--ab-ink-700); }
.ab-podio .delta { font-family: var(--font-meta); font-size: 11.5px; font-weight: 700; margin-top: 4px; }
.delta-up { color: var(--ab-success-700); } .delta-down { color: var(--ab-danger); } .delta-zero { color: var(--text-muted); }
.ab-versao { position: fixed; right: 12px; bottom: 10px; font-family: var(--font-meta); font-size: 10px; color: var(--text-muted); background: rgba(255,255,255,.8); padding: 3px 8px; border-radius: var(--radius-pill); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- itens do menu ainda não implementados / grupo de telas antigas ------------------- */
.v2-side nav .breve { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 16px; color: var(--ab-gray-700); cursor: not-allowed; }
.v2-side nav .breve small { font-family: var(--font-meta); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ab-ink-600); border-radius: var(--radius-pill); padding: 2px 8px; color: var(--ab-gray-600); }
.v2-side nav .grupo { margin-top: 14px; padding-top: 10px; padding-bottom: 2px; border-top: 1px solid rgba(255,255,255,.12); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ab-gray-700); }
.v2-side nav a.secundario { margin-top: 0; padding: 5px 0; }
/* 26/09/2026: o primeiro grupo não leva régua — ela só separa um grupo do anterior */
.v2-side nav .grupo.primeiro { margin-top: 0; padding-top: 0; border-top: 0; }
.v2-side a.user { color: inherit; text-decoration: none; }
.v2-side .user .ab-hex { background: var(--ab-ink-600); }   /* o menu agora é do mesmo grafite do hexágono (26/09) */
.v2-side a.user:hover .nome { color: var(--ab-honey-500); }
/* O Sair não é navegação: é a saída. Estilo próprio (22/09/2026) — antes herdava
   o de `secundario`, que é o grupo de telas antigas, e ficava com cara de sobra. */
.v2-side nav a.sair { margin-top: auto; padding: 14px 0 0 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: var(--ab-gray-600); }
.v2-side nav a.sair:hover { color: var(--ab-white); }
.v2-side .logo a { display: block; }
.ab-btn--breve { background: var(--ab-gray-200); border-color: var(--ab-gray-300); color: var(--ab-gray-500); cursor: not-allowed; pointer-events: none; }
.ab-btn--breve::after { content: "em breve"; font-family: var(--font-meta); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ab-gray-400); border-radius: var(--radius-pill); padding: 2px 7px; margin-left: 4px; }
.ab-lista .pessoa { min-width: 200px; }

/* Declaração da LGPD art. 20 nas telas de gamificação do colaborador (14/09/2026) */
.ab-nota-lgpd { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--ab-honey-500); background: var(--ab-gray-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }   /* 14px desde 20/10/2026 (era 12, "fonte muito pequena") */
.ab-nota-lgpd strong { font-weight: 600; }
/* Recurso do Anual+ que a empresa não tem (10/10/2026, core/Plano/Recursos.php): selo + o que é + como ter, nunca erro */
.ab-selo-plano { display: inline-block; vertical-align: middle; font-family: var(--font-meta); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--ab-honey-500); color: var(--ab-ink-700); white-space: nowrap; }
.ab-selo-plano--menu { font-size: 9px; padding: 2px 6px; margin-left: 6px; }
.ab-plano-bloqueado { border: 1px dashed var(--ab-honey-500); }
.ab-plano-bloqueado__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ab-plano-bloqueado p { margin: 0 0 12px; font-size: 13px; }
.ab-plano-bloqueado__acao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.ab-plano-bloqueado--compacto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-md); background: var(--ab-honey-100); font-size: 13px; }

/* Aviso flutuante (assets/ds/aviso.js) — substitui o alert() nativo nas telas v2 (29/09/2026) */
.ab-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.ab-toast { position: relative; padding: 14px 40px 14px 16px; border-radius: var(--radius-md, 8px); background: var(--ab-ink-700); color: #fff; font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px rgba(46, 44, 43, .25); border-left: 4px solid var(--ab-warning); animation: ab-toast-entra .2s ease-out; transition: opacity .35s, transform .35s; }
.ab-toast--ok { border-left-color: var(--ab-success); }
.ab-toast--danger { border-left-color: var(--ab-danger); }
.ab-toast.sai { opacity: 0; transform: translateY(8px); }
.ab-toast-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: rgba(255,255,255,.7); font-size: 18px; line-height: 1; cursor: pointer; }
.ab-toast-x:hover { color: #fff; }
@keyframes ab-toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }