/* ====================================================
   SigX Brand Override v2.0  |  sigx-brand.css
   Paleta Signal Orange — suporte a tema claro e escuro
   ==================================================== */

/* ---- Transição entre páginas (View Transitions cross-document) ----
   Faz a troca de página fazer cross-fade em vez do flash branco. Combina com a
   pré-renderização declarada em Application.cshtml: a página seguinte já está pronta,
   então a transição é o único tempo que o usuário percebe.
   Só Chromium implementa hoje; nos demais navegadores a regra é ignorada e a navegação
   continua exatamente como antes. Respeita prefers-reduced-motion. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
}

/* ---- Indicador de navegação (libs/sigx-navegacao.js) ----
   Barra fina no topo enquanto a próxima página não chega. Só acende depois de
   ~140 ms, então navegação pré-renderizada nunca a mostra. */
.sigx-nav-progresso {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  z-index: 2000;               /* acima do navbar sticky, abaixo do modal Bootstrap (1055+ é o backdrop) */
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--sigx-orange), var(--sigx-orange-lt));
}

.sigx-nav-progresso.is-ativa {
  opacity: 1;
  /* Progresso indeterminado: avança rápido até ~80% e desacelera, porque o
     tempo real é desconhecido. A página nova substitui a barra ao pintar. */
  animation: sigx-nav-progresso 2.4s cubic-bezier(.15, .85, .3, 1) forwards;
}

@keyframes sigx-nav-progresso {
  0%   { transform: scaleX(0); }
  40%  { transform: scaleX(.55); }
  75%  { transform: scaleX(.8); }
  100% { transform: scaleX(.94); }
}

@media (prefers-reduced-motion: reduce) {
  .sigx-nav-progresso.is-ativa {
    animation: none;
    transform: scaleX(1);      /* barra estática: presença sem movimento */
  }
}

/* ---- Tokens da marca ---- */
:root {
  --sigx-orange:      #FF5100;
  --sigx-orange-lt:   #FF9050;
  --sigx-orange-dk:   #8B1A00;
  --sigx-orange-dkk:  #3D0800;
  --sigx-orange-rgb:  255, 81, 0;
}

/* Laranja de AÇÃO e de TEXTO pequeno. Branco sobre #FF5100 dá 3,27:1 e laranja #FF5100
   sobre branco também — abaixo do 4,5:1 que o WCAG AA pede para texto normal. #CC4100 dá
   4,86:1 com branco. O #FF5100 segue nos destaques grandes (ícones, barras, bordas).
   No escuro o texto laranja precisa clarear (fundo escuro), o fundo do botão não muda. */
:root,
[data-bs-theme="light"] {
  --sigx-acao:        #CC4100;
  --sigx-acao-hover:  #B83900;
  --sigx-acao-ativo:  #A33200;
  --sigx-acao-texto:  #CC4100;
}
[data-bs-theme="dark"] {
  --sigx-acao-texto:  #FF9050;
}

/* ---- Tipografia ---- */
:root {
  --tblr-font-sans-serif: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tblr-font-monospace:  'Space Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  --bs-font-sans-serif:   'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-font-monospace:    'Space Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

body {
  font-family: var(--tblr-font-sans-serif);
}

code, kbd, samp, pre {
  font-family: var(--tblr-font-monospace);
}

/* Labels técnicos — .subheader vira o "label técnico" do Design System
   (Space Mono, uppercase, tracking). Já é uppercase/spaced no Tabler;
   aqui só trocamos a fonte para mono. */
.subheader {
  font-family: var(--tblr-font-monospace);
  letter-spacing: .06em;
}

/* ---- Cor primária — ambos os temas ---- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tblr-primary:           #FF5100;
  --tblr-primary-rgb:       255, 81, 0;
  --tblr-primary-lt:        rgba(255, 81, 0, 0.1);
  --tblr-primary-darken:    #CC4100;
  --tblr-primary-fg:        #ffffff;

  --bs-primary:             #FF5100;
  --bs-primary-rgb:         255, 81, 0;
}

/* ---- Links — tema claro ---- */
:root,
[data-bs-theme="light"] {
  --bs-link-color:           #CC4100;
  --bs-link-color-rgb:       204, 65, 0;
  --bs-link-hover-color:     #A33200;
  --bs-link-hover-color-rgb: 163, 50, 0;

  /* Tabler define code-color via light-dark(), que segue o color-scheme
     do SO — não o toggle data-bs-theme do SigX. Fixamos por tema. */
  --tblr-code-color:         var(--tblr-gray-600);
}

/* ---- Links — tema escuro (mais claros para contraste) ---- */
[data-bs-theme="dark"] {
  --bs-link-color:           #FF9050;
  --bs-link-color-rgb:       255, 144, 80;
  --bs-link-hover-color:     #FFB070;
  --bs-link-hover-color-rgb: 255, 176, 112;
  --tblr-primary-lt:         rgba(255, 81, 0, 0.15);
  --tblr-code-color:         var(--tblr-gray-400);
}

/* ====================================================
   Raios — escala do Design System
   sm 6 · md 8 (base) · lg 12 · xl 16 · cards 16
   ==================================================== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tblr-border-radius-sm:   6px;
  --tblr-border-radius-md:   8px;
  --tblr-border-radius:      8px;
  --tblr-border-radius-lg:   12px;
  --tblr-border-radius-xl:   16px;
  --tblr-card-border-radius: 16px;
}

/* ====================================================
   Componentes
   ==================================================== */

.btn-group-sm > .btn, .btn-sm { --tblr-btn-line-height: 1rem; }
.btn-group-xl > .btn, .btn-xl { --tblr-btn-line-height: 3rem; }

/* ---- Botões primários ---- */
.btn-primary,
.btn-azure {
  background-color: var(--sigx-acao) !important;
  border-color:     var(--sigx-acao) !important;
  color:            #fff    !important;
}
.btn-primary:hover,
.btn-azure:hover {
  background-color: var(--sigx-acao-hover) !important;
  border-color:     var(--sigx-acao-hover) !important;
}
.btn-primary:active,
.btn-primary.active,
.btn-azure:active {
  background-color: var(--sigx-acao-ativo) !important;
  border-color:     var(--sigx-acao-ativo) !important;
}
.btn-primary:focus-visible,
.btn-azure:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(255, 81, 0, .35) !important;
}
.btn-primary:disabled,
.btn-azure:disabled {
  background-color: var(--sigx-acao) !important;
  border-color:     var(--sigx-acao) !important;
  opacity: .6;
}

/* ---- Botões outline primary ----
   O texto do estado SELECIONADO (btn-check:checked, ex.: "Sugerir melhoria")
   ficava laranja sobre fundo laranja porque o `color:#FF5100 !important` da
   regra base vencia o estado :checked. Correção em duas frentes:
   1) Definimos as variáveis de cor do Bootstrap/Tabler para cada estado, então
      TODOS os estados (normal, hover, foco, selecionado, ativo, dropdown) ficam
      corretos pela própria mecânica do framework — inclusive os seletores
      agrupados que regras manuais não cobririam.
   2) Reforçamos o estado preenchido com regra explícita (!important). */
.btn-outline-primary,
.btn-outline-azure {
  --bs-btn-color: var(--sigx-acao-texto);
  --bs-btn-border-color: var(--sigx-acao-texto);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sigx-acao);
  --bs-btn-hover-border-color: var(--sigx-acao);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sigx-acao);
  --bs-btn-active-border-color: var(--sigx-acao);
  --bs-btn-disabled-color: var(--sigx-acao-texto);
  --bs-btn-disabled-border-color: var(--sigx-acao-texto);
  --tblr-btn-color: var(--sigx-acao-texto);
  --tblr-btn-border-color: var(--sigx-acao-texto);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--sigx-acao);
  --tblr-btn-hover-border-color: var(--sigx-acao);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--sigx-acao);
  --tblr-btn-active-border-color: var(--sigx-acao);
  color:        var(--sigx-acao-texto) !important; /* normal: texto laranja sobre fundo transparente */
  border-color: var(--sigx-acao-texto) !important;
}
/* Estado preenchido — texto SEMPRE branco sobre laranja. Cobre hover,
   selecionado (btn-check:checked), pressionado/ativo e dropdown aberto.
   Mais específico que a regra base acima, então vence o texto laranja. */
.btn-outline-primary:hover,
.btn-outline-azure:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-azure:active,
.btn-outline-azure.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-azure,
.btn-check:active + .btn-outline-azure,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-azure.dropdown-toggle {
  background-color: var(--sigx-acao) !important;
  border-color:     var(--sigx-acao) !important;
  color:            #fff    !important;
}
/* Anel de foco (acessibilidade) — sem alterar o preenchimento. */
.btn-outline-primary:focus-visible,
.btn-outline-azure:focus-visible,
.btn-check:focus-visible + .btn-outline-primary,
.btn-check:focus-visible + .btn-outline-azure {
  box-shadow: 0 0 0 .25rem rgba(255, 81, 0, .35) !important;
}

/* ---- Inputs com foco ---- */
.form-control:focus,
.form-select:focus {
  border-color: rgba(255, 81, 0, .55) !important;
  box-shadow:   0 0 0 .25rem rgba(255, 81, 0, .15) !important;
}

/* TomSelect foco */
.ts-wrapper.focus .ts-control {
  border-color: rgba(255, 81, 0, .55) !important;
  box-shadow:   0 0 0 .25rem rgba(255, 81, 0, .15) !important;
}

/* ---- Checkboxes / radios / switches ---- */
.form-check-input:checked {
  background-color: #FF5100;
  border-color:     #FF5100;
}
.form-check-input:focus {
  border-color: rgba(255, 81, 0, .55);
  box-shadow:   0 0 0 .25rem rgba(255, 81, 0, .15);
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #FF5100;
  border-color:     #FF5100;
}

/* ---- Range ---- */
.form-range::-webkit-slider-thumb  { background: #FF5100; }
.form-range::-moz-range-thumb      { background: #FF5100; }

/* ---- Progress bars ---- */
.progress-bar { background-color: #FF5100; }

/* ---- Badges ---- */
.badge.bg-primary,
.badge.bg-azure {
  background-color: #FF5100 !important;
}

/* ---- Texto utilitário ---- */
.text-primary,
.text-azure {
  color: #FF5100 !important;
}

/* ---- Background utilitário ---- */
.bg-primary,
.bg-azure {
  background-color: #FF5100 !important;
}

/* ---- Border ---- */
.border-primary,
.border-azure {
  border-color: #FF5100 !important;
}

/* ---- Nav pills / tabs ---- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #FF5100 !important;
  color:            #fff    !important;
}
.nav-tabs .nav-link.active {
  color: #FF5100 !important;
}
.navbar-nav .nav-link.active {
  color: #FF5100 !important;
}

/* ---- Dropdown item ativo ---- */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #FF5100 !important;
  color:            #fff    !important;
}

/* ---- Paginação ---- */
.page-item.active .page-link {
  background-color: #FF5100 !important;
  border-color:     #FF5100 !important;
}
.page-link {
  color: #FF5100;
}
.page-link:hover {
  color: #e04800;
}

/* ---- Spinners ---- */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: #FF5100 !important;
}

/* ---- Avatares ---- */
.avatar.bg-primary,
.avatar.bg-azure,
.avatar-sm.bg-primary {
  background-color: #FF5100 !important;
}

/* ---- Cards com status ---- */
.card-status-top.bg-primary,
.card-status-start.bg-primary,
.card-status-top.bg-azure,
.card-status-start.bg-azure {
  background-color: #FF5100 !important;
}

/* ---- Steps ---- */
.step-item.active .step-circle,
.step-item.active .step-icon {
  background-color: #FF5100 !important;
  border-color:     #FF5100 !important;
  color:            #fff    !important;
}

/* ====================================================
   Navbar brand — logo e tipografia
   ==================================================== */

/* Background do ícone adapta ao tema */
.sigx-logo-bg {
  fill: #111111;
}
[data-bs-theme="light"] .sigx-logo-bg {
  fill: #f0f0f0;
}

.brand-title {
  font-family:    'DM Sans', sans-serif;
  font-size:      17px;
  font-weight:    700;
  letter-spacing: -.4px;
  line-height:    1;
}

.brand-subtitle {
  font-family:    'Space Mono', monospace;
  font-size:      9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height:    1;
  opacity:        .45;
}

/* ====================================================
   Links globais (exceto botões e nav já tratados)
   ==================================================== */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link) {
  color: var(--bs-link-color);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):hover {
  color: var(--bs-link-hover-color);
}

/* ====================================================
   Casca do portal (sigx.tabler): barra superior + menu vertical
   ----------------------------------------------------
   .page recebe o recuo do menu fixo à esquerda (264px; 68px recolhido,
   html.sx-recolhido; 0 na leitura da Base de conhecimento, html.sx-leitura).
   Abaixo de 992px o menu vira gaveta pela esquerda (body.sx-menu-aberto).
   Barra superior: logotipo da empresa fixo, busca do módulo e ações.
   Desenho: docs/layout-vertical-analise.md + docs/layout-vertical-preview.html.
   ==================================================== */
:root {
  --sx-top-h:  56px;
  --sx-sb-w:   264px;
  --sx-sb-min: 68px;
  --sx-ease:   .2s ease;
}
.page { padding-left: var(--sx-sb-w); }
html.sx-recolhido .page { padding-left: var(--sx-sb-min); }
html.sx-leitura .page { padding-left: 0; }

/* ---- Menu vertical ---- */
.sx-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sx-sb-w);
  display: flex; flex-direction: column;
  background: var(--tblr-bg-surface);
  border-right: 1px solid var(--tblr-border-color);
  z-index: 1030;
  transition: width var(--sx-ease), transform .25s ease;
}
html.sx-recolhido .sx-sidebar { width: var(--sx-sb-min); }

/* Cabeçalho com a marca SigX */
.sx-sb-brand {
  height: var(--sx-top-h); flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--tblr-border-color);
}
.sx-sb-brand > a { display: flex; align-items: center; gap: 10px; color: var(--tblr-body-color) !important; text-decoration: none !important; min-width: 0; }
.sx-sb-brand svg { flex: none; }
.sx-sb-brand .brand-title { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1; white-space: nowrap; }
.sx-sb-brand .brand-subtitle { font-family: var(--tblr-font-monospace); font-size: 8.5px; letter-spacing: 2.4px; text-transform: uppercase; line-height: 1; opacity: .75; margin-top: 4px; white-space: nowrap; }
.sx-sb-brand .sigx-topo-x { color: var(--sigx-orange); }
.sx-sb-recolher {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; border: 0; border-radius: 6px;
  background: transparent; color: var(--tblr-secondary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.sx-sb-recolher:hover { background: var(--tblr-primary-lt); color: var(--sigx-orange); }

/* Abas de módulo (Operação, Financeiro, CRM, Studio IA). Não contratado = apagado. */
.sx-modulos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--tblr-border-color);
}
.sx-modulo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 7px; border-radius: 8px;
  color: var(--tblr-secondary) !important; text-decoration: none !important;
  font-size: .66rem; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background .15s, color .15s;
}
.sx-modulo .ti { font-size: 1.25rem; }
.sx-modulo:hover { color: var(--tblr-body-color) !important; background: var(--tblr-active-bg); }
.sx-modulo.ativo, .sx-modulo.ativo:hover { color: var(--sigx-orange) !important; background: var(--tblr-primary-lt); }
.sx-modulo.nao-contratado, .sx-modulo.nao-contratado:hover { opacity: .4; font-weight: 400; cursor: not-allowed; background: none; color: var(--tblr-secondary) !important; }
.sx-modulo.nao-contratado { position: relative; }
.sx-modulo .sx-modulo-cadeado { position: absolute; top: 3px; right: 6px; font-size: .7rem; }
.sx-modulo:focus-visible { outline: 2px solid var(--sigx-orange); outline-offset: -2px; }

/* Menu do módulo: seções, itens e grupos expansíveis */
.sx-sb-menu { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 12px; scrollbar-width: thin; }
.sx-secao { font-family: var(--tblr-font-monospace); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tblr-secondary); padding: 14px 10px 6px; white-space: nowrap; overflow: hidden; }
.sx-sb-menu > .sx-secao:first-child { padding-top: 6px; }
.sx-item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px; margin: 1px 0; border-radius: 6px;
  color: var(--tblr-body-color) !important; text-decoration: none !important;
  font-size: .9rem; font-weight: 500; white-space: nowrap;
  border: 0; background: transparent; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.sx-item .ti, .sx-item > svg { font-size: 1.2rem; flex: none; width: 22px; text-align: center; color: var(--tblr-secondary); }
.sx-item .sx-rotulo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sx-item:hover { background: var(--tblr-active-bg); }
.sx-item:hover .ti { color: var(--tblr-body-color); }
.sx-item.ativo, .sx-item.ativo:hover { background: rgba(var(--sigx-orange-rgb), .12); color: var(--sigx-orange) !important; }
.sx-item.ativo .ti { color: var(--sigx-orange); }
.sx-item.disabled { opacity: .5; pointer-events: none; }
.sx-item .sx-seta { font-size: .95rem; width: auto; transition: transform .15s; }
.sx-grupo.aberto > .sx-item .sx-seta { transform: rotate(90deg); }
.sx-filhos { display: none; margin: 2px 0 4px; padding-left: 20px; position: relative; }
.sx-filhos::before { content: ""; position: absolute; left: 20px; top: 4px; bottom: 4px; width: 1px; background: var(--tblr-border-color); }
.sx-grupo.aberto > .sx-filhos { display: block; }
.sx-filhos .sx-item { height: 34px; font-size: .86rem; font-weight: 400; padding-left: 14px; }
.sx-filhos .sx-item .ti { font-size: 1.05rem; }
/* Seção recolhível (Relatórios): o título da seção é o botão e os itens têm o tamanho normal. */
.sx-grupo-secao > .sx-item.sx-secao { height: auto; margin: 0; padding: 14px 10px 6px; border-radius: 0; font-family: var(--tblr-font-monospace); font-size: .6rem; font-weight: 400; color: var(--tblr-secondary) !important; }
.sx-grupo-secao > .sx-item.sx-secao:hover { background: none; color: var(--tblr-body-color) !important; }
.sx-grupo-secao > .sx-item .sx-seta { font-size: .85rem; width: auto; }
.sx-grupo-secao > .sx-filhos { margin: 0; padding-left: 0; }
.sx-grupo-secao > .sx-filhos::before { display: none; }
.sx-grupo-secao > .sx-filhos .sx-item { height: 38px; font-size: .9rem; font-weight: 500; padding-left: 10px; }
.sx-grupo-secao > .sx-filhos .sx-item .ti { font-size: 1.2rem; }
/* Menu recolhido (trilho de ícones): a seção vira o divisor, como as outras, e os itens ficam à mostra. */
@media (min-width: 992px) {
  html.sx-recolhido .sx-grupo-secao > .sx-item.sx-secao { height: 1px; padding: 0; margin: 10px 8px; width: calc(100% - 16px); background: var(--tblr-border-color); font-size: 0; pointer-events: none; }
  html.sx-recolhido .sx-grupo-secao > .sx-item .sx-seta { display: none; }
  html.sx-recolhido .sx-grupo-secao > .sx-filhos { display: block !important; }
}

/* Rodapé do menu */
.sx-sb-foot { flex: none; border-top: 1px solid var(--tblr-border-color); padding: 8px 10px; }
.sx-sb-foot .sx-item { height: 36px; font-size: .86rem; font-weight: 500; }
.sx-sb-expandir { display: none; }

/* Recolhido: trilho de ícones (os rótulos ficam no title) */
html.sx-recolhido .sx-sb-brand { padding: 0; justify-content: center; }
html.sx-recolhido .sx-sb-brand .sx-brand-texto, html.sx-recolhido .sx-sb-recolher { display: none; }
html.sx-recolhido .sx-modulos { grid-template-columns: 1fr; gap: 2px; padding: 8px; }
html.sx-recolhido .sx-modulo span { display: none; }
html.sx-recolhido .sx-modulo { padding: 9px 0; }
html.sx-recolhido .sx-secao { height: 1px; padding: 0; margin: 10px 8px; background: var(--tblr-border-color); font-size: 0; }
html.sx-recolhido .sx-sb-menu > .sx-secao:first-child { display: none; }
html.sx-recolhido .sx-item { justify-content: center; padding: 0; }
html.sx-recolhido .sx-item .sx-rotulo, html.sx-recolhido .sx-item .sx-seta { display: none; }
html.sx-recolhido .sx-filhos { display: none !important; }
html.sx-recolhido .sx-sb-menu, html.sx-recolhido .sx-sb-foot { padding: 8px; }
html.sx-recolhido .sx-sb-expandir { display: flex; }

/* ---- Barra superior ---- */
.sx-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--sx-top-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px 0 16px;
  background: var(--tblr-bg-surface);
  border-bottom: 1px solid var(--tblr-border-color);
}
.sx-acao.sx-hamburguer { display: none; }

/* Empresa (tenant): logotipo fixo, ou iniciais quando não há logotipo. */
.sx-empresa { flex: none; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none !important; color: inherit !important; }
.sx-empresa-logo { height: 38px; flex: none; display: flex; align-items: center; padding: 4px 10px; border-radius: 8px; }
/* No tema escuro o logotipo vai sobre um "crachá" off-white (token do DS): logotipos pensados
   para fundo claro continuam legíveis. No claro, direto na barra. */
[data-bs-theme="dark"] .sx-empresa-logo.sx-logo-poco { background: var(--off-white, #F5F2EE); }
[data-bs-theme="light"] .sx-empresa-logo.sx-logo-poco, :root:not([data-bs-theme="dark"]) .sx-empresa-logo.sx-logo-poco { background: transparent; padding-left: 0; }
.sx-empresa-logo img { height: 28px; max-width: 160px; width: auto; object-fit: contain; display: block; }
/* Com logotipo próprio para o tema escuro: sem crachá, troca a imagem conforme o tema. */
.sx-empresa-logo:not(.sx-logo-poco) { padding-left: 0; }
.sx-empresa-logo:not(.sx-logo-poco) .sx-logo-escuro, [data-bs-theme="dark"] .sx-empresa-logo:not(.sx-logo-poco) .sx-logo-claro { display: none; }
[data-bs-theme="dark"] .sx-empresa-logo:not(.sx-logo-poco) .sx-logo-escuro { display: block; }
.sx-empresa-nome { font-weight: 600; font-size: .95rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.sx-empresa-iniciais { width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; background: rgba(var(--sigx-orange-rgb), .14); color: var(--sigx-orange); flex: none; }
.sx-empresa-iniciais[hidden] { display: none; }
/* Sem espaço, o nome encolhe em reticências; antes ele vazava por baixo da busca. */
.sx-empresa-texto { min-width: 0; overflow: hidden; }
.sx-selo { font-size: .6rem; vertical-align: middle; }
.sx-divisor { width: 1px; height: 28px; background: var(--tblr-border-color); margin: 0 6px; flex: none; }

/* Busca do módulo (omnisearch / finsearch): ocupa o centro, até 560px. Encolhe antes do nome da empresa. */
.sx-busca { flex: 0 100 560px; min-width: 160px; position: relative; }
.sx-busca .form-control { height: 38px; border-radius: 8px; background: var(--tblr-bg-surface-secondary); }

/* Ícones da direita */
.sx-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex: 1 1 0; }
.sx-acao {
  position: relative; width: 38px; height: 38px; border-radius: 8px; border: 0;
  background: transparent; color: var(--tblr-body-color) !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
  text-decoration: none !important;
}
.sx-acao:hover, .sx-acao.ativo { background: var(--tblr-primary-lt); color: var(--sigx-orange) !important; }
.sx-acao .badge { position: absolute; top: 2px; right: 2px; min-width: 1.15rem; padding: 2px 4px; font-size: .6rem; line-height: 1.3; border-radius: 999px; font-family: var(--tblr-font-monospace); background: var(--sigx-orange); color: #fff; box-shadow: 0 0 0 2px var(--tblr-bg-surface); }
.sx-acao .sx-ponto { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--sigx-orange); box-shadow: 0 0 0 2px var(--tblr-bg-surface); }
.sx-acao .sx-ponto[hidden] { display: none; }
/* Menu do usuário (Toolbar/UserMenu): mesmo formato das ações vizinhas. */
.sx-acoes .nav-item .nav-link { height: 38px; border-radius: 8px; padding: 0 6px 0 3px !important; }
.sx-acoes .nav-item .nav-link:hover { background: var(--tblr-active-bg); }

/* ---- Miolo: mais largo que o container-xl, compensando o menu ---- */
.sx-container { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 24px; }

/* ---- Responsivo ---- */
.sx-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1029; }
@media (max-width: 991.98px) {
  .page, html.sx-recolhido .page { padding-left: 0; }
  .sx-sidebar { transform: translateX(-100%); width: var(--sx-sb-w) !important; }
  body.sx-menu-aberto .sx-sidebar { transform: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
  body.sx-menu-aberto .sx-backdrop { display: block; }
  .sx-sb-recolher, .sx-sb-expandir { display: none !important; }
  .sx-acao.sx-hamburguer { display: inline-flex; }
  .sx-topbar { padding: 0 12px; }
  .sx-container { padding: 0 16px; }
  /* Na gaveta o menu é sempre o expandido, mesmo com o desktop recolhido. */
  html.sx-recolhido .sx-sb-brand { padding: 0 14px 0 16px; justify-content: flex-start; }
  html.sx-recolhido .sx-sb-brand .sx-brand-texto { display: block; }
  html.sx-recolhido .sx-modulos { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 10px 8px; }
  html.sx-recolhido .sx-modulo span { display: inline; }
  html.sx-recolhido .sx-modulo { padding: 8px 2px 7px; }
  html.sx-recolhido .sx-secao { height: auto; padding: 14px 10px 6px; margin: 0; background: none; font-size: .6rem; }
  html.sx-recolhido .sx-sb-menu > .sx-secao:first-child { display: block; padding-top: 6px; }
  html.sx-recolhido .sx-item { justify-content: flex-start; padding: 0 10px; }
  html.sx-recolhido .sx-item .sx-rotulo, html.sx-recolhido .sx-item .sx-seta { display: inline; }
  html.sx-recolhido .sx-grupo.aberto > .sx-filhos { display: block !important; }
  html.sx-recolhido .sx-sb-menu { padding: 8px 10px 12px; }
  html.sx-recolhido .sx-sb-foot { padding: 8px 10px; }
}
@media (max-width: 1199.98px) {
  .sx-busca #omnisearch-hint, .sx-busca #finsearch-hint { display: none !important; }
}
@media (max-width: 767.98px) {
  .sx-busca { display: none !important; }
  .sx-divisor { display: none; }
  .sx-empresa-nome { max-width: 150px; }
}
@media (max-width: 575.98px) {
  .sx-empresa-texto:not(.sx-sempre) { display: none; }
  .sx-empresa-logo img { max-width: 120px; }
}
/* Impressão: sem menu nem barra, miolo na largura toda. */
@media print {
  .page { padding-left: 0 !important; }
}

/* ====================================================
   Correção da barra de rolagem / centralização
   ----------------------------------------------------
   O Tabler aplica margin-left:calc(100vw - 100%) ao :root (html) em
   telas ≥992px. Isso valia 0 sem scroll, mas empurrava o conteúdo pela
   largura da barra quando o scroll aparecia (a "margem voltava").
   Zeramos a margem e usamos scrollbar-gutter:stable para reservar o
   espaço da barra de forma permanente — assim o conteúdo centralizado
   não desloca ao alternar entre páginas com e sem scroll.
   ==================================================== */
:host,
:root {
  margin-left: 0 !important;
  margin-right: 0 !important;
  scrollbar-gutter: stable;
}

.min-w-0 { min-width: 0; }

/* Listas "Usado em" — limitam a altura e mostram scroll em vez de crescer a página. */
.sigx-usos-scroll { max-height: 60vh; overflow-y: auto; }
/* Nas telas de detalhe: no máximo ~5 itens visíveis + scroll. */
.sigx-usos-scroll-5 { max-height: 18.5rem; overflow-y: auto; }

/* ====================================================
   Validação de obrigatórios (libs/sigx-form-validation.js)
   ----------------------------------------------------
   Borda vermelha em campos TomSelect inválidos — o .is-invalid
   vai no .ts-wrapper (o select original fica oculto).
   ==================================================== */
.ts-wrapper.is-invalid .ts-control {
  border-color: var(--tblr-danger, #d63939);
}
.ts-wrapper.is-invalid.focus .ts-control {
  box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, .25);
}

/* abp-input/abp-select já injetam um "*" próprio (.required-symbol) para os
   [Required] do DTO. Nas telas validadas pelo helper, o asterisco é do próprio
   helper (.form-label.required — o mesmo em labels manuais e de tags), então
   escondemos o do ABP para não duplicar. Fora dessas telas o ABP segue normal. */
form[data-sigx-validate] .required-symbol { display: none; }

/* ── Grid server-side (sigx-grid.js): estado de carregamento ─────────────────
   O spinner mora numa camada própria ANCORADA NO CARD, não no .table-responsive.
   Motivo: o wrap rola (overflow-y:auto) e no primeiro load está vazio — um
   ::after com inset:0 lá dentro ficaria com altura zero ou fora da área visível,
   ou seja, invisível justo na espera mais longa. */
.sigx-grid-camada {
    position: absolute; inset: 0; z-index: 3;
    border-radius: inherit;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
    background: color-mix(in srgb, var(--tblr-card-bg, #fff) 55%, transparent);
}
/* A classe só entra depois de ~150 ms (sigx-grid.js): resposta rápida não pisca. */
.sigx-grid-loading .sigx-grid-camada { opacity: 1; }
.sigx-grid-loading > .table-responsive { pointer-events: none; }

.sigx-grid-camada::after {
    content: "";
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 3px solid var(--tblr-primary); border-right-color: transparent;
    animation: sigx-grid-spin .7s linear infinite;
}
@keyframes sigx-grid-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sigx-grid-camada::after { animation-duration: 2.4s; }
}

/* ── Grid ajustado à janela: card ocupa da sua posição até o rodapé da viewport,
   header/footer fixos e SÓ a tabela rola por dentro (sigx-grid.js aplica a
   classe + a var).

   `height` (e não `max-height`): a altura é a MESMA com 25 linhas, com 1 ou com
   nenhuma. Antes o card encolhia conforme o resultado, então filtrar/paginar
   sacudia a página inteira e o rodapé subia junto. Agora o quadro é estável e só
   o conteúdo interno muda. É também o que dá área para o spinner aparecer. ── */
.sigx-grid-fit { position: relative; display: flex; flex-direction: column; height: var(--sigx-grid-h, 70vh); }
.sigx-grid-fit > .card-header,
.sigx-grid-fit > .card-footer { flex: 0 0 auto; }
/* Os estados vazios ocupam a área da tabela, centrados — não uma faixa fina no topo. */
.sigx-grid-fit > #semRegistros,
.sigx-grid-fit > #estadoVazio {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sigx-grid-fit > #semRegistros.d-none,
.sigx-grid-fit > #estadoVazio.d-none { display: none; }
.sigx-grid-fit > .table-responsive { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* cabeçalho da tabela grudado no topo enquanto rola */
.sigx-grid-fit table.card-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--tblr-bg-surface, var(--tblr-card-bg, #fff));
}

/* ── Dica de ação do grid (sigx-grid.js): hover num botão-ícone da linha exibe o
   rótulo (title) no header da coluna de ações. Ancorado à direita e absoluto para
   não mexer na largura da coluna; fundo opaco cobre o header vizinho quando o
   rótulo é maior que a coluna. ── */
thead th.sigx-th-dica { position: relative; } /* no grid-fit o sticky (acima) prevalece */
thead th .sigx-dica-acao {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center;
    padding: inherit;
    white-space: nowrap;
    background: var(--tblr-bg-surface, var(--tblr-card-bg, #fff));
    animation: sigx-dica-in .12s ease;
    pointer-events: none;
}
@keyframes sigx-dica-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Colunas dos grids (libs/sigx-colunas.js) ────────────────────────────────
   Larguras congeladas num <colgroup>: table-layout fixed, então paginar/filtrar
   não mexe mais nas colunas. Conteúdo maior que a coluna quebra linha em vez de
   invadir a vizinha. */
table.sigx-cols-fixas { table-layout: fixed; }
table.sigx-cols-fixas > tbody > tr > td { overflow-wrap: anywhere; }
table.sigx-cols-fixas .text-truncate { max-width: 100%; }

/* Coluna de ações sempre visível, grudada à direita do quadro que rola. O fundo
   opaco é a superfície + a cor da linha (table-*), por cima; o hover do Tabler
   vem do box-shadow inset, que continua valendo. */
.table-responsive > table.sigx-acoes-fixas > thead > tr > th:last-child,
.table-responsive > table.sigx-acoes-fixas > tbody > tr > td:last-child:not([colspan]),
.table-responsive > table.sigx-acoes-fixas > tfoot > tr > :last-child:not([colspan]) {
    position: sticky; right: 0; z-index: 1; white-space: nowrap;
}
.table-responsive > table.sigx-acoes-fixas > thead > tr > th:last-child { z-index: 3; }
.table-responsive > table.sigx-acoes-fixas > tbody > tr > td:last-child:not([colspan]),
.table-responsive > table.sigx-acoes-fixas > tfoot > tr > :last-child:not([colspan]) {
    background-color: var(--tblr-bg-surface, var(--tblr-card-bg, #fff));
    background-image: linear-gradient(var(--tblr-table-bg, transparent), var(--tblr-table-bg, transparent));
}
/* Sombra na borda esquerda da coluna enquanto há conteúdo rolado por baixo dela. */
.table-responsive > table.sigx-acoes-fixas > * > tr > :last-child:not([colspan])::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px;
    pointer-events: none; opacity: 0; transition: opacity .15s ease;
    background: linear-gradient(to left, rgba(0, 0, 0, .08), transparent);
}
.table-responsive.sigx-rola-x > table.sigx-acoes-fixas > * > tr > :last-child:not([colspan])::before { opacity: 1; }

/* ── Grids no celular (libs/sigx-colunas.js) ─────────────────────────────────
   Abaixo de 768 px o sticky das ações tapava quase todo o texto da linha. A
   tabela com coluna de ações ganha .sigx-cartoes: cada <tr> vira um cartão com
   pares "rótulo: valor" (td[data-label], copiado do <th>) e os botões numa
   faixa no rodapé do cartão. Os <th> ordenáveis (sigx-grid.js) viram pílulas
   acima da lista; o resto do header some. Desktop fica como estava. */
@media (max-width: 767.98px) {
    /* Altura fixa + rolagem interna espreme o grid entre filtros e rodapé no
       celular: aqui a lista cresce e quem rola é a página. */
    .sigx-grid-fit { height: auto; }
    .sigx-grid-fit > .table-responsive { flex: 0 0 auto; }
    .sigx-grid-fit > #semRegistros,
    .sigx-grid-fit > #estadoVazio { flex: 0 0 auto; }
}
.table-responsive > table.sigx-cartoes,
.table-responsive > table.sigx-cartoes > thead,
.table-responsive > table.sigx-cartoes > tbody,
.table-responsive > table.sigx-cartoes > tfoot { display: block; width: 100%; }
.table-responsive > table.sigx-cartoes { min-width: 0; margin-bottom: 0; }

/* Header: só as colunas ordenáveis (e o "marcar todos"), como pílulas. */
.table-responsive > table.sigx-cartoes > thead > tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: .75rem .75rem 0;
}
.table-responsive > table.sigx-cartoes > thead > tr > th { display: none; }
.table-responsive > table.sigx-cartoes > thead > tr > th[data-sort],
.table-responsive > table.sigx-cartoes > thead > tr > th:has(input[type="checkbox"]) {
    display: inline-flex; align-items: center;
    position: static; width: auto !important;
    padding: .25rem .65rem; border: 1px solid var(--tblr-border-color); border-radius: 999px;
    background: var(--tblr-bg-surface, var(--tblr-card-bg, #fff));
    cursor: pointer; white-space: nowrap;
}
.table-responsive > table.sigx-cartoes > thead > tr > th.sorted {
    border-color: var(--tblr-primary); color: var(--tblr-primary);
}
.table-responsive > table.sigx-cartoes > thead:not(:has(th[data-sort], th input[type="checkbox"])) { display: none; }

/* Linha = cartão. */
.table-responsive > table.sigx-cartoes > tbody > tr {
    display: block; position: relative;
    margin: .75rem; padding: .35rem 0;
    border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg, .5rem);
    background: var(--tblr-bg-surface, var(--tblr-card-bg, #fff));
    overflow: hidden;
}
.table-responsive > table.sigx-cartoes > tbody > tr > td,
.table-responsive > table.sigx-cartoes > tfoot > tr > * {
    display: block; position: relative; width: auto !important; min-width: 0;
    border: 0; padding: .35rem .9rem;
    text-align: start !important; white-space: normal;
    overflow-wrap: anywhere;
}
/* Rótulo à esquerda, valor à direita dele. */
.table-responsive > table.sigx-cartoes > tbody > tr > td[data-label]:not([data-label=""]) {
    padding-left: calc(.9rem + 6.75rem);
    min-height: 2rem;
}
.table-responsive > table.sigx-cartoes > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    position: absolute; left: .9rem; top: .35rem; width: 6.25rem;
    font-size: .75rem; line-height: 1.5rem; color: var(--tblr-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Truncados com max-width inline (nome, canal…): no cartão o texto quebra linha
   em vez de cortar — o ponto é o usuário conseguir ler. */
.table-responsive > table.sigx-cartoes > tbody > tr > td .text-truncate {
    max-width: 100% !important; white-space: normal; overflow: visible;
}

/* Checkbox de seleção (sigx-grid.js) no canto do cartão. */
.table-responsive > table.sigx-cartoes > tbody > tr > td:has(> .sigx-chk) {
    position: absolute; top: .55rem; right: .9rem; padding: 0; z-index: 1;
}
.table-responsive > table.sigx-cartoes > tbody > tr > td:has(> .sigx-chk) + td { padding-right: 2.5rem; }

/* Ações: faixa normal no rodapé do cartão, sem sticky e quebrando linha. */
.table-responsive > table.sigx-cartoes > tbody > tr > td:last-child:not([colspan]) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem;
    margin-top: .35rem; padding-top: .45rem; padding-bottom: .1rem;
    border-top: 1px solid var(--tblr-border-color);
}
.table-responsive > table.sigx-cartoes > tbody > tr > td:last-child:not([colspan]):empty { display: none; }

/* ── Comunidade SigX ───────────────────────────────────────────────────────
   Item do menu do usuário em laranja (destaque) e o cartão flutuante do convite,
   que sai do caminho da gaveta de ajuda quando ela empurra a página. */
.dropdown-item.sigx-comunidade-item,
.dropdown-item.sigx-comunidade-item:hover {
    color: var(--sigx-orange, #FF5100);
    font-weight: 600;
}
.sigx-comunidade-card {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    max-width: 340px;
    transition: right .3s ease-in-out;
}
.sigx-comunidade-card .btn-close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 1;
}
@media (min-width: 992px) {
    body.sigx-ajuda-aberta .sigx-comunidade-card { right: calc(min(420px, 100vw) + 1rem); }
}
/* ── Alerts com texto corrido ──────────────────────────────────────────────
   O Tabler faz .alert { display:flex; gap:1rem }, o que transforma <strong>/<i>
   soltos no meio do texto em itens de flex — cada um ganha 1rem de "espaço
   fantasma". Nossos alerts são majoritariamente texto corrido: volta ao fluxo
   inline. Alerts estruturados do Tabler (com .alert-icon) mantêm o flex. */
.alert:not(:has(> .alert-icon)) {
    display: block;
}

/* ── Dropzone de anexos (sigx-anexos.js) ───────────────────────────────────
   Usada ao abrir e ao responder um ticket. Mesmo visual do formulário de
   solicitação da navbar, mas em classes reutilizáveis (.sx-*). */
.sx-dropzone {
    border: 1.5px dashed var(--tblr-border-color);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--tblr-secondary);
    transition: border-color .15s, background-color .15s;
}
.sx-dropzone:hover,
.sx-dropzone.dragover {
    border-color: var(--tblr-primary);
    background-color: rgba(255, 81, 0, .06);
}
.sx-dropzone i.sx-dz-icon { font-size: 1.6rem; display: block; margin-bottom: .25rem; color: var(--tblr-primary); }
.sx-dz-txt { font-size: .875rem; }
.sx-dz-hint { font-size: .75rem; opacity: .7; margin-top: .15rem; }

.sx-previews { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.sx-prev {
    position: relative; width: 76px; height: 76px;
    border-radius: 8px; overflow: hidden; flex: 0 0 auto;
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04));
}
.sx-prev img, .sx-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-prev-vid {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .15rem; color: var(--tblr-secondary);
}
.sx-prev-vid i { font-size: 1.4rem; color: var(--tblr-primary); }
.sx-prev-vid small { font-size: .55rem; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-prev-rm {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border: 0; padding: 0; border-radius: 50%; line-height: 1; font-size: .8rem;
    background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sx-prev-rm:hover { background: var(--tblr-danger); }
.sx-prev-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 81, 0, .25); }
.sx-prev-bar > span { display: block; height: 100%; width: 0; background: var(--tblr-primary); transition: width .2s; }
.sx-prev.is-error { border-color: var(--tblr-danger); }

/* ── Tickets de suporte ───────────────────────────────────────────────────── */
.tk-num { font-family: var(--tblr-font-monospace); font-size: .8rem; color: var(--tblr-secondary); }

/* Resumo da lista: números que também são filtros rápidos. Rola na horizontal no celular. */
.tk-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
}
.tk-kpi {
    display: flex; align-items: center; gap: .65rem; min-width: 0;
    padding: .65rem .8rem; text-align: left; color: inherit;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 14px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tk-kpi:hover { border-color: rgba(var(--tblr-primary-rgb), .45); transform: translateY(-1px); }
.tk-kpi.is-ativo { border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15); }
.tk-kpi-ico {
    flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.tk-kpi-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tk-kpi-txt strong { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-kpi-txt small { color: var(--tblr-secondary); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
    .tk-kpis {
        display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        margin: 0 calc(var(--tblr-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--tblr-gutter-x, 1.5rem) * .5) .15rem;
    }
    .tk-kpis::-webkit-scrollbar { display: none; }
    .tk-kpi { flex: 0 0 auto; scroll-snap-align: start; padding: .5rem .7rem; }
    .tk-kpi-ico { width: 2rem; height: 2rem; font-size: 1rem; }
    .tk-kpi-txt strong { font-size: 1.05rem; }
}

/* Barra de busca/filtros: a busca estica; no celular ela ocupa a linha inteira. */
.tk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tk-busca { flex: 1 1 260px; max-width: 460px; }
.tk-toolbar-acoes { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.tk-modo .btn.active { background: rgba(var(--tblr-primary-rgb), .1); border-color: var(--tblr-primary); color: var(--tblr-primary); }
@media (max-width: 575.98px) {
    .tk-busca { flex-basis: 100%; max-width: none; }
    .tk-toolbar-acoes { margin-left: 0; width: 100%; }
    .tk-toolbar-acoes .form-select { flex: 1 1 auto; width: auto !important; }
}

/* Abas por etapa da visão em lista (faixa rolável, estilo "pílulas"). */
.tk-abas {
    display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    padding-bottom: .15rem; margin-bottom: .75rem;
}
.tk-abas::-webkit-scrollbar { display: none; }
.tk-aba {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
    padding: .38rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 500;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); color: var(--tblr-body-color);
    transition: background-color .15s, border-color .15s;
}
.tk-aba:hover { border-color: rgba(var(--tblr-primary-rgb), .45); }
.tk-aba.is-ativa { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }
.tk-aba.is-ativa i { color: #fff !important; }
.tk-aba-n {
    font-family: 'Space Mono', monospace; font-size: .7rem; line-height: 1;
    padding: .18rem .4rem; border-radius: 999px; background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.05));
}
.tk-aba.is-ativa .tk-aba-n { background: rgba(255, 255, 255, .22); }

/* Cartão de ticket — o mesmo no quadro e na lista (.is-largo). Estende o .kb-card. */
.kb-card.tk-card {
    display: flex; flex-direction: column; gap: .4rem; position: relative;
    cursor: pointer; text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kb-card.tk-card:hover .tk-card-titulo { color: var(--tblr-primary); }
.kb-card.tk-card:hover { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); border-color: rgba(var(--tblr-primary-rgb), .35); }
.kb-card.tk-card.is-drag { cursor: grab; }
.kb-card.tk-card.is-drag:active { cursor: grabbing; }
.kb-card.tk-nao-lido { background: linear-gradient(90deg, rgba(var(--tblr-primary-rgb), .06), transparent 60%), var(--tblr-bg-surface); }
.kb-card.tk-nao-lido .tk-card-titulo { font-weight: 700; }
.tk-card-topo { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tk-card-topo .badge { font-size: .68rem; }
.tk-prio-alta { display: inline-flex; align-items: center; gap: .15rem; color: var(--tblr-danger); font-size: .75rem; font-weight: 600; }
.tk-ponto {
    margin-left: auto; width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto;
    background: var(--sigx-orange, #FF5100); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .2);
}
.tk-card-titulo {
    font-weight: 600; font-size: .86rem; line-height: 1.3; overflow-wrap: anywhere; color: var(--tblr-body-color);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.tk-chip {
    display: inline-flex; align-items: center; gap: .25rem; max-width: 100%;
    padding: .1rem .45rem; border-radius: 999px; font-size: .7rem; line-height: 1.5;
    background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.04)); color: var(--tblr-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-chip.is-link { color: var(--tblr-primary); text-decoration: none; }
.tk-chip.is-link:hover { background: rgba(var(--tblr-primary-rgb), .1); }
.tk-chip.is-azure { color: var(--tblr-azure); background: rgba(var(--tblr-azure-rgb, 69, 170, 242), .1); font-weight: 600; }
.tk-chip.is-purple { color: var(--tblr-purple); background: rgba(var(--tblr-purple-rgb, 174, 62, 201), .1); }
.tk-chip.is-primary { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .1); }
.tk-card-rodape { display: flex; align-items: center; gap: .6rem; font-size: .72rem; color: var(--tblr-secondary); }
.tk-card-quando { display: inline-flex; align-items: center; gap: .2rem; }
.tk-resp {
    margin-left: auto; width: 1.45rem; height: 1.45rem; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; letter-spacing: .02em;
    background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-primary);
}

/* Visão em lista: cartões largos, em grade a partir do tablet. */
.tk-lista { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 768px) { .tk-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .tk-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kb-card.tk-card.is-largo { padding: .8rem .9rem; border-radius: 14px; }
.kb-card.tk-card.is-largo .tk-card-titulo { font-size: .95rem; }
@media (max-width: 575.98px) {
    /* Área de toque maior e sem hover "pulando" no celular. */
    .kb-card.tk-card.is-largo { padding: .85rem .9rem; }
    .kb-card.tk-card:hover { transform: none; box-shadow: none; }
    .kb-card.tk-card:active { background-color: var(--tblr-bg-surface-secondary); }
}
#quadroBoard.is-carregando { opacity: .55; pointer-events: none; transition: opacity .15s; }

.tk-esqueleto {
    height: 104px; border-radius: 14px; border: 1px solid var(--tblr-border-color);
    background: linear-gradient(90deg, var(--tblr-bg-surface) 25%, var(--tblr-bg-surface-secondary, rgba(0,0,0,.04)) 50%, var(--tblr-bg-surface) 75%);
    background-size: 200% 100%; animation: tk-brilho 1.2s linear infinite;
}
@keyframes tk-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tk-esqueleto { animation: none; } }

.tk-vazio {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: 3rem 1rem; color: var(--tblr-secondary); text-align: center;
    border: 1px dashed var(--tblr-border-color); border-radius: 14px;
}
.tk-vazio > i { font-size: 2.2rem; opacity: .6; margin-bottom: .25rem; }

/* Botão flutuante "abrir ticket" (só celular). */
.tk-fab {
    position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1030;
    width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
    background: var(--sigx-orange, #FF5100); color: #fff;
    box-shadow: 0 10px 24px -6px rgba(var(--tblr-primary-rgb), .6);
}
.tk-fab:active { transform: scale(.94); }

/* ── Detalhe ─────────────────────────────────────────────────────────────── */
.tk-titulo { overflow-wrap: anywhere; line-height: 1.25; }
.tk-sub { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .3rem; font-size: .8rem; color: var(--tblr-secondary); }
.tk-sub > span { display: inline-flex; align-items: center; gap: .25rem; }

/* Caminho do atendimento: Recebido → Em atendimento → Resolvido. */
.tk-progresso {
    display: flex; align-items: center; gap: 0; padding: .75rem 1rem;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 16px;
}
/* A 1ª etapa tem a largura do conteúdo; as seguintes crescem e o traço (::before) ocupa o
   espaço até elas — assim a linha liga as etapas de ponta a ponta. */
.tk-passo { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; min-width: 0; position: relative; color: var(--tblr-secondary); }
.tk-passo + .tk-passo { flex: 1 1 0; }
.tk-passo + .tk-passo::before {
    content: ""; flex: 1 1 auto; min-width: 1rem; height: 2px; margin: 0 .35rem 0 .6rem;
    background: var(--tblr-border-color); border-radius: 2px;
}
.tk-passo.is-feito + .tk-passo::before,
.tk-passo.is-atual::before { background: var(--tblr-primary) !important; }
.tk-passo-ico {
    flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    border: 2px solid var(--tblr-border-color); background: var(--tblr-bg-surface);
}
.tk-passo.is-feito .tk-passo-ico { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }
.tk-passo.is-atual .tk-passo-ico { border-color: var(--tblr-primary); color: var(--tblr-primary); box-shadow: 0 0 0 4px rgba(var(--tblr-primary-rgb), .15); }
.tk-passo.is-atual { color: var(--tblr-body-color); }
.tk-passo-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tk-passo-rotulo { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-passo-txt small { font-size: .72rem; color: var(--tblr-secondary); white-space: nowrap; }
@media (max-width: 575.98px) {
    .tk-progresso { padding: .6rem .7rem; }
    .tk-passo, .tk-passo + .tk-passo { flex: 1 1 0; flex-direction: column; gap: .3rem; text-align: center; }
    .tk-passo + .tk-passo::before { position: absolute; top: 1rem; right: calc(50% + 1.2rem); width: calc(100% - 2.4rem); min-width: 0; margin: 0; }
    .tk-passo-rotulo { font-size: .74rem; white-space: normal; }
    .tk-passo-txt { align-items: center; }
}

/* Conversa em balões. "is-meu" = lado de quem está olhando (direita). */
.tk-chat { display: flex; flex-direction: column; gap: .85rem; padding: 1.1rem; }
.tk-dia { display: flex; align-items: center; gap: .75rem; color: var(--tblr-secondary); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tk-dia::before, .tk-dia::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--tblr-border-color); }
.tk-msg { display: flex; align-items: flex-end; gap: .55rem; max-width: 100%; }
.tk-msg.is-meu { flex-direction: row-reverse; }
.tk-av {
    flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
    background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.06)); color: var(--tblr-secondary);
}
.tk-msg.is-suporte .tk-av { background: rgba(var(--tblr-primary-rgb), .14); color: var(--tblr-primary); font-size: 1rem; }
.tk-bolha {
    min-width: 0; max-width: min(620px, 82%);
    padding: .6rem .85rem .65rem; border-radius: 16px 16px 16px 4px;
    background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.04)); border: 1px solid var(--tblr-border-color);
}
.tk-msg.is-meu .tk-bolha {
    border-radius: 16px 16px 4px 16px;
    background: rgba(var(--tblr-primary-rgb), .08); border-color: rgba(var(--tblr-primary-rgb), .22);
}
.tk-msg.is-interno .tk-bolha {
    background: rgba(255, 193, 7, .1); border: 1px dashed rgba(245, 159, 0, .55);
}
.tk-bolha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; font-size: .78rem; margin-bottom: .2rem; }
.tk-bolha-topo .badge { font-size: .64rem; }
.tk-hora { margin-left: auto; padding-left: .5rem; color: var(--tblr-secondary); font-size: .7rem; font-variant-numeric: tabular-nums; }
.tk-msg-texto { white-space: pre-line; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.5; }
.tk-aguarda {
    display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center;
    padding: .85rem; color: var(--tblr-secondary); font-size: .82rem;
    border: 1px dashed var(--tblr-border-color); border-radius: 12px;
}
@media (max-width: 575.98px) {
    .tk-chat { padding: .85rem .7rem; gap: .7rem; }
    .tk-bolha { max-width: 88%; }
    .tk-av { width: 1.7rem; height: 1.7rem; font-size: .64rem; }
}

.tk-anexos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.tk-anexo {
    width: 72px; height: 72px; flex: 0 0 auto; padding: 0; position: relative;
    border-radius: 10px; overflow: hidden; cursor: pointer;
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04));
    transition: transform .15s, border-color .15s;
}
.tk-anexo:hover { border-color: var(--tblr-primary); transform: scale(1.03); }
.tk-anexo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-anexo-vid { display: flex; align-items: center; justify-content: center; color: var(--tblr-primary); }
.tk-anexo-vid i { font-size: 1.3rem; }

/* Compositor da resposta: caixa única com a barra de ações embaixo, grudada no rodapé da
   tela enquanto a conversa rola (fica sempre à mão, como em app de mensagem). */
.tk-compositor {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--tblr-bg-surface); border-radius: 0 0 1rem 1rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}
.tk-caixa {
    border: 1px solid var(--tblr-border-color); border-radius: 14px; background: var(--tblr-bg-surface);
    transition: border-color .15s, box-shadow .15s;
}
.tk-caixa:focus-within { border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .12); }
.tk-caixa textarea {
    border: 0; box-shadow: none !important; resize: none; background: transparent;
    min-height: 2.75rem; max-height: 260px; padding: .7rem .85rem .3rem;
}
.tk-caixa-barra { display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem .45rem; }
.sx-dropzone.tk-anexar {
    width: 2.35rem; height: 2.35rem; padding: 0; border-radius: 10px; border-style: solid; border-color: transparent;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 auto;
}
.sx-dropzone.tk-anexar:hover, .sx-dropzone.tk-anexar.dragover { border-color: transparent; color: var(--tblr-primary); }
.tk-interno { font-size: .8rem; white-space: nowrap; }
.tk-atalho { font-size: .7rem; color: var(--tblr-secondary); }
.tk-compositor.is-interno .tk-caixa { border-color: rgba(245, 159, 0, .7); background: rgba(255, 193, 7, .06); }
.tk-compositor.is-drop .tk-caixa { border-style: dashed; border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .05); }

/* Painel lateral: no celular vira um resumo recolhível acima da conversa. */
.tk-lateral-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
    padding: .7rem .9rem; margin-bottom: .6rem; color: inherit; text-align: left;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 14px;
}
.tk-lateral-seta { transition: transform .2s; }
.tk-lateral-toggle.is-aberto .tk-lateral-seta { transform: rotate(180deg); }
/* Lateral mais alta que a janela: rola por dentro, senão o fim dela fica inalcançável. */
@media (min-width: 992px) {
    .tk-lateral {
        position: sticky; top: 1rem; max-height: calc(100vh - 2rem);
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
        scrollbar-color: rgba(var(--tblr-primary-rgb), .45) transparent;
    }
    /* No modal o scroll é do #tkPainel (85vh), não da janela. */
    #tkPainel .tk-lateral { top: 0; max-height: calc(85vh - 3rem); }
}
.tk-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; }
.tk-dl dt { font-weight: 400; color: var(--tblr-secondary); }
.tk-dl dd { margin: 0; text-align: right; }
.tk-dica { display: flex; gap: .5rem; font-size: .8rem; color: var(--tblr-secondary); padding: 0 .25rem; }

/* ── Quadro kanban (.kb-*) ─────────────────────────────────────────────────
   Base do quadro de tickets (/Tickets). Cada página só acrescenta o que é próprio dela. */
.kb-cols { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding-bottom: .25rem; }
.kb-col { flex: 1 1 0; min-width: 280px; background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.02)); border-radius: var(--tblr-border-radius); padding: .75rem; }
.kb-col-head { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem .5rem; font-weight: 600; }
.kb-col-add { margin-left: auto; }
.kb-count { font-family: 'Space Mono', monospace; font-size: .75rem; color: var(--tblr-secondary); }
.kb-list { min-height: 48px; display: flex; flex-direction: column; gap: .6rem; }
.kb-card { background: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color); border-left: 3px solid var(--tblr-secondary); border-radius: var(--tblr-border-radius); padding: .65rem .75rem; cursor: grab; }
.kb-card:active { cursor: grabbing; }
.kb-card.prio-3 { border-left-color: var(--tblr-danger); }
.kb-card.prio-2 { border-left-color: var(--tblr-info); }
.kb-card.prio-1 { border-left-color: var(--tblr-secondary); }
.kb-card-title { font-weight: 600; font-size: .9rem; }
.kb-card-desc { font-size: .8rem; color: var(--tblr-secondary); margin: .25rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-card-proj { font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .4rem; border-radius: 999px; background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ghost { opacity: .4; }
/* Coluna vazia: o aviso é pseudo-elemento (:empty::before), NÃO um filho da lista.
   Como filho, ele era enxergado pelo Sortable como item — dava para arrastá-lo e o
   cartão solto ia parar ao lado dele. Assim a coluna inteira é a área de drop. */
.kb-list:empty::before {
    content: attr(data-vazio);
    display: flex; align-items: center; justify-content: center;
    min-height: 84px; padding: .5rem; text-align: center;
    color: var(--tblr-secondary); font-size: .8rem;
    border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius);
}
.kb-list.kb-drop-alvo:empty::before { border-color: var(--tblr-primary); color: var(--tblr-primary); }

.kb-empty { text-align: center; color: var(--tblr-secondary); font-size: .8rem; padding: 1.25rem 0; border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius); }

/* ── SweetAlert2 (diálogos de confirmação do ABP) ──────────────────────────
   abp.message.confirm/success/... renderiza pelo SweetAlert2, que traz a própria
   folha de estilo com o roxo padrão dele (#7066e0) no botão de confirmar — o único
   ponto do portal que escapava do Signal Orange.

   Os seletores do sweetalert2.css usam :where() (`div:where(.swal2-container)
   button:where(.swal2-styled).swal2-confirm`), que não soma especificidade: valem
   (0,1,2). As regras abaixo valem (0,3,1) e ganham sem precisar de !important,
   independentemente da ordem em que os arquivos entram no bundle. */
.swal2-container button.swal2-styled.swal2-confirm {
  background-color: var(--sigx-orange, #FF5100);
}
.swal2-container button.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(var(--sigx-orange-rgb, 255, 81, 0), .5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP NO CELULAR (PWA)

   O portal é instalável: manifesto e metas em Pages/Shared/_PwaHead.cshtml,
   service worker em wwwroot/sw.js, comportamento em libs/sigx-pwa.js.
   Este bloco cobre (1) o que muda quando ele roda instalado, (2) os avisos
   próprios do PWA e (3) ajustes de toque que valem em qualquer celular.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. App instalado ────────────────────────────────────────────────────────
   Em standalone o iOS usa a barra de status translúcida (black-translucent em
   _PwaHead.cshtml), então o conteúdo sobe por baixo do relógio/notch: quem
   devolve o espaço é este padding. O mesmo vale para a barra de gestos de baixo.
   Fora do standalone nada disso se aplica — no navegador a chrome própria dele
   já reserva a área. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Sem isso, arrastar a listagem para baixo recarrega a página inteira —
       gesto de navegador, não de app. */
    html, body { overscroll-behavior-y: contain; }

    /* Já está instalado: o convite não tem mais o que fazer. */
    [data-sigx-instalar] { display: none !important; }
}

/* ── 2. Convite de instalação e aviso de versão nova ──────────────────────── */

/* Estado inicial de todo botão "Instalar": escondido até o navegador dizer que
   dá para instalar (libs/sigx-pwa.js tira a classe). */
.sigx-instalar-oculto { display: none !important; }

.sigx-pwa-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1080;
    display: flex; align-items: center; gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .6rem .75rem .6rem 1rem;
    border-radius: 10px;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: .85rem;
}

.sigx-pwa-btn {
    flex-shrink: 0;
    font: inherit; font-weight: 600;
    color: #fff;
    background: var(--sigx-orange, #FF5100);
    border: 0; border-radius: 6px;
    padding: .35rem .85rem;
    cursor: pointer;
}
.sigx-pwa-btn:hover { filter: brightness(1.08); }

/* Recusa do convite ("Agora não"): mesma caixa, peso visual bem menor — a ação
   principal é ativar, e um segundo botão sólido competiria com ela. */
.sigx-pwa-btn-ghost {
    flex-shrink: 0;
    font: inherit;
    color: var(--tblr-secondary, #667382);
    background: none; border: 0;
    padding: .35rem .5rem;
    cursor: pointer;
}
.sigx-pwa-btn-ghost:hover { color: var(--tblr-body-color, #1d273b); }

/* Folha de instruções do iOS (lá não existe API de instalação, só o passo a
   passo do menu Compartilhar). Autocontida: roda também no /Account/Login,
   que não carrega o JS do Bootstrap. */
.sigx-pwa-folha-fundo {
    position: fixed; inset: 0; z-index: 1090;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0, 0, 0, .5);
}

.sigx-pwa-folha {
    width: 100%; max-width: 28rem;
    padding: .75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #1d273b);
    animation: sigx-pwa-sobe .18s ease-out;
}

.sigx-pwa-folha-alca {
    width: 2.5rem; height: 4px; margin: 0 auto 1rem;
    border-radius: 999px;
    background: var(--tblr-border-color, #e6e7e9);
}

.sigx-pwa-folha h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .75rem; }
.sigx-pwa-folha ol { margin: 0 0 1.25rem; padding-left: 1.1rem; font-size: .9rem; line-height: 1.7; }
.sigx-pwa-folha .sigx-pwa-btn { width: 100%; padding: .65rem; }

@keyframes sigx-pwa-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .sigx-pwa-folha { animation: none; }
}

/* ── 3. Ergonomia de toque (vale no navegador do celular também) ──────────── */
@media (max-width: 575.98px) {
    /* O Safari do iPhone dá zoom ao focar campo com fonte < 16px e depois não
       volta sozinho — a tela fica "torta" pelo resto do formulário. */
    .form-control, .form-select, .ts-control, textarea, input[type="text"],
    input[type="email"], input[type="password"], input[type="number"],
    input[type="search"], input[type="tel"], input[type="url"],
    input[type="date"], input[type="time"], input[type="datetime-local"] {
        font-size: 16px;
    }

    /* Tabelas largas rolam dentro do próprio contêiner em vez de esticar a
       página (que quebraria o cabeçalho fixo e a navbar). */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

html {
    -webkit-text-size-adjust: 100%;   /* rotação de tela não reescala a fonte */
    -webkit-tap-highlight-color: transparent;
}

/* ── Base de conhecimento (wiki + FAQ) ─────────────────────────────────────
   Tipografia do richtext. Mora aqui, e não na página, porque o MESMO HTML é
   renderizado em dois lugares: a tela de leitura do host (/Sistema/Wiki/Ver) e
   o painel de ajuda da navbar. O conteúdo vem sanitizado da gravação
   (WikiHtmlSanitizador), então a lista de tags abaixo é fechada por construção. */
.wiki-corpo { font-size: .98rem; line-height: 1.7; }
.wiki-corpo h2 { font-size: 1.35rem; font-weight: 600; margin: 1.6rem 0 .6rem; }
.wiki-corpo h3 { font-size: 1.15rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
.wiki-corpo h4 { font-size: 1rem; font-weight: 600; margin: 1.2rem 0 .4rem; }
.wiki-corpo p { margin-bottom: .9rem; }
.wiki-corpo ul, .wiki-corpo ol { margin-bottom: .9rem; padding-left: 1.4rem; }
.wiki-corpo li { margin-bottom: .3rem; }
.wiki-corpo img { max-width: 100%; border-radius: 8px; margin: .5rem 0; }
.wiki-corpo a { color: var(--tblr-primary); }
.wiki-corpo blockquote {
    border-left: 3px solid var(--tblr-primary);
    background: rgba(255, 81, 0, .07);
    padding: .7rem 1rem; margin: 1rem 0; border-radius: 0 8px 8px 0;
}
.wiki-corpo pre, .wiki-corpo code {
    font-family: var(--tblr-font-monospace); font-size: .86rem;
    background: var(--tblr-bg-surface-secondary); border-radius: 6px;
}
.wiki-corpo pre { padding: .8rem 1rem; overflow-x: auto; }
.wiki-corpo code { padding: .1rem .35rem; }
.wiki-corpo table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.wiki-corpo th, .wiki-corpo td { border: 1px solid var(--tblr-border-color); padding: .45rem .6rem; }
.wiki-corpo th { background: var(--tblr-bg-surface-secondary); font-weight: 600; }

/* Painel de ajuda (gaveta da navbar). É o offcanvas do Bootstrap — o mesmo componente da
   tarefa do Kanban —, com duas diferenças pedidas: não fecha por clique fora (offcanvas
   sem backdrop já se comporta assim; keyboard=false tira também o ESC) e EMPURRA a página
   em vez de cobri-la. O empurrão é a margem no .page, com transição igual à do offcanvas.
   Abaixo de 992px não há espaço para empurrar: a gaveta cobre, como qualquer offcanvas. */
#sigxAjudaPainel { width: min(420px, 100vw); }
.page { transition: margin-right .3s ease-in-out, padding-left var(--sx-ease); }
body.sigx-ajuda-aberta .page { margin-right: min(420px, 100vw); }
@media (max-width: 991.98px) {
    body.sigx-ajuda-aberta .page { margin-right: 0; }
}
.sigx-ajuda-item-vazio { color: var(--tblr-secondary); }
#sigxAjudaCorpo .list-group-item-action { border-radius: 8px; }

/* ── Fundo dos campos ─────────────────────────────────────────────────────
   Todo input/select/textarea do portal (inclui Financeiro) em #f5f5f5, um degrau
   abaixo do branco do cartão — o campo passa a se ler como campo sem precisar de borda
   mais forte. É UM token do Tabler, e não uma regra por seletor: `--tblr-bg-forms`
   já alimenta .form-control, .form-select, .form-check, input-group e afins.
   Este arquivo carrega DEPOIS do tabler.min.css, então a redefinição em :root vence.

   Só no tema claro. No escuro o texto do campo é claro: #f5f5f5 de fundo deixaria
   texto quase branco sobre cinza quase branco. Lá o token volta ao valor do tema. */
:root {
    --tblr-bg-forms: #f5f5f5;
}

[data-bs-theme="dark"] {
    --tblr-bg-forms: var(--tblr-bg-surface);
}

/* O TomSelect desenha o próprio controle (.ts-control) em vez de usar o <select>, e nem
   toda versão do CSS dele lê o token — o select do sistema inteiro é TomSelect
   (sigx-select.js), então ele tem de acompanhar. */
.ts-wrapper:not(.form-control):not(.form-select) .ts-control,
.ts-control {
    background-color: var(--tblr-bg-forms);
}


/* ── Rolagem das listas dos widgets do dashboard ─────────────────────────────
   Vale para as DUAS superfícies que montam widgets (portal /Index e /Telao):
   as duas linkam este arquivo e as duas usam o mesmo widget-registry.js.

   O widget vive numa célula do Gridstack de altura fixa — lista maior que a
   célula era cortada. A barra é a da MARCA: a cor sai de --tblr-primary-rgb,
   que o telão reescreve com a cor do cliente, então a barra acompanha sem
   ninguém escrever laranja aqui.

   Rolar exige altura limitada, e altura só chega ao fim da cadeia se cada elo
   for flex com min-height:0 (o padrão min-height:auto de um item flex é o
   tamanho do conteúdo — é ele que estoura o card em vez de rolar). Daí os três
   elos: corpo do card, div de conteúdo e a lista. ── */
.sigx-widget-body { min-height: 0; display: flex; flex-direction: column; }
.sigx-widget-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* .d-none é !important — continua ganhando do display:flex acima. */

/* Elo intermediário para o widget que empilha algo antes da lista (cabeçalho,
   linha de números, coluna ao lado do gráfico). */
.sigx-widget-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.sigx-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A barra em si. O Tabler declara scrollbar-color no documento inteiro, e enquanto
   essa propriedade está posta o Chrome desenha a barra do sistema (com as setinhas
   das pontas) e IGNORA os ::-webkit-scrollbar. Por isso são dois caminhos:

     • sem os pseudo-elementos (Firefox): valem as propriedades padrão, com a cor
       da marca no lugar da cinza que o Tabler herda;
     • com eles (Chrome, Safari): as padrão voltam para `auto` — é o que devolve a
       palavra aos pseudo-elementos — e a barra é desenhada aqui, fina, arredondada,
       sem trilho e sem setas. */
@supports not selector(::-webkit-scrollbar) {
    .sigx-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--tblr-primary-rgb, 255, 81, 0), .45) transparent;
    }
    [data-bs-theme="dark"] .sigx-scroll {
        scrollbar-color: rgba(var(--tblr-primary-rgb, 255, 81, 0), .6) transparent;
    }
}

@supports selector(::-webkit-scrollbar) {
    /* O seletor precisa cobrir o tema escuro também: a regra do Tabler que herda a
       cor cinza vem de um seletor mais específico e voltaria a mandar. */
    .sigx-scroll,
    [data-bs-theme="dark"] .sigx-scroll { scrollbar-width: auto; scrollbar-color: auto; }

    .sigx-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .sigx-scroll::-webkit-scrollbar-track { background: transparent; }
    .sigx-scroll::-webkit-scrollbar-thumb {
        background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .35);
        border-radius: 999px;
    }
    .sigx-scroll:hover::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .55); }
    .sigx-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .8); }
    .sigx-scroll::-webkit-scrollbar-corner { background: transparent; }
    /* As setas das pontas voltam sozinhas no Windows e estragam a barra fina. */
    .sigx-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

    /* No escuro o polegar com pouca opacidade some no fundo. */
    [data-bs-theme="dark"] .sigx-scroll::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .5); }
    [data-bs-theme="dark"] .sigx-scroll:hover::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .72); }
}

.sigx-scroll { padding-right: 2px; }

/* ---- Barra de botões do cabeçalho da página (@section content_toolbar) ----
   O layout (Application.cshtml) envolve a seção em .sigx-page-toolbar: os botões ficam
   SEMPRE numa linha só, nunca empilhados. Vale para tudo o que as páginas põem ali —
   .dropdown (⋮) e <form> são blocos e quebravam a linha; .btn-list e .flex-wrap quebravam
   quando faltava espaço. Se mesmo assim não couber (celular estreito), os botões com texto
   encolhem e o rótulo termina em reticências (o ícone fica à vista); ⋮ e botões só-ícone não
   encolhem. Sem overflow na barra: um overflow cortaria o menu do ⋮. */
.sigx-page-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.sigx-page-toolbar > *,
.sigx-page-toolbar > :is(.btn-list, .d-flex, .d-inline-flex) > * {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.sigx-page-toolbar > :is(.btn-list, .d-flex, .d-inline-flex) {
    flex-wrap: nowrap !important;
    flex-shrink: 1;
    min-width: 0;
}
.sigx-page-toolbar > form,
.sigx-page-toolbar > :is(.btn-list, .d-flex, .d-inline-flex) > form {
    display: inline-flex;
    flex-shrink: 1;
    min-width: 0;
}
/* Encolher só abaixo do lg: no desktop tudo cabe e o .btn mantém o inline-flex do Tabler.
   inline-block porque text-overflow não vale no inline-flex. Botões com d-flex/d-*-inline-flex
   (display !important) ficam de fora e simplesmente não encolhem. */
@media (max-width: 991.98px) {
    .sigx-page-toolbar > .btn:not(.btn-icon):not([class*="flex"]),
    .sigx-page-toolbar > form > .btn:not(.btn-icon):not([class*="flex"]),
    .sigx-page-toolbar > :is(.btn-list, .d-flex, .d-inline-flex) > .btn:not(.btn-icon):not([class*="flex"]),
    .sigx-page-toolbar > :is(.btn-list, .d-flex, .d-inline-flex) > form > .btn:not(.btn-icon):not([class*="flex"]) {
        display: inline-block;
        flex-shrink: 1;
        min-width: 2.5rem;
        max-width: 100%;            /* <form class="d-inline">: o form não vira flex (!important) */
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* Modo compacto (.sx-compacto, ligado pelo layout quando algum rótulo da barra seria
   cortado): "←…" e "Marca…" não dizem nada. Os botões secundários com ícone viram só
   ícone e a ação primária fica com o rótulo inteiro. O texto continua no DOM (leitor de
   tela lê) e o layout copia para o title. Botão sem ícone não entra: ficaria vazio; botão de
   grupo também não (o contador do atualizar do Dashboard sumia). */
.sigx-page-toolbar.sx-compacto .btn:not(.btn-primary):not(.btn-icon):not(.btn-group > .btn):has(> .ti) {
    display: inline-flex;
    align-items: center;
    font-size: 0;
    flex-shrink: 0;
    min-width: 0;
    padding-inline: .625rem;
}
.sigx-page-toolbar.sx-compacto .btn:not(.btn-primary):not(.btn-icon):not(.btn-group > .btn):has(> .ti) > .ti {
    font-size: 1.125rem;
    line-height: 1.25rem;
    margin: 0 !important;
}

/* =====================================================================
   PÁGINA DE DETALHE — padrão do design system (seção "Página de detalhe"
   em design-system.html; guia completo em docs/padrao-pagina-detalhe.md).
   ===================================================================== */

/* ---- Listas e tabelas com rolagem própria ----
   Toda lista/tabela de detalhe que pode crescer sem limite (telas, usos, histórico,
   itens) fica dentro de .sigx-lista-scroll: ~5 itens visíveis (18,5rem), barra fina
   na cor da marca e o scroll não "vaza" para a página. -8 = ~8 itens. Em tabela,
   o <thead> fica grudado no topo enquanto rola. */
.sigx-lista-scroll { max-height: 18.5rem; overflow-y: auto; overscroll-behavior: contain; }
.sigx-lista-scroll-8 { max-height: 26rem; }
.sigx-lista-scroll-alta { max-height: calc(100vh - 2rem); }
.sigx-lista-scroll > table > thead > tr > th,
.sigx-lista-scroll > .table > thead > tr > th {
    position: sticky; top: 0; z-index: 1;
    background: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface));
}
@supports not selector(::-webkit-scrollbar) {
    .sigx-lista-scroll, .sigx-usos-scroll-5 {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--tblr-primary-rgb, 255, 81, 0), .45) transparent;
    }
}
@supports selector(::-webkit-scrollbar) {
    .sigx-lista-scroll, .sigx-usos-scroll-5,
    [data-bs-theme="dark"] .sigx-lista-scroll, [data-bs-theme="dark"] .sigx-usos-scroll-5 { scrollbar-width: auto; scrollbar-color: auto; }
    .sigx-lista-scroll::-webkit-scrollbar, .sigx-usos-scroll-5::-webkit-scrollbar { width: 6px; height: 6px; }
    .sigx-lista-scroll::-webkit-scrollbar-track, .sigx-usos-scroll-5::-webkit-scrollbar-track { background: transparent; }
    .sigx-lista-scroll::-webkit-scrollbar-thumb, .sigx-usos-scroll-5::-webkit-scrollbar-thumb {
        background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .4); border-radius: 999px;
    }
    .sigx-lista-scroll::-webkit-scrollbar-button, .sigx-usos-scroll-5::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    [data-bs-theme="dark"] .sigx-lista-scroll::-webkit-scrollbar-thumb,
    [data-bs-theme="dark"] .sigx-usos-scroll-5::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .55); }
}

/* ---- Lateral grudada (Ticket, Wiki) ----
   Sticky só no desktop e nunca mais alta que a janela: o fim da lateral sempre alcançável. */
@media (min-width: 992px) {
    .sigx-sticky { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- Grade de dados "rótulo em cima, valor embaixo" (card Dispositivo, Local e público) ----
   Valores técnicos ganham .font-monospace no <dd>. */
.sigx-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.sigx-grade-2 dt { font-weight: 400; color: var(--tblr-secondary); font-size: .78rem; }
.sigx-grade-2 dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .sigx-grade-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Caixa de prévia de mídia: fundo neutro (nunca azul-marinho) ---- */
.sigx-preview-box { background: #0f0f0f; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sigx-preview-box > img, .sigx-preview-box > video { max-width: 100%; max-height: 100%; display: block; }

/* ---- Zonas do canal: paleta quente + número + resolução da zona ----
   A grade usa as mesmas colunas/linhas do layout; cada bloco mostra o número da
   zona e, quando a tela informou a resolução, os pixels da zona (.sigx-zona-res).
   As cores seguem a ordem da zona (1..6) e se repetem a partir da 7ª. */
.sigx-zonas {
    display: grid; gap: 0; padding: 2px; max-width: 100%;
    background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: 10px;
}
.sigx-zona {
    border-radius: 6px; color: #fff; min-width: 0; min-height: 0; margin: 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-family: var(--tblr-font-monospace); font-weight: 700; font-size: .8rem; line-height: 1.1;
}
.sigx-zona-res { font-weight: 400; font-size: .68rem; opacity: .92; }
.sigx-zona-1 { background: #FF5100; } .sigx-zona-2 { background: #C23100; } .sigx-zona-3 { background: #FF9050; color: #3D0800; }
.sigx-zona-4 { background: #8B1A00; } .sigx-zona-5 { background: #F59F00; color: #3D2C00; } .sigx-zona-6 { background: #6B6B73; }
.sigx-zona-7 { background: #3D0800; } .sigx-zona-8 { background: #FFB894; color: #3D0800; }
.sigx-zona-dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.sigx-zona-dot.sigx-zona-3, .sigx-zona-dot.sigx-zona-5, .sigx-zona-dot.sigx-zona-8 { color: inherit; }

/* ---- Índice "Nesta página" (artigos longos) ---- */
.sigx-toc a { color: var(--tblr-secondary); display: block; padding: .3rem 0 .3rem .75rem; border-left: 2px solid var(--tblr-border-color); text-decoration: none; }
.sigx-toc a:hover { color: var(--tblr-body-color); }
.sigx-toc a.is-ativo { color: var(--tblr-primary); border-left-color: var(--tblr-primary); }
.sigx-toc a.nivel-3 { padding-left: 1.5rem; font-size: .85rem; }

/* .visually-hidden (position:absolute) dentro de uma tabela rolável escapava do recorte e
   fazia a página inteira rolar na horizontal no celular: a rolagem vira o bloco de contenção. */
.table-responsive { position: relative; }

/* Estado vazio com ícone de fonte (<i class="ti">): o .empty-icon do Tabler só dimensiona svg. */
.empty-icon > .ti { font-size: 2.5rem; line-height: 1; }

#dashboard-grid .grid-stack-item-content > .card {
    border-radius: 16px;
    border: 1px solid var(--tblr-border-color-translucent, rgba(15, 23, 42, .08));
    background: var(--tblr-bg-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -16px rgba(15, 23, 42, .18);
    transition: box-shadow .2s ease, border-color .2s ease;
}
#dashboard-grid .grid-stack-item-content > .card:hover {
    border-color: rgba(var(--tblr-primary-rgb), .22);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 16px 36px -18px rgba(15, 23, 42, .28);
}
#dashboard-grid .card-header {
    background: transparent;
    padding: 1rem 1.1rem .35rem !important;
    gap: .5rem;
    flex-wrap: nowrap;
}
#dashboard-grid .card-title {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#dashboard-grid .card-title > i.ti:first-child {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    margin-right: .65rem !important;
    border-radius: 10px;
    font-size: 1.05rem;
    color: var(--tblr-primary) !important;
    background: rgba(var(--tblr-primary-rgb), .1);
}
#dashboard-grid .card-header .subheader { font-size: .66rem; letter-spacing: .08em; white-space: nowrap; }
#dashboard-grid .card-header .badge { border-radius: 999px; font-weight: 600; padding: .3em .65em; }
#dashboard-grid .card-header .link-secondary {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    opacity: .65;
    transition: background-color .15s, opacity .15s;
}
#dashboard-grid .card-header .link-secondary:hover { opacity: 1; background: var(--tblr-bg-surface-secondary); }
#dashboard-grid .card-body { padding: .75rem 1.1rem 1rem; }
#dashboard-grid .list-group-item { border-color: var(--tblr-border-color-translucent); background: transparent; }
#dashboard-grid .progress { border-radius: 999px; background: rgba(var(--tblr-secondary-rgb, 100, 116, 139), .12); }

#dashboard-grid .sx-kpi .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .35rem;
    padding: .95rem 1.1rem;
}
.sx-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sx-kpi-label {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tblr-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sx-kpi-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1.1rem;
}
.sx-kpi-linha { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.sx-kpi-val {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.sx-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}
.sx-kpi-trend.up { color: var(--tblr-success); background: rgba(var(--tblr-success-rgb), .12); }
.sx-kpi-trend.down { color: var(--tblr-danger); background: rgba(var(--tblr-danger-rgb), .12); }
.sx-kpi-bar { height: 6px; margin-bottom: .35rem; }
.sx-kpi-sub { font-size: .76rem; color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sx-passo {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .75rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--tblr-border-color-translucent);
    transition: border-color .15s, background-color .15s;
}
.sx-passo:hover { border-color: rgba(var(--tblr-primary-rgb), .35); }
.sx-passo-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), .1);
}
.sx-passo.feito { background: rgba(var(--tblr-success-rgb), .07); border-color: transparent; }
.sx-passo.feito .sx-passo-ico { color: #fff; background: var(--tblr-success); border-radius: 50%; }
.sx-passo.feito .fw-semibold { text-decoration: line-through; color: var(--tblr-secondary); }

.sx-edit-hint {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 .5rem .75rem;
    padding: .65rem .9rem;
    border-radius: 12px;
    font-size: .85rem;
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), .08);
    border: 1px dashed rgba(var(--tblr-primary-rgb), .35);
}
.sx-edit-hint.d-none { display: none !important; }
.sx-edit-hint > .ti { font-size: 1.25rem; }

.sx-catalogo .modal-body { max-height: 65vh; }
.sx-cat-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem .9rem;
    text-align: left;
    border-radius: 12px;
    border: 1px solid var(--tblr-border-color-translucent);
    background: var(--tblr-bg-surface);
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sx-cat-item:not(:disabled):hover {
    border-color: rgba(var(--tblr-primary-rgb), .45);
    box-shadow: 0 8px 22px -14px rgba(var(--tblr-primary-rgb), .6);
    transform: translateY(-1px);
}
.sx-cat-item:disabled { opacity: .55; cursor: default; }
.sx-cat-ico {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    font-size: 1.25rem;
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), .1);
}
.sx-cat-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; white-space: normal; }
.sx-cat-acao {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--tblr-secondary);
    background: var(--tblr-bg-surface-secondary);
}
.sx-cat-item:not(:disabled):hover .sx-cat-acao { color: #fff; background: var(--tblr-primary); }
.sx-cat-item:disabled .sx-cat-acao { color: var(--tblr-success); }

[data-bs-theme="dark"] #dashboard-grid .grid-stack-item-content > .card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .6);
}

/* =====================================================================
   VOTAÇÃO DE MELHORIAS (/Melhorias) — linha com o botão de voto à esquerda
   (padrão Canny/Featurebase): seta + total; laranja quando a empresa votou.
   ===================================================================== */
.ml-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ml-item-corpo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; text-decoration: none; }
.ml-item-corpo:hover, .ml-item-corpo:focus { text-decoration: none; }
.ml-item-corpo:hover .ml-item-titulo { color: var(--tblr-primary); }
.ml-item-titulo { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ml-item-resumo {
    color: var(--tblr-secondary); font-size: .88rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ml-voto {
    flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 3.4rem; min-height: 3.6rem; padding: .3rem; border-radius: 12px; line-height: 1;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); color: var(--tblr-body-color);
    transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.ml-voto i { font-size: 1.35rem; }
.ml-voto-n { font-family: 'Space Mono', monospace; font-size: .9rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; }
button.ml-voto:hover { border-color: var(--tblr-primary); color: var(--tblr-primary); }
button.ml-voto:active { transform: scale(.96); }
button.ml-voto:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .3); }
.ml-voto.is-votado { background: rgba(var(--tblr-primary-rgb), .1); border-color: var(--tblr-primary); color: var(--tblr-primary); }
.ml-voto.is-fixo { color: var(--tblr-secondary); }
.ml-voto.is-pulso i { animation: ml-voto-pulso .45s ease-out; }
.ml-voto.is-pulso { animation: ml-voto-anel .6s ease-out; }
@keyframes ml-voto-pulso { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.25); } 100% { transform: translateY(0) scale(1); } }
@keyframes ml-voto-anel { 0% { box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), .45); } 100% { box-shadow: 0 0 0 10px rgba(var(--tblr-primary-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .ml-voto.is-pulso, .ml-voto.is-pulso i { animation: none; } }
.ml-corpo img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--tblr-border-color); }
.ml-roadmap {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr);
    gap: .75rem; padding: .75rem; overflow-x: auto; scroll-snap-type: x proximity;
}
.ml-roadmap.is-edicao { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); overflow: visible; }
.ml-roadmap-mes {
    display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: .6rem;
    border-radius: 12px; background: var(--tblr-bg-surface-secondary); scroll-snap-align: start;
}
.ml-roadmap-mes.is-atual { box-shadow: inset 0 0 0 1px rgba(var(--tblr-primary-rgb), .45); }
.ml-roadmap-cab { display: flex; align-items: baseline; gap: .35rem; padding: 0 .15rem; }
.ml-roadmap-vazio { color: var(--tblr-secondary); font-size: .82rem; padding: .25rem .15rem; }
.ml-roadmap-item {
    display: flex; flex-direction: column; gap: .35rem; padding: .55rem .6rem; text-decoration: none;
    border-radius: 10px; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color);
}
a.ml-roadmap-item:hover { border-color: var(--tblr-primary); text-decoration: none; }
.ml-roadmap-item.is-continua { border-style: dashed; background: transparent; }
.ml-roadmap-titulo { font-weight: 600; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.ml-resultado { list-style: none; counter-reset: ml-pos; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ml-resultado li { counter-increment: ml-pos; }
.ml-resultado-item {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .5rem .75rem; text-decoration: none;
    border-radius: 10px; border: 1px solid var(--tblr-border-color);
}
.ml-resultado-item::before {
    content: counter(ml-pos); font-family: 'Space Mono', monospace; font-weight: 700; width: 1.6rem; height: 1.6rem;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(var(--tblr-yellow-rgb), .18); color: var(--tblr-yellow);
}
a.ml-resultado-item:hover { border-color: var(--tblr-primary); text-decoration: none; }
.ml-ciclo-barra { flex: 1 1 100%; }
.ml-carregando { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* Quill (editores de texto rico da wiki e das melhorias): as cores do Quill são fixas no CSS
   dele — reamarradas aos tokens do tema para o modo escuro não virar caixa branca. O prefixo
   body vence o quill.snow.css, que as páginas carregam DEPOIS deste arquivo (section styles). */
body .ql-toolbar.ql-snow, body .ql-container.ql-snow { border-color: var(--tblr-border-color); }
body .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: var(--tblr-bg-surface-secondary); }
body .ql-container.ql-snow { border-radius: 0 0 8px 8px; background: var(--tblr-bg-surface); color: var(--tblr-body-color); }
body .ql-snow .ql-stroke { stroke: var(--tblr-body-color); }
body .ql-snow .ql-fill { fill: var(--tblr-body-color); }
body .ql-snow .ql-picker { color: var(--tblr-body-color); }
body .ql-snow .ql-picker-options { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); }
body .ql-editor.ql-blank::before { color: var(--tblr-secondary); font-style: normal; }
body .ql-snow .ql-active .ql-stroke { stroke: var(--tblr-primary); }
body .ql-snow .ql-active .ql-fill { fill: var(--tblr-primary); }
body .ql-snow .ql-active { color: var(--tblr-primary); }

/* ── Cadeia da programação (Shared/_CadeiaProgramacao) ─────────────────────────
   Conteúdo → Playlist → Canal → Tela nos estados vazios, com o passo atual em destaque. */
.sx-cadeia nav { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem; font-size: .875rem; }
.sx-cadeia nav .ti { color: var(--tblr-secondary); }
.sx-cadeia-atual { font-weight: 600; color: var(--sigx-acao-texto); background: var(--tblr-primary-lt); padding: .125rem .5rem; border-radius: 999px; }

/* ── Rodapé dos assistentes (sigx-wizard) ──────────────────────────────────────
   Voltar à esquerda, Próximo/Salvar à direita, preso ao pé da tela em passo longo. */
.wz-actions { position: sticky; bottom: 0; z-index: 2; background: var(--tblr-bg-surface); padding-bottom: .75rem; }

select[data-sigx-etiqueta]:has(option[value=""]:checked),
select[data-sigx-etiqueta] + .ts-wrapper .ts-control > input::placeholder {
    color: var(--tblr-placeholder-color, var(--tblr-secondary-color, #6c757d));
    opacity: 1;
}
.input-icon > select[data-sigx-etiqueta],
.input-icon > .ts-wrapper .ts-control { padding-left: 2.5rem !important; }
.input-icon > .ts-wrapper { width: 100%; }
.input-icon:has(> .ts-wrapper) > .input-icon-addon { z-index: 2; }