/* ==========================================================================
   Marca Stratesys 2026 -- a fonte unica de cor, tipo e forma do Sentinel.

   A Stratesys trocou a identidade em 29/09/2026. Os valores vem do manual
   ("Nuestros colores") e do CSS do site oficial (stratesys-ts.com), que
   expoe os mesmos tokens em :root. Decisoes do usuario no mesmo dia:
   topo ESCURO com logo branco, barra lateral CLARA, botao principal AZUL.

   Regra daqui em diante: cor nova entra como token aqui, nunca como
   literal espalhado -- a marca anterior tinha ~2.250 cores escritas a mao.

   Carregado logo DEPOIS de style.css em base.html, login.html e
   base_portal.html: as variaveis antigas (--primary-color, --ft-*...) sao
   redirecionadas para os tokens, e as pecas globais (topo, lateral, botoes,
   campos, tipografia) sao redesenhadas aqui.
   ========================================================================== */

/* DM Sans hospedada no proprio Sentinel -- arquivos da pasta oficial de
   branding (Tipografias Corporativa), sem depender do Google Fonts. */
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* -- Paleta do manual ------------------------------------------------- */
  --marca-preto: #1B1B20;        /* topo, rodape, contraste maximo */
  --marca-grafite: #25252D;      /* texto principal, superficie escura */
  --marca-grafite-2: #2E2E37;
  --marca-grafite-3: #34343E;
  --marca-branco: #FFFFFF;
  --marca-superficie: #F0F0F2;   /* faixas claras, lateral, campos */
  --marca-fio: #E0E0E6;          /* bordas e fios */
  --marca-fio-forte: #C3C3CC;
  --marca-cinza: #9898A4;        /* texto fraco, icones inativos */
  --marca-cinza-escuro: #686868; /* texto secundario */
  --marca-azul: #007AFF;         /* acento: acao principal, link, destaque */
  --marca-azul-escuro: #0062CC;  /* hover/pressionado do azul */
  --marca-azul-claro: #E6F1FF;   /* fundo de selecionado/foco */
  --marca-azul-medio: #99CAFF;   /* barras "a faturar", planejado */

  /* -- Estados (nao estao no manual; mantidos por significado) ----------- */
  --marca-ok: #1E8E4E;
  --marca-ok-claro: #E7F5EC;
  --marca-erro: #D32F2F;
  --marca-erro-claro: #FDECEC;
  --marca-alerta: #D97706;
  --marca-alerta-claro: #FFF4E0;

  /* -- Tipo e forma ---------------------------------------------------- */
  --marca-fonte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marca-raio: 4px;             /* botoes, campos */
  --marca-raio-card: 8px;        /* caixas, cartoes, modais */
  --topo-altura: 56px;           /* topo fino (era 70px) -- 29/09/2026 */

  /* -- Variaveis antigas redirecionadas ---------------------------------- */
  --primary-color: var(--marca-azul);
  --primary-hover: var(--marca-azul-escuro);
  --border-color: var(--marca-fio);
  --text-color: var(--marca-grafite);
  --text-muted: var(--marca-cinza-escuro);
  --surface-color: var(--marca-branco);
  --radius-md: var(--marca-raio-card);
  --shadow-sm: none;
  --shadow-md: 0 1px 2px rgba(27, 27, 32, 0.06);
  --shadow-lg: 0 8px 24px rgba(27, 27, 32, 0.10);
  --brand-blue: var(--marca-grafite);
  --foco-cor: var(--marca-azul);
  --feriado-cor: #6B4FD8;
}

/* -- Tipografia ------------------------------------------------------------ */
body,
.main-content {
  font-family: var(--marca-fonte);
  color: var(--marca-grafite);
  background-color: var(--marca-branco);
}
h1, h2, h3, h4, h5, h6,
.ft-titulo, .pf-titulo, .page-title {
  font-family: var(--marca-fonte) !important;
  color: var(--marca-grafite);
  font-weight: 500;
  letter-spacing: -0.01em;
}
a { color: var(--marca-azul); }
a:hover { color: var(--marca-azul-escuro); }

/* -- Topo escuro -----------------------------------------------------------
   Estados de mouse redesenhados em 29/09/2026. O topo herdava do tema claro:
   `.nav-item:hover` (regra da lateral, generica demais) pintava uma caixa
   quase branca atras do FAQ, do atualizar, do "+" e do avatar -- com o texto
   branco, o item sumia --, mais o sublinhado azul e o "pulinho" de 1px. No
   escuro, o hover e so um fundo 8% mais claro, sem movimento. */
.navbar,
.navbar.bg-white {
  background-color: var(--marca-preto) !important;
  box-shadow: none;
  border-bottom: 1px solid var(--marca-preto);
}
/* Logo oficial 2026 (pasta de branding): static/img/stratesys-logo-2026.svg
   (branco, para o topo escuro) e -escuro.svg (preto, para fundo claro). */
.navbar-brand img { display: block; }
.navbar .nav-item:hover { background: transparent; }
.navbar .nav-link,
.navbar-utility .utility-action .nav-link,
.navbar-utility .utility-label,
.navbar-utility .utility-action .nav-link i { color: var(--marca-superficie) !important; }
.navbar .nav-link { transition: background-color .15s ease, color .15s ease; }
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-utility .utility-action .nav-link:hover { color: var(--marca-branco) !important; transform: none; }
.navbar .nav-link::after,
.navbar .nav-link.dropdown-toggle::after { display: none !important; }
.navbar-utility .utility-action .nav-link {
  height: 36px; padding: 0 10px !important; border-radius: var(--marca-raio);
  display: inline-flex !important; align-items: center; gap: 6px;
}
.navbar-utility .utility-action .nav-link:hover,
.navbar-utility .utility-action .nav-link:focus-visible { background: rgba(255, 255, 255, .08); }
.navbar-utility .utility-action .nav-link:hover i { color: var(--marca-branco) !important; }
.navbar-utility .utility-divider { background: var(--marca-grafite-3) !important; border-color: var(--marca-grafite-3) !important; }

/* Busca: campo e lupa sao uma peca so; o foco acende as duas juntas. */
.navbar .input-group { border-radius: var(--marca-raio); transition: background-color .15s ease, box-shadow .15s ease; }
.navbar .navbar-search-input,
.navbar .navbar-search-btn {
  background-color: var(--marca-grafite-2) !important;
  color: var(--marca-superficie) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.navbar .navbar-search-btn { border-radius: var(--marca-raio) 0 0 var(--marca-raio) !important; }
.navbar .navbar-search-input { border-radius: 0 var(--marca-raio) var(--marca-raio) 0 !important; }
.navbar .input-group:hover .navbar-search-input,
.navbar .input-group:hover .navbar-search-btn { background-color: var(--marca-grafite-3) !important; }
.navbar .input-group:focus-within { box-shadow: 0 0 0 1px var(--marca-azul), 0 0 0 4px rgba(0, 122, 255, .25); }
.navbar .input-group:focus-within .navbar-search-input,
.navbar .input-group:focus-within .navbar-search-btn { background-color: var(--marca-grafite-3) !important; }
.navbar .navbar-search-input::placeholder { color: var(--marca-cinza); }
.navbar .navbar-search-btn i { color: var(--marca-cinza) !important; }
.navbar .input-group:focus-within .navbar-search-btn i { color: var(--marca-superficie) !important; }

/* "+" (novo item): azul da marca, quadrado de canto 4px como os botoes; ao
   abrir, o "+" gira e vira "x". */
.navbar .quick-add-btn {
  width: 36px; height: 36px; border-radius: var(--marca-raio) !important;
  background: var(--marca-azul) !important; border: 0 !important; color: var(--marca-branco) !important;
  box-shadow: none !important; transform: none !important; transition: background-color .15s ease;
}
.navbar .quick-add-btn:hover,
.navbar .quick-add-btn[aria-expanded="true"] { background: var(--marca-azul-escuro) !important; }
.navbar .quick-add-icon { display: inline-block; font-weight: 400 !important; transition: transform .2s ease; }
.navbar .quick-add-btn[aria-expanded="true"] .quick-add-icon { transform: rotate(45deg); }

/* Avatar: sem a setinha; no mouse, um anel claro. O ponto de status recorta
   na cor do topo, nao em branco. */
.navbar #userDropdown { border-radius: 50%; }
.navbar .avatar-circle { box-shadow: none !important; transition: box-shadow .15s ease; }
.navbar #userDropdown:hover .avatar-circle,
.navbar #userDropdown[aria-expanded="true"] .avatar-circle { box-shadow: 0 0 0 3px rgba(255, 255, 255, .22) !important; }
.navbar .avatar-status-dot { border-color: var(--marca-preto); }

/* Menus do topo: fio fino, canto 8px, sombra unica; item com fundo cinza
   claro no mouse. */
.navbar .dropdown-menu {
  border: 1px solid var(--marca-fio) !important; border-radius: var(--marca-raio-card) !important;
  box-shadow: 0 12px 32px rgba(27, 27, 32, .14) !important; padding: 6px !important;
  font-family: var(--marca-fonte);
}
.navbar .dropdown-item { border-radius: var(--marca-raio); color: var(--marca-grafite); font-size: .92rem; }
.navbar .dropdown-item i { color: var(--marca-cinza-escuro) !important; width: 18px; text-align: center; }
.navbar .dropdown-item i.text-primary { color: var(--marca-azul) !important; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus { background: var(--marca-superficie); color: var(--marca-preto); }
.navbar .dropdown-item:active { background: var(--marca-azul-claro); color: var(--marca-preto); }
.navbar .dropdown-item.text-danger,
.navbar .dropdown-item.text-danger i { color: var(--marca-erro) !important; }
.navbar .dropdown-header { color: var(--marca-cinza-escuro); letter-spacing: .04em; }
.navbar .dropdown-divider { border-color: var(--marca-fio); }
.navbar .navbar-toggler { filter: invert(1); }

/* -- Topo fino e alinhado (29/09/2026) --------------------------------------
   56px em vez de 70px. Tudo que dependia da altura le --topo-altura. A
   direita, um ritmo so: pecas de 36px, 4px entre elas, divisorias com 8px de
   cada lado -- antes eram me-1, me-2, me-4 e margens de divisoria diferentes.
   O recuo do corpo, a lateral e o conteudo leem --topo-altura em style.css,
   que so o layout interno carrega: aqui, o recuo pegava tambem o login e o
   portal do cliente (que carregam marca.css) e abria uma tarja branca. */
.navbar { height: var(--topo-altura); padding: 0 !important; }
.navbar > .container-fluid { height: 100%; padding: 0 20px 0 35px; }
.navbar-brand { padding: 0; margin: 0; }
.navbar form[role="search"] { margin-right: 20px !important; }
.navbar .navbar-search-input,
.navbar .navbar-search-btn { height: 36px; }
.navbar .navbar-search-btn { display: inline-flex; align-items: center; padding: 0 4px 0 12px !important; }
.navbar .navbar-search-btn .icone { width: 18px; height: 18px; color: var(--marca-cinza); }
.navbar .input-group:focus-within .navbar-search-btn .icone { color: var(--marca-superficie); }
/* Busca no centro do topo (26/10/2026, pedido dele). Só com o menu aberto (lg); no celular continua dentro do menu
   recolhido. O centro é o da barra inteira, não o do conteúdo; os ícones da direita ficam onde estavam (margin-left
   auto, que antes vinha do ms-auto da busca). */
@media (min-width: 992px) {
  .navbar > .container-fluid { position: relative; }
  .navbar form[role="search"] {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: clamp(280px, 32vw, 480px); margin: 0 !important;
  }
  .navbar form[role="search"] .navbar-search-input { min-width: 0; }
  .navbar .navbar-collapse .navbar-utility { margin-left: auto; }
}
/* Os itens do topo tambem tem a classe .nav-item, e a regra da lateral
   (padding 0.8rem 1.2rem) dava 19px de cada lado a cada um -- os espacos
   saiam 28 e 38px. `gap-0` do Bootstrap e !important, dai o !important. */
.navbar .navbar-utility { gap: 4px !important; }
.navbar .navbar-utility > li:not(.utility-divider) { margin: 0 !important; padding: 0 !important; border-radius: 0; }
.navbar-utility .utility-divider { height: 20px; margin: 0 8px !important; }
.navbar-utility .utility-action .nav-link { min-width: 36px; justify-content: center; }
.navbar #navRefresh { width: 36px; padding: 0 !important; }
.navbar-utility .utility-action .icone { width: 20px; height: 20px; color: var(--marca-superficie); }
.navbar-utility .utility-action .nav-link:hover .icone { color: var(--marca-branco); }
.navbar .quick-add-icon { display: inline-flex; }
.navbar .quick-add-icon .icone { width: 18px; height: 18px; }
.navbar #userDropdown { width: 36px; height: 36px; justify-content: center; }
.navbar .dropdown-item > .icone { width: 18px; height: 18px; color: var(--marca-cinza-escuro); margin-right: 10px; vertical-align: -4px; }
.navbar .dropdown-item.d-flex > .icone { margin-right: 0; }
.navbar .dropdown-item.text-danger > .icone { color: var(--marca-erro); }

/* -- Icones da marca (Phosphor Light, {% icone %}) ------------------------- */
.icone { display: inline-block; flex: 0 0 auto; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }

/* -- Barra lateral clara --------------------------------------------------- */
.sidebar {
  background: var(--marca-superficie);
  border-right: 1px solid var(--marca-fio);
  box-shadow: none;
}
.sidebar .nav-item {
  color: var(--marca-grafite);
  border-radius: var(--marca-raio);
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}
/* Icones monocromaticos: a marca e preta e branca, com o azul so no ativo
   (antes eram 12 cores, uma por item). */
.sidebar .nav-item i,
.sidebar .nav-item i[class*="icon-"] { color: var(--marca-cinza-escuro) !important; }
.sidebar .nav-item:hover {
  background-color: var(--marca-fio);
  color: var(--marca-preto);
}
.sidebar .nav-item.active {
  background-color: var(--marca-branco);
  color: var(--marca-preto) !important;
  font-weight: 500;
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--marca-azul);
}
.sidebar .nav-item.active i { color: var(--marca-azul) !important; transform: none; filter: none; }
.sidebar .nav-item .icone { width: 22px; height: 22px; color: var(--marca-cinza-escuro); transition: color .15s ease; }
.sidebar .nav-item:hover .icone { color: var(--marca-preto); }
.sidebar .nav-item.active .icone { color: var(--marca-azul); }
.sidebar.collapsed .nav-item .icone,
html.sidebar-collapsed .sidebar .nav-item .icone { width: 24px; height: 24px; }
.btn-toggle .icone { width: 16px; height: 16px; transition: transform .3s ease; }
html.sidebar-collapsed .btn-toggle .icone,
body.sidebar-collapsed .btn-toggle .icone { transform: rotate(180deg); }

/* -- Telas baixas (notebook), 13/10/2026 ------------------------------------
   Pedido do usuário: "em telas menores, como a do notebook, reduzir os elementos para evitar
   scroll desnecessário -- a barra de menus caber toda na tela". Medido: com 15 itens (Faturamento,
   Despesas e Operações entraram depois do ajuste de 19/08) o menu pedia 897px numa barra de 644px
   (1536x700, Windows em 125%) e passava ~80px num 1920x1080 a 100%. Os itens encolhem com a ALTURA
   da janela (o menu original pede ~982px: 1080p no Chrome deixa ~950); acima de 1000px nada muda.
   Mesma especificidade das regras acima, por isso aqui. */
@media (max-height: 1000px) {
  .sidebar { padding-top: 0.5rem; }
  .sidebar .sidebar-nav { margin-top: 0 !important; }
  .sidebar .nav-item,
  .sidebar.collapsed .nav-item,
  html.sidebar-collapsed .sidebar .nav-item { padding-top: 0.5rem; padding-bottom: 0.5rem; margin-top: 0.1rem; margin-bottom: 0.1rem; }
  .sidebar .nav-item { font-size: 0.9rem; }
  .sidebar .nav-item .icone { width: 20px; height: 20px; }
  .sidebar .sidebar-nav > .border-top { margin-top: 0.35rem !important; margin-bottom: 0.35rem !important; }
  .sidebar-footer { padding: 0.35rem 1.5rem; }
  .main-content:not(.main-content--wide) { padding: 1.25rem; }
}
@media (max-height: 760px) {
  .sidebar .nav-item,
  .sidebar.collapsed .nav-item,
  html.sidebar-collapsed .sidebar .nav-item { padding-top: 0.32rem; padding-bottom: 0.32rem; margin-top: 0.05rem; margin-bottom: 0.05rem; line-height: 1.35; }
  .sidebar .nav-item .icone { width: 18px; height: 18px; }
  .sidebar.collapsed .nav-item .icone,
  html.sidebar-collapsed .sidebar .nav-item .icone { width: 20px; height: 20px; }   /* recolhido: 24px não cabia */
}

/* -- Botoes ---------------------------------------------------------------- */
.btn { border-radius: var(--marca-raio); font-family: var(--marca-fonte); }
.btn-primary,
.ft-btn.ft-btn--pri,
.ft-btn--pri,
.sf__btn--primary {
  background-color: var(--marca-azul) !important;
  border-color: var(--marca-azul) !important;
  color: var(--marca-branco) !important;
  border-radius: var(--marca-raio) !important;
  box-shadow: none !important;
  font-weight: 500;
  transform: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.ft-btn.ft-btn--pri:hover,
.ft-btn--pri:hover,
.sf__btn--primary:hover {
  background-color: var(--marca-azul-escuro) !important;
  border-color: var(--marca-azul-escuro) !important;
}
.btn-outline,
.btn-outline-secondary,
.btn-outline-primary,
.ft-btn {
  border: 1px solid var(--marca-grafite) !important;
  color: var(--marca-grafite) !important;
  background: var(--marca-branco) !important;
  border-radius: var(--marca-raio) !important;
  box-shadow: none !important;
}
.btn-outline:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.ft-btn:hover {
  background: var(--marca-superficie) !important;
  color: var(--marca-preto) !important;
}

/* -- Campos ---------------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: var(--marca-raio);
  border-color: var(--marca-fio-forte);
  font-family: var(--marca-fonte);
  color: var(--marca-grafite);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--marca-azul);
  box-shadow: 0 0 0 3px var(--marca-azul-claro);
}
.form-check-input:checked {
  background-color: var(--marca-azul);
  border-color: var(--marca-azul);
}

/* -- Cartoes e modais ------------------------------------------------------ */
.card { border-radius: var(--marca-raio-card); border-color: var(--marca-fio); box-shadow: none; }
.modal-content { border-radius: var(--marca-raio-card); border: 0; }
.badge.bg-primary { background-color: var(--marca-azul) !important; }
/* rgba com a opacidade do Bootstrap: a cor solida anulava .bg-opacity-10 e o
   icone azul sumia dentro de um circulo azul (FAQ, 30/09/2026). */
.text-primary { color: rgba(0, 122, 255, var(--bs-text-opacity, 1)) !important; }
.bg-primary { background-color: rgba(0, 122, 255, var(--bs-bg-opacity, 1)) !important; }

/* -- Cards de indicador do Dashboard ---------------------------------------
   Eram quatro tons pastel (azul, verde, lilas, laranja). Na marca: branco,
   fio fino, numero em grafite e o icone no azul de acento. */
.stat-card,
.stat-card.bg-candy-blue,
.stat-card.bg-candy-green,
.stat-card.bg-candy-purple,
.stat-card.bg-candy-orange {
  background: var(--marca-branco) !important;
  border: 1px solid var(--marca-fio) !important;
  border-radius: var(--marca-raio-card) !important;
  box-shadow: none !important;
}
.stat-card .stat-card-icon { color: var(--marca-azul) !important; }
.stat-card:hover { border-color: var(--marca-fio-forte) !important; transform: none !important; }

/* -- Componentes antigos de acao (Folha de Ponto e outras telas) ----------
   29/09/2026. Mantem o SIGNIFICADO (verde envia/aprova, vermelho reprova ou
   exclui) e muda so a forma: canto 4px, sem sombra, sem caixa alta, sem o
   "pulinho" no mouse. */
.btn-candy-green,
.btn-candy-red {
  border-radius: var(--marca-raio) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  transform: none !important;
}
.btn-candy-green { background-color: var(--marca-ok) !important; border-color: var(--marca-ok) !important; }
.btn-candy-green:hover { background-color: #17753F !important; border-color: #17753F !important; }
.btn-candy-red { background-color: var(--marca-erro) !important; border-color: var(--marca-erro) !important; }
.btn-candy-red:hover { background-color: #B22727 !important; border-color: #B22727 !important; }
.btn-outline-danger-custom {
  border-width: 1px !important;
  border-color: var(--marca-erro) !important;
  color: var(--marca-erro) !important;
  border-radius: var(--marca-raio) !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-outline-danger-custom:hover { background-color: var(--marca-erro) !important; color: var(--marca-branco) !important; }
.btn-back {
  border-radius: var(--marca-raio);
  background: var(--marca-branco);
  border-color: var(--marca-fio-forte);
  color: var(--marca-grafite);
  box-shadow: none;
}
.btn-back:hover { background: var(--marca-superficie); border-color: var(--marca-fio-forte); color: var(--marca-preto); }

/* Titulo de cartao: era azul, caixa alta e espacado ("CRIAR NOVA FOLHA");
   na marca, titulo e preto e em caixa normal. */
.card-header h3 {
  color: var(--marca-preto);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-size: 1.2rem;
}

/* Etiquetas do Bootstrap: canto 4px e as cores de estado da marca. */
.badge,
.badge.rounded-pill { border-radius: var(--marca-raio) !important; }
.badge.bg-success { background-color: var(--marca-ok) !important; }
.badge.bg-danger { background-color: var(--marca-erro) !important; }
.badge.bg-warning { background-color: var(--marca-alerta) !important; color: var(--marca-branco) !important; }
.badge.bg-info { background-color: var(--marca-azul) !important; }
.badge.bg-secondary { background-color: var(--marca-cinza-escuro) !important; }

/* "Aguardando aprovacao": era amarelo-ouro com texto branco (pouco legivel). */
.status-pill-submitted {
  background: var(--marca-alerta-claro) !important;
  color: var(--marca-alerta) !important;
  border-radius: var(--marca-raio) !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  padding: 4px 10px !important;
}

/* Lista de selecao com a classe .form-control (formularios do Django que
   aplicam form-control a todo campo): o Bootstrap desenha como campo de
   texto, sem a setinha -- parecia que nao dava para escolher (29/09/2026).
   Mesma seta do .form-select; lista multipla e com size ficam de fora. */
select.form-control:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2325252D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}

/* Avisos (06/10/2026): o sino do topo. */
.avisos-n{position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--marca-azul);color:#fff;font-size:0.64rem;font-weight:700;line-height:17px;text-align:center;}
.avisos-menu{width:360px;max-width:calc(100vw - 32px);padding:0;border-radius:var(--marca-raio-card);overflow:hidden;}
.avisos-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--marca-fio);font-size:0.84rem;}
.avisos-item{display:block;white-space:normal;overflow-wrap:anywhere;padding:10px 14px;border-bottom:1px solid var(--marca-fio);color:var(--marca-preto);text-decoration:none;font-size:0.82rem;line-height:1.35;}
.avisos-item:hover{background:var(--marca-superficie);}
.avisos-item small{display:block;color:var(--marca-cinza);font-size:0.7rem;margin-top:3px;}
.avisos-vazio{padding:18px 14px;color:var(--marca-cinza);font-size:0.82rem;text-align:center;}
.avisos-todos{display:block;padding:9px 14px;text-align:center;font-size:0.8rem;text-decoration:none;}

/* Pendências no item do menu lateral (06/10/2026). */
.nav-pendencias{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--marca-azul);color:#fff;font-size:0.7rem;font-weight:700;line-height:20px;text-align:center;}
/* Menu recolhido: o item centraliza o icone, e o margin-left:auto empurrava o icone
   para o lado. O selo vira um ponto no canto do icone, fora do fluxo. */
.sidebar.collapsed .nav-pendencias,
html.sidebar-collapsed .sidebar .nav-pendencias{position:absolute;top:4px;left:calc(50% + 4px);margin:0;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--marca-branco);border-radius:9px;font-size:0.6rem;line-height:14px;}