/* ═══════════════════════════════════════════════════════════════════════
   A BARRA EM CINCO MENUS — o desenho
   ═══════════════════════════════════════════════════════════════════════
   Cinco portas com nome (Notas, Aparência, Social, Alternar Notas / Gestão,
   Pessoal) e, à direita, o que é estado: avisos, Painel Corporativo e o
   grupo aberto. O HTML está no `index.html`; o comportamento, em
   `js/barra-menus.js`.

   ── OS DOIS TEMAS MORAM AQUI, JUNTOS ────────────────────────────────────
   A regra da casa é que o claro vive em `theme-light.css`, e ela existe por
   um bom motivo: aquele arquivo conserta componentes que nasceram escuros.
   Este não nasceu escuro — nasceu com DUAS versões, e elas têm de ficar
   idênticas em forma. Separá-las em dois arquivos faria cada ajuste de
   espaçamento precisar ser lembrado duas vezes, em lugares diferentes, e é
   assim que um tema fica com 14px de padding e o outro com 16.

   Então: o escuro é a base, o claro é o bloco do fim, e os dois compartilham
   toda a geometria — o que muda entre eles é tinta, e só.

   ── OS ELEMENTOS SÃO OS DE SEMPRE ───────────────────────────────────────
   `.bm-item` é aplicado sobre os MESMOS botões que já existiam (`.t-btn`),
   então quase toda regra daqui precisa vencer a de `.t-btn` no `main.css`.
   É por isso que os seletores são `#toolbar .bm-pop .bm-item` e não `.bm-item`
   solto: especificidade suficiente para não precisar de `!important`, que
   deixaria o tema claro sem como responder.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A FAIXA ─────────────────────────────────────────────────────────── */
#toolbar{gap:14px;padding:0 20px;}

/* 14px entre os menus, e não 10: com cinco pílulas de cantos arredondados
   lado a lado, o vão precisa ser maior que o raio delas — senão o olho lê
   uma barra segmentada em vez de cinco botões. */
.bm-nav{display:flex;align-items:center;gap:14px;min-width:0;}
.bm-host{position:relative;display:flex;align-items:center;}

/* ── OS BOTÕES DA BARRA ──────────────────────────────────────────────── */
#toolbar .bm-btn{
  position:relative;
  display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;
  border-radius:14px;font-family:'Inter',sans-serif;font-size:.875rem;
  font-weight:600;letter-spacing:-.1px;white-space:nowrap;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(240,240,240,.86);transition:background .16s,border-color .16s,color .16s;
}
#toolbar .bm-btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22);color:#fff;}
#toolbar .bm-btn.aberto{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff;}
#toolbar .bm-btn .bm-btn-ico{width:18px;height:18px;flex-shrink:0;}
/* A seta gira ao abrir: é o que diz que o botão é uma porta, e não uma ação. */
#toolbar .bm-btn .bm-chev{width:13px;height:13px;flex-shrink:0;opacity:.55;transition:transform .18s;}
#toolbar .bm-btn.aberto .bm-chev{transform:rotate(180deg);opacity:.9;}

/* "Alternar Notas / Gestão" carrega DUAS informações: o que o clique faz e
   para qual painel ele leva. O eco vai embaixo, em corpo menor — o nome do
   painel muda sozinho e não pode empurrar a barra a cada troca. */
#toolbar .bm-btn-alternar{flex-direction:row;align-items:center;gap:9px;}
#toolbar .bm-btn-alternar .bm-btn-rot{display:block;line-height:1.15;}
#toolbar .bm-btn-alternar .bm-btn-eco{
  display:block;font-size:.68rem;font-weight:500;opacity:.62;line-height:1.15;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#toolbar .bm-btn-alternar > span{display:flex;flex-direction:column;}
#toolbar .bm-btn-alternar{align-items:center;}

/* ── OS PAINÉIS ──────────────────────────────────────────────────────── */
.bm-pop{
  position:absolute;top:calc(100% + 12px);left:0;z-index:1200;
  width:272px;max-width:calc(100vw - 24px);padding:14px;
  border-radius:18px;background:#15171e;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 26px 64px rgba(0,0,0,.62);
  animation:bmPop .16s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bmPop{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
.bm-pop[hidden]{display:none;}
/* A pontinha que liga o painel ao botão. Sem ela, o cartão parece solto no
   meio da tela e a pessoa perde de qual menu ele saiu. */
.bm-pop::before{
  content:'';position:absolute;top:-7px;left:var(--bm-seta,26px);width:13px;height:13px;
  background:inherit;border-left:1px solid rgba(255,255,255,.09);
  border-top:1px solid rgba(255,255,255,.09);transform:rotate(45deg);border-radius:3px 0 0 0;
}

.bm-cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:.66rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:#8ea2ff;margin:2px 4px 10px;
}
.bm-cab .t-count{font-size:.64rem;font-weight:600;letter-spacing:.4px;text-transform:none;color:rgba(240,240,240,.38);}

/* ── AS LINHAS ───────────────────────────────────────────────────────── */
#toolbar .bm-pop .bm-item{
  position:relative;display:grid;width:100%;
  grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;
  align-items:center;column-gap:12px;row-gap:1px;
  padding:10px 8px;border:0;border-radius:12px;background:transparent;
  text-align:left;cursor:pointer;transition:background .14s;
}
#toolbar .bm-pop .bm-item:hover{background:rgba(255,255,255,.05);}
#toolbar .bm-pop .bm-item + .bm-item{
  margin-top:2px;border-top:1px solid rgba(255,255,255,.06);border-radius:12px;
}
/* O ícone em quadrado arredondado: é ele que dá ritmo à lista e o que faz o
   olho achar a linha certa sem ler. */
/* `:not(.bm-seta)` porque a setinha do fim da linha também é filha direta, e
   com o tratamento de ícone ela virava um quadrado claro de 38px no lugar de
   um sinal de "isto abre outra coisa". */
#toolbar .bm-pop .bm-item > svg:not(.bm-seta){
  grid-row:1 / span 2;grid-column:1;width:38px;height:38px;padding:9px;
  border-radius:11px;background:rgba(99,102,241,.15);color:#a5b4fc;
  box-sizing:border-box;flex-shrink:0;
}
#toolbar .bm-pop .bm-item .bm-tit{
  grid-column:2;grid-row:1;font-size:.875rem;font-weight:600;
  color:rgba(240,240,240,.94);line-height:1.25;
}
#toolbar .bm-pop .bm-item .bm-sub{
  grid-column:2;grid-row:2;font-size:.74rem;font-weight:400;
  color:rgba(240,240,240,.45);line-height:1.3;
}
#toolbar .bm-pop .bm-item .bm-seta{
  grid-column:3;grid-row:1 / span 2;width:15px;height:15px;opacity:.35;
}
#toolbar .bm-pop .bm-item .t-kbd{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;padding:3px 6px;
  border-radius:6px;background:rgba(255,255,255,.07);color:rgba(240,240,240,.55);
}
/* O badge é âncora do canto, e não item da grade. */
#toolbar .bm-pop .bm-item .t-notif-badge{top:8px;right:8px;border-color:#15171e;}
/* Restaurar é o único item verde: ele desfaz. */
#toolbar .bm-pop .bm-item-ok > svg{background:rgba(16,185,129,.16);color:#6ee7b7;}

/* O perfil abre a lista com o rosto de quem está logado. */
#toolbar .bm-pop .bm-item-perfil .bm-avatar{
  grid-row:1 / span 2;grid-column:1;width:38px;height:38px;border-radius:50%;
  background:rgba(99,102,241,.2);color:#c7d2fe;display:flex;align-items:center;
  justify-content:center;font-size:.9rem;font-weight:700;overflow:hidden;
}
#toolbar .bm-pop .bm-item-perfil .bm-avatar img{width:100%;height:100%;object-fit:cover;}

/* O seletor de quadros continua sendo a pílula `#t-pill-ws`; aqui ela veste
   a mesma linha dos outros itens. */
#toolbar .bm-pop #t-pill-ws{border:0;background:transparent;}
/* O ponto de presença continua sendo um ponto: fica no canto do ícone da
   linha, e não no lugar dele. Como quadrado de 38px, parecia um ícone que
   não carregou. */
#toolbar .bm-pop #t-pill-ws{position:relative;}
#toolbar .bm-pop #t-pill-ws .t-dot{
  position:absolute;left:30px;top:14px;width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 2px #15171e;
}
#toolbar .bm-pop #t-plan-badge{grid-column:2;grid-row:2;justify-self:start;margin-top:3px;}

/* ── GRUPOS COM SEGMENTADO (Tema, Visualização) ──────────────────────── */
.bm-grupo{padding:10px 8px 4px;}
.bm-grupo-rot{
  display:block;font-size:.8rem;font-weight:600;
  color:rgba(240,240,240,.9);margin-bottom:8px;
}
#toolbar .bm-pop .bm-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
#toolbar .bm-pop .bm-seg > button{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 4px;border-radius:9px;border:1px solid transparent;background:transparent;
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;
  /* "Quadro livre" quebrava em duas linhas e desalinhava o par: o segmentado
     é uma escolha entre dois rótulos, e um deles em duas alturas parece dois
     controles diferentes. */
  white-space:nowrap;line-height:1.1;
  color:rgba(240,240,240,.55);cursor:pointer;transition:all .14s;
}
#toolbar .bm-pop .bm-seg > button svg{width:14px;height:14px;flex-shrink:0;}
#toolbar .bm-pop .bm-seg > button:hover{color:rgba(240,240,240,.85);}
#toolbar .bm-pop .bm-seg > button[aria-pressed="true"],
#toolbar .bm-pop .bm-seg > button.ativo{
  background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);color:#c7d2fe;
}
/* `#btn-vista` continua sendo quem alterna a vista; o segmentado só o
   aciona. Ele fica fora da tela, e não `display:none`, porque o guia e os
   testes precisam continuar achando um elemento de verdade. */
.bm-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── O CARTÃO DE RODAPÉ ──────────────────────────────────────────────── */
.bm-nota{
  display:grid;grid-template-columns:22px 1fr;column-gap:10px;row-gap:2px;
  margin-top:10px;padding:12px;border-radius:14px;
  background:rgba(99,102,241,.09);border:1px solid rgba(99,102,241,.16);
}
.bm-nota > svg{grid-row:1 / span 2;width:20px;height:20px;color:#a5b4fc;margin-top:1px;}
.bm-nota-tit{font-size:.8rem;font-weight:600;color:#c7d2fe;}
.bm-nota-txt{font-size:.73rem;line-height:1.4;color:rgba(240,240,240,.5);}

/* O aviso de Eventos acende no botão do menu que o guarda: um número atrás de
   uma porta fechada não avisa ninguém. */
#toolbar .bm-btn .t-notif-badge{top:-5px;right:-5px;border-color:#0d0d0d;}
html[data-theme="light"] #toolbar .bm-btn .t-notif-badge{border-color:#1a63c8;}

/* ── O LADO DIREITO ──────────────────────────────────────────────────── */
.bm-dir{display:flex;align-items:center;gap:10px;flex-shrink:0;}
#toolbar .bm-icone{
  position:relative;width:40px;height:40px;padding:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(240,240,240,.8);
}
#toolbar .bm-icone:hover{background:rgba(255,255,255,.12);color:#fff;}
#toolbar .bm-icone svg{width:19px;height:19px;}

/* ── O BOTÃO DE WORKSPACES TEM NOME ──────────────────────────────────
   A pastinha sozinha não dizia o que abria. Ela fica ao lado do menu de três
   pontos, e um ícone genérico nessa vizinhança lê como "arquivos" — não como
   "os meus workspaces". O quadrado de 40px vira pílula para caber a palavra.

   O nome some abaixo de 900px: aí o espaço é do que não tem substituto, e o
   `title` continua respondendo a quem parar o ponteiro em cima. */
#toolbar .bm-icone-ws{width:auto;gap:8px;padding:0 13px;}
#toolbar .bm-icone-rot{
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:-.1px;white-space:nowrap;
}
@media (max-width:900px){
  #toolbar .bm-icone-ws{width:40px;gap:0;padding:0;}
  #toolbar .bm-icone-rot{display:none;}
}

/* ── OS ATALHOS, AO LADO DO SINO ─────────────────────────────────────
   Não é um ícone puro como o sino: ele anuncia a tecla, e é a tecla que faz
   dele um atalho de verdade. Por isso ganha largura para o `Ctrl K` — quem
   nunca leu o rótulo descobre o gesto olhando. */
#toolbar .bm-atalhos{width:auto;padding:0 12px;gap:8px;}
/* Os três pontos precisam de corpo: no tamanho do texto ao redor eles somem
   ao lado do sino, que é um traço grosso. O deslocamento para cima é porque
   "•••" assenta na linha de base e fica baixo demais dentro do botão. */
#toolbar .bm-atalhos #atalhos-label{
  font-size:1.05rem;font-weight:700;letter-spacing:1px;line-height:1;
  margin-top:-4px;
}
#toolbar .bm-atalhos.aberto{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff;}
.t-atalhos-host{position:relative;display:flex;align-items:center;}
#atalhos-pop{z-index:1400;}

@media (max-width:900px){
  #toolbar .bm-atalhos{width:40px;padding:0;}
}

/* ── TELAS ESTREITAS ─────────────────────────────────────────────────── */
@media (max-width:900px){
  #toolbar .bm-btn{padding:0 12px;height:40px;font-size:.8rem;}
  #toolbar .bm-btn > span:not(.bm-btn-eco):not(.bm-btn-rot){display:none;}
  #toolbar .bm-btn-alternar .bm-btn-rot{display:block;}
  .bm-pop{width:262px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   O TEMA CLARO — mesma geometria, outra tinta
   ═══════════════════════════════════════════════════════════════════════
   A faixa já é azul (ver `theme-light.css`), então os botões continuam sendo
   vidro branco sobre ela. O que muda de verdade são os painéis: brancos,
   com o azul da marca no cabeçalho e nos ícones. */
html[data-theme="light"] #toolbar .bm-btn{
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32);
  color:rgba(255,255,255,.96);
}
html[data-theme="light"] #toolbar .bm-btn:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5);color:#fff;}
html[data-theme="light"] #toolbar .bm-btn.aberto{background:#fff;border-color:#fff;color:#12509f;}
html[data-theme="light"] #toolbar .bm-btn.aberto .bm-chev{opacity:.8;}

html[data-theme="light"] .bm-pop{
  background:#fff;border-color:#e2ebf7;box-shadow:0 26px 64px rgba(16,58,110,.22);
}
html[data-theme="light"] .bm-pop::before{border-left-color:#e2ebf7;border-top-color:#e2ebf7;}
html[data-theme="light"] .bm-cab{color:#1d6ae5;}
/* `#toolbar .t-count` do tema claro é branco — a cor certa para a faixa azul,
   e invisível dentro de um painel branco. O `#toolbar` daquele seletor pesa
   mais que qualquer classe, então o desempate aqui precisa do mesmo id. */
html[data-theme="light"] #toolbar .bm-cab .t-count{color:#7c92a8;}
/* Mesma história: `#toolbar .t-btn` pinta fundo de vidro branco, pensado para
   a faixa. Dentro do painel o item é transparente e só acende no hover. */
html[data-theme="light"] #toolbar .bm-pop .bm-item{background:transparent;border-color:transparent;}

html[data-theme="light"] #toolbar .bm-pop .bm-item:hover{background:#f3f8ff;}
html[data-theme="light"] #toolbar .bm-pop .bm-item + .bm-item{border-top-color:#edf3fa;}
html[data-theme="light"] #toolbar .bm-pop .bm-item > svg:not(.bm-seta){background:#eaf3ff;color:#2b6fe0;}
html[data-theme="light"] #toolbar .bm-pop .bm-item .bm-tit{color:#12263f;}
html[data-theme="light"] #toolbar .bm-pop .bm-item .bm-sub{color:#6b8099;}
html[data-theme="light"] #toolbar .bm-pop .bm-item .bm-seta{color:#8aa0b8;opacity:.7;}
html[data-theme="light"] #toolbar .bm-pop .bm-item .t-kbd{background:#eef4fb;color:#4a6b86;}
html[data-theme="light"] #toolbar .bm-pop .bm-item .t-notif-badge{border-color:#fff;}
html[data-theme="light"] #toolbar .bm-pop .bm-item-ok > svg{background:#e6f7f0;color:#0f9d6e;}
html[data-theme="light"] #toolbar .bm-pop .bm-item-perfil .bm-avatar{background:#e4eeff;color:#1d5fd0;}
html[data-theme="light"] #toolbar .bm-pop #t-pill-ws .t-dot{box-shadow:0 0 0 2px #fff;}

html[data-theme="light"] .bm-grupo-rot{color:#12263f;}
html[data-theme="light"] #toolbar .bm-pop .bm-seg{background:#f4f8fd;border-color:#dbe7f7;}
html[data-theme="light"] #toolbar .bm-pop .bm-seg > button{color:#5c7a97;}
html[data-theme="light"] #toolbar .bm-pop .bm-seg > button:hover{color:#28486a;}
html[data-theme="light"] #toolbar .bm-pop .bm-seg > button[aria-pressed="true"],
html[data-theme="light"] #toolbar .bm-pop .bm-seg > button.ativo{
  background:#fff;border-color:#cfe0f7;color:#1d5fd0;box-shadow:0 2px 6px rgba(20,70,140,.1);
}

html[data-theme="light"] .bm-nota{background:#f2f7ff;border-color:#e0ecfc;}
html[data-theme="light"] .bm-nota > svg{color:#2b6fe0;}
html[data-theme="light"] .bm-nota-tit{color:#1d6ae5;}
html[data-theme="light"] .bm-nota-txt{color:#5b7590;}

html[data-theme="light"] #toolbar .bm-icone{
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32);color:#fff;
}
html[data-theme="light"] #toolbar .bm-icone:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.5);}
html[data-theme="light"] #toolbar .bm-atalhos.aberto{background:#fff;border-color:#fff;color:#12509f;}

/* O cabeçalho da gaveta: o nome que o botão "•••" não diz mais, e a tecla. */
.atalhos-cab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:2px 4px 10px;font-size:.66rem;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:#8ea2ff;
}
.atalhos-cab .t-kbd{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.4px;text-transform:none;padding:3px 6px;border-radius:6px;
  background:rgba(255,255,255,.07);color:rgba(240,240,240,.55);
}
html[data-theme="light"] .atalhos-cab{color:#1d6ae5;}
html[data-theme="light"] .atalhos-cab .t-kbd{background:#eef4fb;color:#4a6b86;}

/* ═══════════════════════════════════════════════════════════════════════
   O CARTÃO DO PLANO, na gaveta dos três pontos
   ═══════════════════════════════════════════════════════════════════════
   Ele é a única linha da gaveta que NÃO é um atalho, e por isso é a única
   desenhada como cartão: fundo próprio, duas linhas de texto e um selo
   colorido à esquerda. O `order:-1` o põe junto do idioma, acima do título
   "Atalhos" — estado em cima, ação embaixo.

   A cor do selo é o degrau: âmbar para Premium, roxo para Empresarial,
   verde para o assento de colaborador, índigo para o teste e o azul da casa
   para o gratuito. É a mesma escada de cor do selo antigo da barra, para
   que quem já reconhecia a etiqueta reconheça o cartão. */
#toolbar .atalhos-pop .plano-cartao{
  order:-1;
  height:auto;min-height:52px;padding:9px 11px;gap:10px;
  align-items:center;text-align:left;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
}
#toolbar .atalhos-pop .plano-cartao:hover{background:rgba(255,255,255,.085);}
.atalhos-pop .sep-plano{order:-1;}

/* TODA regra de fundo aqui carrega `#toolbar`, e não é estilo: o tema claro
   pinta os botões da faixa com `html[data-theme="light"] #toolbar .t-btn`, que
   tem um id e pesa mais do que qualquer seletor só de classe. Sem o mesmo id
   deste lado, o cartão saía transparente no claro — desenhado, no lugar
   certo, e sem fundo nenhum.

   O selo não é um `svg`, então a regra que dá fundo aos ícones da gaveta não
   o alcança — ele traz o próprio. */
#toolbar .plano-selo{
  width:30px;height:30px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.92rem;line-height:1;
  background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.3);
}
.plano-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.plano-tit{
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
  color:rgba(240,240,240,.92);line-height:1.25;
}
.plano-sub{
  font-size:.7rem;line-height:1.35;color:rgba(240,240,240,.45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* A seta é indicação, não ícone de ação: sem o chip de fundo dos outros. */
.atalhos-pop .plano-cartao .plano-seta{
  width:15px;height:15px;flex-shrink:0;padding:0;border-radius:0;
  background:none;color:rgba(240,240,240,.3);
}
.atalhos-pop .plano-cartao:hover .plano-seta{color:rgba(240,240,240,.6);transform:translateX(2px);}

#toolbar .plano-cartao.e-premium .plano-selo{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.4);}
#toolbar .plano-cartao.e-ent     .plano-selo{background:rgba(168,85,247,.18);border-color:rgba(168,85,247,.42);}
#toolbar .plano-cartao.e-colab   .plano-selo{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.42);}
#toolbar .plano-cartao.e-teste   .plano-selo{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.42);}
/* Limite estourado é o único estado em que o cartão vira aviso: a conta parou
   de aceitar nota nova, e isso não pode ficar do tamanho de um subtítulo. */
#toolbar .plano-cartao.e-travado{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.28);}
#toolbar .plano-cartao.e-travado .plano-selo{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.42);}
.plano-cartao.e-travado .plano-sub{color:#fca5a5;}

html[data-theme="light"] #toolbar .atalhos-pop .plano-cartao{background:#f4f9ff;border-color:#dbe7f7;}
html[data-theme="light"] #toolbar .atalhos-pop .plano-cartao:hover{background:#e9f2fe;border-color:#cfe0f7;}
html[data-theme="light"] .plano-tit{color:#12263f;}
html[data-theme="light"] .plano-sub{color:#63798f;}
html[data-theme="light"] #toolbar .plano-selo{background:#e4efff;border-color:#c3dbf7;}
html[data-theme="light"] .atalhos-pop .plano-cartao .plano-seta{color:#93a8bc;}
html[data-theme="light"] .atalhos-pop .plano-cartao:hover .plano-seta{color:#3f6079;}
html[data-theme="light"] #toolbar .plano-cartao.e-premium .plano-selo{background:#fff5e0;border-color:#f0d093;}
html[data-theme="light"] #toolbar .plano-cartao.e-ent     .plano-selo{background:#f6eeff;border-color:#ddc4f8;}
html[data-theme="light"] #toolbar .plano-cartao.e-colab   .plano-selo{background:#e4f7ef;border-color:#b6e6d3;}
html[data-theme="light"] #toolbar .plano-cartao.e-teste   .plano-selo{background:#efeaff;border-color:#cfc2f7;}
html[data-theme="light"] #toolbar .plano-cartao.e-travado{background:#fdeced;border-color:#f3c2c8;}
html[data-theme="light"] #toolbar .plano-cartao.e-travado .plano-selo{background:#fbdde0;border-color:#eeaeb7;}
html[data-theme="light"] .plano-cartao.e-travado .plano-sub{color:#c2334a;}