/* signalis — tokens de design e shell da aplicação.
 * Fonte da verdade visual: design/export/signalis-4a-4b.html (bloco #exp4b).
 * Regra: views nunca usam hex solto — sempre var(--sig-*). */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-4174eadd.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-ext-9bfce057.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}

:root {
  --sig-bg: #f8fafc;
  --sig-surface: #f1f5f9;
  --sig-card: #ffffff;
  --sig-border: #e2e8f0;
  --sig-border-hover: #cbd5e1;
  --sig-text: #0f172a;
  --sig-text-muted: #475569;
  --sig-text-faint: #94a3b8;
  --sig-accent: #8bc34a;
  --sig-accent-strong: #7cb342;
  --sig-accent-soft: #f1f8e9;
  --sig-alarm: #ef4444;
  --sig-alarm-bg: #fef2f2;
  --sig-warn: #f59e0b;
  --sig-warn-bg: #fffbeb;
  --sig-ok: #10b981;
  --sig-ok-bg: #ecfdf5;
  --sig-radius-card: 14px;
  --sig-radius-control: 10px;
  --sig-shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --sig-shadow-raised: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --sig-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* O produto tem UMA aparencia, clara. Sem declarar `color-scheme`, o navegador
     desenha os controles NATIVOS (menu do <select>, seletor de data) seguindo o
     tema do SISTEMA: em macOS no escuro, o menu do select sai escuro sobre a
     pagina clara e o texto fica quase ilegivel. Achado no UAT do Eric em
     2026-08-29; nao e artefato de emulacao, acontece no aparelho dele. */
  color-scheme: light;
}

.sig-app {
  min-height: 100dvh;
  display: flex;
  background: var(--sig-bg);
  color: var(--sig-text);
  font-family: var(--sig-font);
  margin: 0;
}

/* Sidebar (design 4b: 210px, itens 12.5px/600, ativo em card claro) */

.sig-sidebar {
  width: 210px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 14px;
}

.sig-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 18px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Logo do tenant (WL-10) nos headers de login/públicas: limita ao porte da
 * marca signalis — sem regra, um upload grande renderia em tamanho natural
 * e estouraria o header. */
.sig-branding-logo {
  max-height: 28px;
  max-width: 200px;
}

/* Selo de co-branding (COBR-01): acompanha o logo do tenant no login e nas
 * páginas públicas/TV — discreto, herda os tokens do tema corrente. */
.sig-powered-by {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sig-text-faint);
  white-space: nowrap;
}

.sig-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sig-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--sig-radius-control);
  font-size: 13px;
  font-weight: 600;
  color: var(--sig-text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
}

.sig-nav-item svg {
  flex: none;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sig-nav-item:hover {
  color: var(--sig-text);
  background: rgba(226, 232, 240, 0.4);
}

.sig-nav-item:hover svg {
  opacity: 1;
  transform: translateX(1px);
}

.sig-nav-item--active {
  background: var(--sig-card);
  box-shadow: var(--sig-shadow-raised);
  font-weight: 700;
  color: var(--sig-accent-strong);
  border: 1px solid var(--sig-border);
}

.sig-nav-item--active svg {
  opacity: 1;
  stroke: var(--sig-accent-strong);
}

/* Faixa de totais da tabela por prioridade no estreito (2026-08-30): quando ha coluna
   escondida, a linha do <tfoot> deixa de ter uma celula por coluna e vira uma faixa so —
   os mesmos pares "rotulo: valor", um do lado do outro, quebrando quando precisar. Sem
   isto os totais sairiam do celular junto com as colunas que os sustentam. */
.sig-tabela-rodape-faixa {
  text-align: left;
  font-size: 12px;
  color: var(--sig-text-muted);
  line-height: 1.7;
}

/* Menu agrupado (MENU-07/08, 2026-08-30) — o primeiro nivel tinha 24 itens numa lista plana,
   1020px na gaveta do celular contra 812 de tela. Sao 9 linhas agora, e o submenu abre em
   acordeao.

   A linha do grupo e' UM controle: o <summary> do <details>. A primeira versao tinha dois (um
   link que navegava e um botao que abria) e o UAT do Eric pegou na hora — parecia dois links, e
   so um dos dois fechava. Aqui a linha inteira e' o alvo, e a seta e' desenho dentro dela. */
.sig-nav-item--grupo {
  cursor: pointer;
  list-style: none;
}

.sig-nav-item--grupo::-webkit-details-marker,
.sig-nav-item--grupo::marker {
  display: none;
  content: "";
}

.sig-nav-item--grupo span {
  flex: 1;
  min-width: 0;
}

/* MENU-04: o cabecalho do grupo que contem a tela atual escurece, mas NAO vira pilula — a
   pilula e' do item, e o item ativo esta logo abaixo, no submenu. Duas marcacoes na mesma
   coluna competem e nenhuma das duas se le. */
.sig-nav-item--corrente {
  color: var(--sig-text);
  font-weight: 700;
}

.sig-nav-item--corrente svg {
  opacity: 1;
}

.sig-nav-item--grupo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A seta e' INDICADOR, nao controle: sem caixa propria, sem hover proprio, sem alvo de clique
   separado. Ela gira a partir do [open] do <details> — o mesmo estado que abre o painel, e nao
   uma classe paralela que possa dessincronizar. */
.sig-nav-seta {
  flex: none;
  opacity: 0.45;
  transition: transform 0.18s ease;
}

.sig-nav-grupo[open] > .sig-nav-item--grupo .sig-nav-seta {
  transform: rotate(90deg);
}

/* O trilho a esquerda amarra os filhos ao grupo: sem ele, um submenu aberto no meio da lista
   vira um bloco de itens soltos, indistinguivel do primeiro nivel. */
.sig-nav-subs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 11px;
  padding: 2px 0 6px 14px;
  border-left: 1px solid var(--sig-border);
}

.sig-nav-sub {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sig-text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sig-nav-sub:hover {
  background: rgba(226, 232, 240, 0.55);
  color: var(--sig-text);
}

.sig-nav-sub--active {
  background: var(--sig-accent-soft);
  color: var(--sig-accent-strong);
  font-weight: 700;
}

.sig-nav-item:focus-visible,
.sig-nav-sub:focus-visible,
.sig-nav-item--grupo:focus-visible {
  outline: 2px solid var(--sig-accent);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .sig-nav-seta {
    transition: none;
  }
}

/* Área principal */

.sig-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 24px 10px;
}

/* SYS-01: espaçamento vertical consistente entre blocos irmãos da página
   (cards, toolbars). Gap só existe entre irmãos — card único fica sem sobra;
   grids internos (gridstack/mapa/TV) vivem dentro dos próprios cards, intocados. */
.sig-main > main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Toolbar como filha direta de main: o gap já espaça — evita somar 14px + 16px.
   Dentro de cards a margem interna original permanece. */
.sig-main > main > .sig-toolbar {
  margin-bottom: 0;
}

.sig-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sig-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  border-radius: var(--sig-radius-control);
  background: var(--sig-card);
  color: var(--sig-text);
  box-shadow: var(--sig-shadow-raised);
  cursor: pointer;
}

.sig-card {
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 18px 22px;
  box-shadow: var(--sig-shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sig-card:hover {
  border-color: var(--sig-border-hover);
}

/* Hero Telemetry Component (destaque para temperatura, umidade e leituras) */
.sig-telemetry-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.sig-telemetry-card {
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 16px 20px;
  box-shadow: var(--sig-shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sig-telemetry-card:hover {
  box-shadow: var(--sig-shadow-raised);
}

.sig-telemetry-card--temp {
  border-left: 4px solid var(--sig-accent);
}

.sig-telemetry-card--umidade {
  border-left: 4px solid #06b6d4;
}

.sig-telemetry-card--alarm {
  border-left: 4px solid var(--sig-alarm);
  background: var(--sig-alarm-bg);
}

.sig-telemetry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sig-telemetry-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sig-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sig-telemetry-value-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 8px;
}

.sig-telemetry-value {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sig-text);
}

.sig-telemetry-value--alarm {
  color: var(--sig-alarm);
}

.sig-telemetry-unit {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.sig-telemetry-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--sig-text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sig-page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Galeria de Integrações */
.sig-integration-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 20px;
  background: var(--sig-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sig-integration-card:hover {
  box-shadow: var(--sig-shadow-raised);
}

.sig-integration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sig-page-subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--sig-text-faint);
}

.sig-empty-state {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.sig-empty-state p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sig-text-muted);
}

.sig-empty-state .sig-settings-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Dispositivos (C1): toolbar de filtros, tabela e chips de tag (DEV-07/18) */

.sig-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sig-filters,
.sig-filter-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sig-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.sig-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sig-text-faint);
  border-bottom: 1px solid var(--sig-border);
}

.sig-table td {
  padding: 12px;
  border-bottom: 1px solid var(--sig-border);
  color: var(--sig-text-muted);
  vertical-align: middle;
  transition: background-color 0.15s ease;
}

.sig-table tbody tr:hover td {
  background-color: rgba(248, 250, 252, 0.8);
}

.sig-table-name {
  color: var(--sig-text);
  font-weight: 600;
}

.sig-tag {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 4px 2px 0;
  border-radius: 999px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  font-size: 11px;
  color: var(--sig-text-muted);
}

/* Wizard e credencial show-once (C3 / DEV-05/11) */

.sig-sensor-picker {
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 12px;
}

.sig-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 12px 4px 0;
  font-size: 12.5px;
  color: var(--sig-text-muted);
}

.sig-credential-value {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--sig-radius-control);
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  font-size: 13px;
  letter-spacing: 0.5px;
  user-select: all;
}

.sig-credential-warning {
  color: var(--sig-warn);
  font-weight: 600;
}

/* Árvore de grupos (C4 / DEV-01..04) */

.sig-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sig-tree .sig-tree {
  padding-left: 20px;
  border-left: 2px dashed var(--sig-border);
  margin-left: 8px;
  margin-top: 4px;
}

.sig-tree-node {
  padding: 3px 0;
}

.sig-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: var(--sig-radius-control);
  transition: all 0.15s ease;
  width: 100%;
  /* `width: 100%` em caixa de CONTEUDO nao e' 100%: os 8px de padding e os 2 de
     borda entram por fora, e a linha passava 10px do card em TODA largura (a
     320px, 37..293 contra um interior de 37..283). Passava despercebido porque a
     linha nao tem fundo proprio ate' o hover — mas o `:hover` pinta fundo e
     borda, e era esse retangulo que vazava. */
  box-sizing: border-box;
}

.sig-tree-row:hover {
  background: var(--sig-surface);
  border-color: var(--sig-border);
}

.sig-tree-icon {
  color: var(--sig-accent-strong);
  flex-shrink: 0;
}

/* O nome do grupo e' a UNICA parte elastica da linha. O icone ja e' `flex-shrink:
   0`, e o contador e o botao "Editar" precisam continuar legiveis inteiros — quem
   cede e' o nome. Sem isto a linha herdava a largura INTRINSECA do nome (o padrao
   `min-width: auto` de item flex) e o "Editar" era empurrado para fora do card: a
   320px, 260..316 contra um card de 14..306. Vale em toda largura, e nao so' no
   telefone, porque um nome longo o bastante estoura em qualquer uma. */
.sig-tree-row > .sig-member-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sig-tree-row > .sig-badge--group-count,
.sig-tree-row > .sig-tree-actions {
  flex-shrink: 0;
}

.sig-badge--group-count {
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  color: var(--sig-text-muted);
  transition: all 0.15s ease;
}

.sig-badge--group-count:hover {
  background: var(--sig-accent-soft);
  color: var(--sig-accent-strong);
  border-color: var(--sig-accent-strong);
}

.sig-tree-actions {
  position: relative;
  margin-left: auto;
}

.sig-tree-actions summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sig-tree-actions summary::-webkit-details-marker {
  display: none;
}

.sig-tree-editor {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 30;
  width: 340px;
  max-width: calc(100vw - 32px);
  /* Sem `border-box` o `width` e o `max-width` valem para a caixa de CONTEUDO, e
     os 32px de padding mais 2 de borda entram POR FORA: o popover declarado com
     340 media 374, e o teto de `100vw - 32px` (288 a 320px de tela) virava 322 —
     2px mais largo que a propria tela que ele dizia respeitar. A folha nao tem
     `box-sizing` global (e' declarado por componente), entao a declaracao e' aqui. */
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  box-shadow: var(--sig-shadow-raised);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Importação CSV (DEV-16/17) */
.sig-dropzone {
  border: 2px dashed var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 36px 24px;
  text-align: center;
  background: var(--sig-surface);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.sig-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.sig-dropzone:hover,
.sig-dropzone--active {
  border-color: var(--sig-accent-strong);
  background: var(--sig-accent-soft);
}

.sig-dropzone-icon {
  color: var(--sig-accent-strong);
  margin-bottom: 12px;
}

.sig-dropzone-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--sig-text);
  margin-bottom: 4px;
}

.sig-dropzone-filename {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--sig-text);
}

.sig-csv-sample {
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 12px 14px;
  font-family: var(--sig-font-mono, monospace);
  font-size: 11.5px;
  color: var(--sig-text);
  overflow-x: auto;
  white-space: pre;
}

/* Mobile: sidebar colapsada, botão de menu visível (FUND-06) */

@media (max-width: 767px) {
  .sig-sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 10;
    background: var(--sig-bg);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sig-sidebar--open {
    transform: none;
  }

  /* A gaveta ROLA. Com 23 itens de navegacao ela mede 969px, e num telefone de
     812px de altura os ultimos 157px ficavam inalcancaveis — `SIMs / M2M` era o
     primeiro a sumir. `overflow-y: visible` nao rola, e nao ha barra da pagina
     por tras porque a gaveta e `position: fixed`.
     `overscroll-behavior: contain` impede o encadeamento: sem ele, ao chegar no
     fim do menu o dedo passa a arrastar a pagina que esta atras do scrim. */
  .sig-sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sig-topbar {
    align-items: flex-start;
    gap: 8px;
  }

  .sig-menu-button {
    display: flex;
    align-self: flex-start;
    margin-top: 1px;
  }

  .sig-topbar > div {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
  }

  .sig-page-title {
    font-size: 17px;
    line-height: 1.25;
  }

  .sig-page-subtitle {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 2px;
  }

  .sig-org-menu {
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
    margin-top: 1px;
  }

  .sig-org-current {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: var(--sig-radius-control);
  }

  .sig-org-icon {
    display: block !important;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    color: var(--sig-text);
  }

  .sig-org-name,
  .sig-org-chevron {
    display: none !important;
  }

  .sig-user-menu {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 1px;
  }

  .sig-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .sig-sidebar--open + .sig-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgba(44, 51, 44, 0.28);
  }

  .sig-main {
    padding: 16px;
  }
}

.sig-scrim {
  display: none;
}

/* Telas de autenticação (card centrado, sem sidebar — feature autenticacao) */

/* ACS-03: o fundo deixa de ser chapado. Halo do ACENTO no alto e uma malha fina que
 * some nas bordas — os dois derivados de token por `color-mix`, e nao de cor propria,
 * porque esta e a unica tela do produto que roda com a cor de OUTRA marca (WL-10):
 * um rgba() fixo aqui apareceria verde signalis sobre o login de um tenant azul.
 * `overflow: hidden` porque a malha e um filho absoluto de altura total. */
.sig-auth {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(760px 340px at 50% -12%,
      color-mix(in srgb, var(--sig-accent) 20%, transparent), transparent 68%),
    var(--sig-bg);
  color: var(--sig-text);
  font-family: var(--sig-font);
}

.sig-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--sig-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sig-text) 5%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(560px 420px at 50% 40%, #000 10%, transparent 78%);
  mask-image: radial-gradient(560px 420px at 50% 40%, #000 10%, transparent 78%);
  pointer-events: none;
}

/* `z-index` porque o ::before acima e irmao mais velho no mesmo contexto. */
.sig-auth-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: sig-auth-entrada 180ms ease-out both;
}

/* ACS-12: um unico fade com 6px de subida. Nada pulsa, nada flutua. */
@keyframes sig-auth-entrada {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sig-auth-main { animation: none; }
}

.sig-auth-brand {
  justify-content: center;
  padding: 0;
}

/* ACS-02: a sombra do sistema (`--sig-shadow-card`, 1px) foi desenhada para card em
 * LISTA, onde os vizinhos dao a profundidade. Sozinho sobre fundo chapado ela nao
 * existe, e o card vira um retangulo desenhado. Aqui ele flutua. */
.sig-auth-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 26px 26px;
  border-radius: 18px;
  box-shadow:
    0 20px 44px -16px color-mix(in srgb, var(--sig-text) 16%, transparent),
    0 3px 8px -3px color-mix(in srgb, var(--sig-text) 6%, transparent);
}

/* ACS-04: cabecalho CENTRADO, fechado por uma divisoria de largura cheia. A marca e o
 * rodape ja estao no eixo central; o titulo puxando para a esquerda deixava tres blocos
 * em dois eixos sem nada explicando a troca. A divisoria e o que faz o formulario
 * alinhado a esquerda, logo abaixo, parecer decisao e nao descuido. */
.sig-auth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* Recuo de proposito: 800/-0.4px copiava a linguagem do proprio wordmark logo acima
 * (largo, espacado, pesado) e as duas vozes competiam. Aqui o titulo cede. */
.sig-auth-title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.sig-auth-subtitle {
  margin: 0;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sig-text-muted);
  text-wrap: balance;
}

/* Margem negativa = o respiro lateral do card, para a linha sangrar de borda a borda. */
.sig-auth-divider {
  height: 1px;
  margin: 3px -26px 1px;
  background: var(--sig-border);
}

/* ACS-14: a saida da tela fica no topo do card, com seta — nao como ultimo elemento
 * da pagina, depois do botao. */
.sig-auth-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sig-text-muted);
  text-decoration: none;
}

.sig-auth-back:hover {
  color: var(--sig-text);
}

/* ACS-07: o link de senha vive na LINHA DO ROTULO, que e onde o olho esta no instante
 * em que ele faz falta. */
.sig-auth-labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sig-auth-labelrow a {
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-accent-strong);
  text-decoration: none;
}

.sig-auth-labelrow a:hover {
  text-decoration: underline;
}

/* ACS-05: 44px SO aqui. O padrao de 38px (Eric, 2026-08-29) existe para densidade em
 * tela cheia de controles; esta tem dois campos e um botao, e alvo maior no celular
 * vale mais que densidade. Escopado para nao vazar para o resto do app. */
.sig-auth .sig-input:not(textarea) {
  height: 44px;
}

.sig-auth .sig-input {
  border-radius: 11px;
  font-size: 13.5px;
}

.sig-auth .sig-label {
  font-size: 11.5px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

/* ACS-06: halo em vez de contorno duro — o mesmo desenho que `.sig-input--error` ja
 * usa para o vermelho. O `outline` transparente fica de proposito: no modo de alto
 * contraste do sistema o navegador pinta o contorno e o foco sobrevive sem o halo. */
.sig-auth .sig-input:focus {
  outline: 2px solid transparent;
  outline-offset: 1px;
  border-color: var(--sig-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-accent) 26%, transparent);
}

/* ACS-10: e a unica acao da tela — pode parecer o destino, e nao mais um controle da
 * fileira. O :hover proprio existe porque o `.sig-button:hover` global troca so o
 * `background`, e o gradiente (longhand, mais especifico) sobreviveria por cima.
 *
 * Escopado pelo CARD, e nao pelo `.sig-form`: as acoes do aceite de convite sao
 * `button_to` e `link_to`, que nao vivem dentro do formulario — pelo `.sig-form` a
 * mesma tela sairia com um botao de 46 e outro de 38 lado a lado. */
.sig-auth-card .sig-button {
  width: 100%;
  min-height: 46px;
  border-radius: 11px;
  font-size: 14px;
  background-image: linear-gradient(180deg, var(--sig-accent) 0%, var(--sig-accent-strong) 100%);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--sig-accent-strong) 85%, transparent);
}

.sig-auth-card .sig-button:hover {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--sig-accent) 88%, var(--sig-card)) 0%, var(--sig-accent) 100%);
}

/* ACS-08: mostrar/ocultar senha. O botao flutua DENTRO do campo, e o `padding-right`
 * abre o espaco dele — sem isso o texto da senha passa por baixo do olho. */
.sig-auth-secret {
  position: relative;
  display: flex;
}

.sig-auth-secret .sig-input {
  width: 100%;
  padding-right: 42px;
}

.sig-auth-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sig-text-faint);
  cursor: pointer;
}

/* O atributo `hidden` NAO esconde elemento SVG. Medido no DOM em 2026-09-02: o atributo
 * esta no no (`hasAttribute('hidden') === true`) e o `display` computado continua
 * `inline` — os dois olhos apareciam lado a lado dentro do campo, e o botao media 53px
 * numa reserva de 42. A regra do UA que apaga `[hidden]` vale para HTML, e o segundo
 * icone e SVG. Sem esta linha o defeito volta em silencio: a marcacao continua correta. */
.sig-auth-eye svg[hidden] {
  display: none;
}

.sig-auth-eye:hover {
  color: var(--sig-text-muted);
}

.sig-auth-eye:focus-visible {
  outline: 2px solid var(--sig-accent);
  outline-offset: 1px;
}

/* ACS-09: as duas regras da senha. Cumprida = ponto preenchido MAIS texto em
 * `--sig-text`; o acento sozinho ficaria em 2,9:1 sobre o card, abaixo do minimo de
 * texto pequeno — a cor entra no ponto, que e decoracao, e nao na frase. */
.sig-auth-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-auth-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sig-text-muted);
}

.sig-auth-rule-dot {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--sig-border-hover);
}

.sig-auth-rule--ok {
  color: var(--sig-text);
}

.sig-auth-rule--ok .sig-auth-rule-dot {
  border-color: var(--sig-accent);
  background: var(--sig-accent);
}


.sig-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sig-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Botão dentro de um field em coluna abraça o conteúdo — sem isto o flex
   estica ("Adicionar condição/ação" virava uma barra de largura total). */
.sig-field > .sig-button {
  align-self: flex-start;
}

/* SYS-05/06: linha horizontal de campos/controles (filtros de alertas,
   comentário + reconhecer) — classe já referenciada nas views, agora definida. */
.sig-field-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* DSG-01: controles na linha de filtro possuem a mesma altura uniforme (38px) */
.sig-field-row > select.sig-input,
.sig-field-row > input.sig-input,
.sig-field-row > .sig-button,
.sig-field-row > input[type="submit"].sig-button,
.sig-field-row > button.sig-button {
  height: 38px;
  box-sizing: border-box;
}

.sig-field-row > select.sig-input {
  max-width: 280px;
}

/* DSG-01: abas ativos/histórico (alertas) no padrão de pílula do 4b —
   mesma família visual do .sig-period-toggle. Classe era fantasma. */
.sig-tabs {
  display: inline-flex;
  gap: 3px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 3px;
}

.sig-tab {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sig-text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
}

.sig-tab:hover {
  color: var(--sig-text);
  background: rgba(255, 255, 255, 0.6);
}

.sig-tab--active {
  background: var(--sig-card);
  color: var(--sig-text);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Sub-Navegação em Abas / Segmented Pills (Opção A) */
.sig-subnav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 4px;
  max-width: fit-content;
  overflow-x: auto;
  /* A barra de rolagem NAO some aqui: ela e o sinal de reserva (AD-065). Quem a esconde
     e o bloco do padrao, dentro do @supports, onde o degrade existe para substitui-la.
     Ate 2026-09-03 ela sumia nesta regra, e a subnav rolava sem sinal nenhum em 9 telas. */
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}


.sig-subnav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sig-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sig-subnav-item:hover {
  color: var(--sig-text);
  background: rgba(255, 255, 255, 0.6);
}

.sig-subnav-item--active {
  background: var(--sig-card);
  color: var(--sig-text);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

@media (max-width: 640px) {
  .sig-subnav {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

/* DSG-01: pares rótulo/valor de detalhe (alarme) — dl em duas colunas, rótulo
   mudo à esquerda, valor à direita. Classe era fantasma nas views. */
.sig-details {
  margin: 0;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: baseline;
}

.sig-details dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--sig-text-muted);
}

.sig-details dd {
  margin: 0;
  word-break: break-word;
}

@media (max-width: 600px) {
  .sig-details {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .sig-details dd {
    margin-bottom: 10px;
  }
}

/* SYS-03: agrupamento de ações (toolbars e células) com espaçamento garantido.
   button_to gera <form> block — display: contents neutraliza o wrapper para
   o gap valer entre os próprios botões/links. */
.sig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sig-actions form {
  display: contents;
}

/* SYS-04: forms de 4+ campos fluem em grid de 2 colunas em >=768px;
   abaixo disso vale o flex-column do .sig-form. */
@media (min-width: 768px) {
  .sig-form--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
  }

  .sig-form--grid > .sig-field--full,
  .sig-form--grid > fieldset,
  .sig-form--grid > .sig-field-error,
  .sig-form--grid > .sig-form-errors,
  .sig-form--grid > .sig-form-actions {
    grid-column: 1 / -1;
  }

  /* Grupo de campos (ex.: ilha dev-eui) participa do grid externo
     sem perder o elemento no DOM (Stimulus intacto). */
  .sig-form--grid > .sig-field-group {
    display: contents;
  }
}

/* DSG-01: dentro do painel (não nas telas de auth), o submit de um .sig-form
   abraça o conteúdo em vez de esticar na largura toda do card. */
.sig-main .sig-form > .sig-button,
.sig-main .sig-form > input[type="submit"] {
  align-self: flex-start;
}

/* SYS-04: ações do form (salvar/voltar) agrupadas e separadas do corpo. */
.sig-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--sig-border);
}

.sig-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sig-text-muted);
}

/* `:not(textarea)`: oito textareas usam `.sig-input` e tem `rows` — altura fixa
   as achataria para uma linha. */
.sig-input:not(textarea) {
  height: 38px;
}

.sig-input {
  padding: 10px 12px;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  background: var(--sig-card);
  font: inherit;
  font-size: 13px;
  color: var(--sig-text);
  /* Os 24px de padding lateral e os 2 de borda entram POR FORA sem isto, e ai'
     `width: 100%` e `max-width: 100%` nao seguram nada: o campo mede 26px a mais
     que a caixa que devia limita-lo. Era o que vazava a barra de filtros em 10
     telas (a 320px: campo de 272 numa trilha de grade de 246, `37..309` contra um
     card `14..306`) — e a grade `.sig-filtros` estava certa o tempo todo, ja com o
     piso seguro `minmax(min(190px, 100%), 1fr)`; quem vazava era o controle.

     A ALTURA vinha junto no mesmo erro, e era visivel a olho nu: `.sig-input--filter`
     declara `height: 38px`, mas em caixa de conteudo isso rendia 60px — a data de
     /audit_events media 258x60 ao lado de selects de 232x38 na MESMA barra. Os
     selects ja escapavam porque `.sig-field-row > select.sig-input` (linha 870) ja'
     declarava `border-box`; era a regra base que faltava.

     Declarado aqui, na base, e nao por variante: a folha nao tem `box-sizing`
     global e a lista de variantes que precisavam dele so' crescia. */
  box-sizing: border-box;
}

textarea.sig-input {
  min-height: 84px;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
}

.sig-detail-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sig-detail-content {
  padding: 14px 16px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  font-size: 13px;
  line-height: 1.6;
  color: var(--sig-text);
  white-space: pre-wrap;
  word-break: break-word;
}


.sig-input:focus {
  outline: 2px solid var(--sig-accent);
  outline-offset: 1px;
  border-color: var(--sig-accent);
}

.sig-input::placeholder {
  color: var(--sig-text-muted);
  opacity: 0.75;
}

/* ALTURA PADRAO DO SISTEMA: 38px (Eric, 2026-08-29). Antes disto controle e
   botao divergiam em 38/40/42 e 24/32/34/38/40/42 respectivamente, e a
   diferenca saltava sempre que os dois ficavam lado a lado — o select de papel
   de /organization/members com 40 ao lado de dois botoes de 32 foi o caso que
   abriu o assunto.

   `min-height`, e nao `height`: rotulo longo em coluna estreita ("Importar
   dispositivos" num card de 292px) quebra em duas linhas, e altura FIXA o faria
   vazar a caixa — foi esse o defeito do `.sig-filter-actions--tall` corrigido
   antes nesta mesma sessao. Com piso, a linha unica mede 38 e a que quebra
   cresce. */
.sig-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--sig-radius-control);
  background: var(--sig-accent-strong);
  color: var(--sig-card);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  vertical-align: middle;
}

summary.sig-button {
  list-style: none !important;
}

summary.sig-button::-webkit-details-marker,
summary.sig-button::marker {
  display: none !important;
  content: "" !important;
}

.sig-button:hover {
  background: var(--sig-accent);
}

.sig-auth-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12.5px;
}

.sig-auth-links a {
  color: var(--sig-text-muted);
}

.sig-flash {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--sig-radius-control);
  font-size: 12.5px;
  font-weight: 600;
}

.sig-flash--alert {
  background: var(--sig-alarm-bg);
  color: var(--sig-alarm);
}

/* ACS-13: o aviso de sucesso era `--sig-card` (branco) sobre `--sig-bg` (quase branco),
 * com sombra de 1px — na pratica, invisivel. E ele e a UNICA resposta que a tela de
 * recuperar senha da ("Se o e-mail existir, enviamos instrucoes").
 *
 * Fundo semantico de sucesso, e nao `--sig-accent-soft`: o accent-soft e sobrescrito
 * pelo tenant (Branding::CssVariables usa a cor secundaria dele, ou o primario clareado
 * em 12%), entao ele NAO e garantidamente claro — num tenant de marca escura, texto
 * escuro sobre ele seria ilegivel. `--sig-ok-bg` nunca e reescrito por branding.
 *
 * Texto em `--sig-text` e nao em `--sig-ok`: o verde de sucesso sobre o proprio fundo
 * da 2,2:1, abaixo do minimo para texto. A cor fica na borda, que e decoracao.
 *
 * Regra GLOBAL: o mesmo aviso sai assim nos quatro layouts, porque o defeito era o
 * mesmo nos quatro. */
.sig-flash--notice {
  background: var(--sig-ok-bg);
  color: var(--sig-text);
  border: 1px solid color-mix(in srgb, var(--sig-ok) 35%, transparent);
}

.sig-field-error {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-alarm);
}

/* UAT5-09: campo que reprovou a validacao se identifica sozinho (borda + halo),
   em vez de depender de uma mensagem distante no topo da secao. */
.sig-input--error {
  border-color: var(--sig-alarm);
  box-shadow: 0 0 0 3px var(--sig-alarm-bg);
}

/* O wrapper padrao do Rails para campos invalidos nao pode quebrar o flex do form */
.field_with_errors {
  display: contents;
}

/* Menu do usuario no topo e tela de sessoes ativas (feature autenticacao) */

.sig-user-menu {
  margin-left: auto;
  position: relative;
}

.sig-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sig-accent-strong);
  color: var(--sig-card);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sig-avatar::-webkit-details-marker {
  display: none;
}

.sig-user-menu-panel {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 20;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--sig-card);
  /* Mesma moldura do menu de acoes das tabelas (`.sig-action-menu-panel`): borda de 1px e a
     sombra ALTA, e nao a de card. Sem a borda o painel se dissolve sobre um card branco —
     fundo igual ao que esta atras, e so a sombra baixa separando os dois. Pedido do Eric,
     2026-09-01. */
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  box-shadow: var(--sig-shadow-raised);
}

.sig-user-name {
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sig-text-faint);
}

.sig-user-menu-item {
  padding: 8px 10px;
  border: none;
  border-radius: var(--sig-radius-control);
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sig-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sig-user-menu-item:hover {
  background: var(--sig-bg);
}

/* DSG-01 (T30): wrapper de texto das linhas de sessao/chave (era fantasma) —
   min-width 0 permite truncar conteudos longos dentro da linha flex. */
.sig-session-info {
  min-width: 0;
}

/* DSG-01 (T30): zona perigosa (excluir org/conta) sinalizada na borda. */
.sig-card--danger {
  border: 1px solid var(--sig-alarm-bg);
  box-shadow: none;
}

.sig-sessions-toolbar {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 12px;
}

.sig-session-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sig-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--sig-border);
}

.sig-session-device {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.sig-session-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--sig-text-muted);
  /* Esta linha carrega URL de webhook, user agent e IP — tokens longos SEM
     espaco, que nao quebram sozinhos. A 320px o URL do endpoint media 319px numa
     caixa de 135 e empurrava a PAGINA inteira (357 contra 320), sem que nenhum
     elemento aparecesse fora do viewport: quem transbordava era o conteudo, e nao
     a caixa. `anywhere` quebra o token; `break-word` sozinho nao quebra palavra
     unica que nao cabe. */
  overflow-wrap: anywhere;
}

.sig-badge {
  /* UAT5-10: sem inline-block + nowrap o badge quebra no meio do rotulo
     ("Em / investigacao") quando a coluna e estreita. */
  display: inline-block;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sig-accent-soft);
  color: var(--sig-text);
  border: 1px solid #dcedc8;
  font-size: 11px;
  font-weight: 700;
}

/* DSG-01: "visto em ..." vira linha secundária muda sob o badge de status —
   a célula de status da lista deixa de quebrar no meio da frase. */
.sig-seen-at {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--sig-text-faint);
  white-space: nowrap;
}

/* TEL-04 AC5 (AD-018): online verde / offline laranja-alarme (tokens AD-005);
 * nunca visto usa o badge neutro. */
.sig-badge--online,
.sig-badge--calib-valido {
  background: var(--sig-accent-soft);
  color: var(--sig-text);
  border: 1px solid #dcedc8;
  font-weight: 700;
}

/* MOVIDAS para ca em 2026-09-01. Estavam declaradas ANTES da regra base `.sig-badge`, com a
   mesma especificidade (0,1,0) — entao a base ganhava por ordem e apagava fundo, cor e borda
   das duas. `--danger` era a que doia: o contador de ERROS de importacao de dispositivos
   (/devices/imports/new) saia com o verde do sucesso. As demais variantes ja moravam depois da
   base e por isso funcionavam; estas duas eram as unicas orfas. */
.sig-badge--success {
  background: var(--sig-accent-soft);
  color: var(--sig-text);
  border: 1px solid #dcedc8;
  font-weight: 700;
}

.sig-badge--danger {
  background: var(--sig-alarm-bg);
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 700;
}

.sig-badge--offline {
  background: var(--sig-alarm-bg);
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 700;
}

/* DSG-01 (T28): estado de atenção genérico (ex.: SIM suspensa). */
.sig-badge--warn,
.sig-badge--calib-vence_em_breve {
  background: var(--sig-warn-bg);
  color: #b45309;
  border: 1px solid #fde68a;
  font-weight: 700;
}

.sig-badge--calib-vencido {
  background: var(--sig-alarm-bg);
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 700;
}

.sig-badge--calib-nunca_calibrado {
  background: var(--sig-surface);
  color: var(--sig-text-muted);
  border: 1px solid var(--sig-border);
  font-weight: 700;
}

.sig-button--ghost {
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  color: var(--sig-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.sig-button--ghost:hover {
  background: var(--sig-surface);
  border-color: var(--sig-border-hover);
  color: var(--sig-text);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* Abas de Alertas com Contador */
.sig-tab-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sig-alarm);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}

/* Ack Form na Tabela de Alertas (ALRT-10 / ALRT-11) */
.sig-ack-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}

.sig-input--ack {
  flex: 1 1 110px;
  min-width: 0;
  max-width: 160px;
  height: 32px;
  font-size: 12px;
  padding: 0 8px;
  border-radius: var(--sig-radius-control);
  background: var(--sig-bg);
  border: 1px solid var(--sig-border);
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.sig-input--ack:focus {
  background: var(--sig-card);
  border-color: var(--sig-accent);
  box-shadow: 0 0 0 2px rgba(139, 195, 74, 0.2);
  outline: none;
}

.sig-button--ack {
  flex: 0 0 auto;
  height: 32px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
  border-radius: var(--sig-radius-control);
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  color: var(--sig-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sig-button--ack:hover {
  background: var(--sig-surface);
  border-color: var(--sig-border-hover);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.sig-ack-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sig-ack-meta {
  font-size: 12px;
  color: var(--sig-text-muted);
  white-space: nowrap;
}

.sig-ack-comment {
  font-size: 11.5px;
  color: var(--sig-text-muted);
  background: var(--sig-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-style: italic;
  max-width: 220px;
  word-break: break-word;
  display: inline-block;
}

.sig-table-link {
  color: var(--sig-text);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sig-table-link:hover {
  color: var(--sig-accent-strong);
  text-decoration: underline;
}

.sig-rule-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sig-target-cell {
  color: var(--sig-text-muted);
  font-size: 12px;
}

.sig-value-highlight {
  font-weight: 700;
  color: var(--sig-text);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.sig-ack-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sig-ok-bg);
  color: var(--sig-ok);
  font-size: 10px;
  font-weight: 800;
  margin-right: 3px;
}

.sig-button--danger {
  background: var(--sig-alarm-bg);
  color: var(--sig-alarm);
  font-size: 12px;
  padding: 8px 12px;
}

.sig-button--danger:hover {
  background: var(--sig-alarm);
  color: var(--sig-card);
}

.sig-settings-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--sig-text-muted);
  max-width: 52ch;
}

.sig-qr {
  display: inline-block;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: 12px;
}

/* O SVG do RQRCode vem só com viewBox (sem width/height) e esticaria à
   largura do card — QR gigante (UAT). Tamanho de crachá, escaneável. */
.sig-qr svg {
  display: block;
  width: 180px;
  height: 180px;
}

.sig-recovery-codes {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 8px;
  max-width: 480px;
}

.sig-recovery-codes code {
  display: block;
  padding: 8px 10px;
  background: var(--sig-bg);
  border: 1px solid var(--sig-border);
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* Seletor de organizacao no topo (feature organizacoes-e-papeis) */

.sig-org-menu {
  margin-left: auto;
  position: relative;
}

.sig-org-menu + .sig-user-menu {
  margin-left: 0;
}

.sig-org-current {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--sig-radius-control);
  background: var(--sig-card);
  box-shadow: var(--sig-shadow-card);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sig-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sig-org-icon {
  display: block;
  flex-shrink: 0;
  color: var(--sig-text-faint);
}

.sig-org-chevron {
  display: block;
  flex-shrink: 0;
  color: var(--sig-text-faint);
  transition: transform 0.15s ease;
}

.sig-org-menu[open] .sig-org-chevron {
  transform: rotate(180deg);
}

.sig-org-name {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sig-org-current::-webkit-details-marker,
.sig-org-current::marker {
  display: none !important;
  content: "";
}

.sig-org-current::-webkit-details-marker {
  display: none;
}

.sig-org-menu .sig-user-menu-panel {
  min-width: 240px;
}

.sig-org-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* Tela de membros (feature organizacoes-e-papeis) */

.sig-member-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* DSG-01 (correcoes-uat-1): pares rótulo/valor curtos fluem em grade responsiva
   em vez de uma linha inteira por par — detalhe do device deixa de ser um
   scroll de divisórias. Mesma marcação .sig-member (specs de texto intactas). */
.sig-member-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 0 24px;
}

.sig-member-list--grid .sig-member {
  border-top: 1px solid var(--sig-border);
  padding: 10px 0;
}

.sig-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--sig-border);
}

.sig-member:first-child {
  border-top: none;
}

.sig-member-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.sig-member-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--sig-text-muted);
}

.sig-member--owner .sig-badge {
  background: var(--sig-accent-strong);
  color: var(--sig-card);
}

.sig-member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sig-member-role-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Esta regra existia para baixar o select de papel de 40 para os 32px dos botoes
   ao lado. Com a altura padrao de 38px valendo para controle E botao, ela virou o
   contrario do que queria: deixava o select 6px MENOR que os botoes. Removida —
   o padrao ja resolve. */

/* Decoders (C6, AD-005): bloco de codigo e editor monoespacados nos tokens do design. */
.sig-code {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  background: var(--sig-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--sig-text);
  overflow-x: auto;
  white-space: pre;
}

/* Home / Visão geral (B1, painel 4b): saudação, KPIs e cards da triagem. */
.sig-home {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sig-home-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sig-home-heading {
  display: flex;
  flex-direction: column;
}

.sig-home-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--sig-text-faint);
}

.sig-home-greeting {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.sig-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .sig-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .sig-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .sig-kpis {
    grid-template-columns: 1fr;
  }
}

.sig-kpis--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .sig-kpis--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .sig-kpis--4 {
    grid-template-columns: 1fr;
  }
}

.sig-kpi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sig-kpi:hover {
  box-shadow: var(--sig-shadow-raised);
  transform: translateY(-2px);
}

.sig-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sig-kpi-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sig-text-muted);
}

.sig-kpi-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sig-surface);
  color: var(--sig-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sig-kpi-icon--online {
  background: var(--sig-ok-bg, #ecfdf5);
  color: #059669;
}

.sig-kpi-icon--offline {
  background: var(--sig-alarm-bg, rgba(239, 68, 68, 0.12));
  color: var(--sig-alarm);
}

.sig-kpi-icon--total {
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  color: var(--sig-text);
}

.sig-kpi-icon--readings {
  background: rgba(56, 189, 248, 0.15);
  color: #0284c7;
}

.sig-kpi-icon--failures {
  background: rgba(245, 158, 11, 0.15);
  color: var(--sig-warn);
}

.sig-kpi-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sig-kpi-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.sig-kpi-value--alarm {
  color: var(--sig-alarm);
}

.sig-kpi-status-chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.sig-kpi-status--online {
  background: var(--sig-ok-bg, #ecfdf5);
  color: #047857;
}

.sig-kpi-status--alarm {
  background: var(--sig-alarm-bg, rgba(239, 68, 68, 0.12));
  color: var(--sig-alarm);
}

.sig-kpi-sublabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-faint);
}

.sig-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(min(260px, 100%), 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px) {
  .sig-home-grid {
    grid-template-columns: 1fr;
  }
}

.sig-home-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sig-home-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

/* Câmaras · agora (4b): dot de status, nome+grupo e último valor à direita. */
.sig-cameras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}

.sig-camera-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sig-camera {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
}

.sig-camera-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.sig-camera-link:hover {
  background: var(--sig-surface);
}

.sig-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--sig-border);
}

.sig-dot--online {
  background: var(--sig-accent-strong);
}

.sig-dot--offline {
  background: var(--sig-alarm);
}

.sig-dot--never_seen {
  background: var(--sig-border);
}

.sig-camera-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sig-camera-value {
  text-align: right;
  white-space: nowrap;
  color: var(--sig-text);
}

.sig-camera-value--alarm {
  color: var(--sig-alarm);
}

.sig-camera-more {
  margin-top: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sig-accent-strong);
  text-decoration: none;
}

.sig-camera-more:hover {
  text-decoration: underline;
}

.sig-kpi--clickable {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}

.sig-kpi--clickable:hover {
  border-color: var(--sig-accent-strong);
}

/* Atividade recente: timeline elegante */
.sig-activity {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}

.sig-activity-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.sig-activity-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 2px;
  background: var(--sig-border);
}

.sig-activity-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 18px;
  font-size: 12px;
}

.sig-activity-dot {
  position: absolute;
  left: 2px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sig-accent-strong);
  box-shadow: 0 0 0 3px var(--sig-card);
  z-index: 1;
}

.sig-activity-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sig-activity-label {
  font-weight: 600;
  color: var(--sig-text);
  line-height: 1.35;
}

.sig-activity-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--sig-text-faint);
}

.sig-activity-label {
  font-weight: 600;
}

.sig-activity-time {
  flex: none;
  font-size: 11px;
  color: var(--sig-text-faint);
}

.sig-activity-empty {
  margin: 0;
  font-size: 12px;
  color: var(--sig-text-faint);
}

/* Toggle de período (4b): pílula clara com o período ativo em destaque. */
.sig-period-toggle {
  margin-left: auto;
  display: flex;
  gap: 5px;
  background: var(--sig-card);
  border-radius: var(--sig-radius-control);
  padding: 4px;
  box-shadow: var(--sig-shadow-raised);
}

.sig-period {
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-faint);
  text-decoration: none;
}

.sig-period--active {
  background: var(--sig-accent-soft);
  color: var(--sig-text);
  font-weight: 700;
}

/* Gráfico destaque (4b): curva do sensor primário com gradiente e eixo temporal. */
.sig-home-main {
  min-width: 0;
}

.sig-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}

.sig-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sig-chart-heading {
  display: flex;
  flex-direction: column;
}

.sig-chart-title {
  font-size: 16px;
  font-weight: 800;
}

.sig-chart-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--sig-text-faint);
}

.sig-chart-last {
  margin-left: auto;
  font-size: 18px;
  font-weight: 800;
}

.sig-chart-last--alarm {
  color: var(--sig-alarm);
}

.sig-chart-svg {
  width: 100%;
  height: 270px;
  display: block;
}

.sig-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--sig-text-faint);
}

.sig-chart-empty {
  margin: 0;
  padding: 48px 0;
  text-align: center;
  font-size: 12px;
  color: var(--sig-text-faint);
}

/* === compliance (#18): relatorios de conformidade === */
.compliance-sensor-config {
  margin-top: 4px;
}

.compliance-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--sig-card-bg-subtle, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
}

.compliance-filter-bar__search {
  flex: 1 1 220px;
}

.compliance-filter-bar__group {
  flex: 0 1 180px;
}

/* No estreito a barra ja quebra em linhas, e o filtro de grupo era o unico que nao ocupava a
   linha inteira: 180px fixos com 121 de vazio ao lado, medido a 375px. Pedido do Eric,
   2026-09-01. O 768 e' o mesmo ponto em que a sidebar vira gaveta — a tela ja mudou de modo
   ali, e nao ha razao para este controle mudar noutro lugar. */
@media (max-width: 768px) {
  .compliance-filter-bar__group {
    flex: 1 1 100%;
  }
}

.compliance-search-input {
  width: 100%;
}

.compliance-group-filter {
  width: 100%;
  margin-bottom: 0;
}

.compliance-selection-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.compliance-devices-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compliance-device {
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 14px 16px;
  background: var(--sig-card-bg-subtle, rgba(255, 255, 255, 0.02));
  transition: border-color 0.15s ease;
  margin: 0;
}

.compliance-device:hover {
  border-color: var(--sig-border-strong);
}

.compliance-device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sig-border);
  margin-bottom: 10px;
}

.compliance-device-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sig-text);
  padding: 0;
  margin: 0;
  float: none;
}

.compliance-device-count {
  font-size: 11px;
  font-weight: 500;
}

.compliance-device-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compliance-device-sensors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compliance-device.compliance-device--collapsed .compliance-device-sensors {
  display: none;
}

.compliance-device.compliance-device--collapsed .compliance-device-header {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.compliance-sensor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  background: var(--sig-bg);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-sm);
  flex-wrap: wrap;
}

.compliance-sensor-label {
  font-size: 13px;
  font-weight: 600;
}

.compliance-sensor-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compliance-sensor-range .sig-input {
  max-width: 100px;
  padding: 6px 10px;
  font-size: 13px;
}

.compliance-sensor-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-muted);
  min-width: 24px;
}

.compliance-limit-warning[hidden] { display: none; }

.compliance-show-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.compliance-show-toolbar .sig-badge {
  width: fit-content;
  flex-shrink: 0;
}

.compliance-show-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.compliance-show-actions form.button_to,
.compliance-show-actions > form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.compliance-show-actions .sig-button,
.compliance-show-actions form.button_to .sig-button {
  margin: 0;
  white-space: nowrap;
}

.compliance-file-hash {
  font-size: 12px;
  color: var(--sig-text-faint);
  word-break: break-all;
  margin-bottom: 14px;
}

.compliance-hash-value { font-size: 11px; }

.compliance-pdf-embed {
  width: 100%;
  height: 760px;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  display: block;
  background: var(--sig-surface);
}

.compliance-mobile-doc-card {
  display: none;
}

@media (max-width: 768px) {
  .compliance-show-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
  }

  .compliance-btn-download-desktop {
    display: none !important;
  }

  .compliance-btn-verify {
    padding: 0 10px !important;
    font-size: 12px !important;
    height: 32px !important;
    line-height: 30px !important;
  }

  .compliance-mobile-doc-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--sig-surface);
    border: 1px solid var(--sig-border);
    border-radius: var(--sig-radius-card);
    margin-bottom: 14px;
  }

  .compliance-mobile-doc-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .compliance-mobile-doc-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--sig-radius-control);
    background: var(--sig-ok-bg);
    color: var(--sig-ok);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .compliance-mobile-doc-info {
    min-width: 0;
    flex: 1;
  }

  .compliance-mobile-doc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sig-text);
    margin-bottom: 2px;
    word-break: break-word;
    line-height: 1.3;
  }

  .compliance-mobile-doc-meta {
    font-size: 12px;
    color: var(--sig-text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .compliance-mobile-doc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .compliance-mobile-doc-actions .sig-button {
    width: 100%;
    justify-content: center;
    font-weight: 700;
    height: 38px !important;
    line-height: 36px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  .compliance-pdf-embed {
    display: none !important;
  }
}

/* Faixa de acao de PAGINA: fica ACIMA do card de filtros, solta, e leva as acoes
   SECUNDARIAS da tela — "Ver alarmes", "Log de execucoes", "Grupos e locais".
   Referencia: o "Historico de exportacoes" de /data/explorer, que ja ficava
   assim. Dentro do card da lista sobra so a acao primaria, para o verde nao
   dividir a faixa com meia duzia de links. */
.sig-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

/* Faixa de acao do card da tabela (Eric, 2026-08-29): SO a acao primaria
   ("Novo dispositivo", "Nova regra") mora aqui, no topo do card que contem a
   tabela, e nao no card de filtros. O card de filtros e o que o operador ajusta; criar
   um registro novo pertence a lista. O padrao de referencia era
   `/compliance/reports`, que ja fazia assim; a classe local que ele usava
   (`.compliance-list-toolbar`) foi absorvida, e nenhuma view a referencia mais. */
.sig-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.compliance-report-link {
  font-weight: 600;
  color: var(--sig-text);
  text-decoration: none;
}
.compliance-report-link:hover { text-decoration: underline; }
.compliance-hash-abbrev { font-size: 11px; }
.compliance-error-message { margin: 4px 0 0; }
.compliance-badge--done,
.compliance-badge--enabled {
  background: var(--sig-accent-soft);
  color: var(--sig-text);
  border: 1px solid #dcedc8;
  font-weight: 700;
}
.compliance-badge--failed {
  background: var(--sig-alarm-bg);
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 700;
}
.compliance-badge--disabled {
  background: var(--sig-surface);
  color: var(--sig-text-muted);
  border: 1px solid var(--sig-border);
  font-weight: 700;
}

/* === billing (#32, I5): medidores de uso, comparativo e conectividade === */
.billing-section-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--sig-text); }
.billing-plan-name { margin: 0; font-size: 20px; font-weight: 700; }
.billing-plan-price { margin: 4px 0; color: var(--sig-text-muted); }
/* DSG-01 (T29): badge de status e um <p> — sem fit-content ele estica na
   largura do card. */
.billing-plan-status { width: fit-content; margin: 0; }

.billing-meter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.billing-meter-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.billing-meter-label { color: var(--sig-text); font-weight: 600; }
.billing-meter-value { color: var(--sig-text-muted); font-variant-numeric: tabular-nums; }
.billing-meter-bar { height: 8px; border-radius: 999px; background: var(--sig-border); overflow: hidden; }
.billing-meter-fill { display: block; height: 100%; width: var(--billing-meter-w, 0%); background: var(--sig-accent); border-radius: 999px; }
.billing-meter-note { margin: 4px 0 0; font-size: 12px; font-weight: 600; }
/* BILL-08/40: >= 80% => aviso amarelo; 100% => bloqueio (laranja-alarme). */
.billing-meter--warning .billing-meter-fill { background: var(--sig-warn); }
.billing-meter-note--warning { color: var(--sig-warn); }
.billing-meter--blocked .billing-meter-fill { background: var(--sig-alarm); }
.billing-meter-note--blocked { color: var(--sig-alarm); }

.billing-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.billing-plan-card { border: 1px solid var(--sig-border); border-radius: 10px; padding: 14px; background: var(--sig-surface); }
.billing-plan-card--current { border-color: var(--sig-accent); }
.billing-plan-card-name { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.billing-plan-card-price { margin: 0 0 10px; color: var(--sig-text-muted); }
.billing-plan-card-current { margin: 0; font-size: 12px; font-weight: 700; color: var(--sig-accent-strong); }
.billing-plan-form { margin: 0; }

.billing-connectivity-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.billing-connectivity-input { max-width: 120px; }
.billing-payment-masked { margin: 0 0 10px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }

/* === utilitarios de texto/tabela + telas publicas e admin (DSG-01, T30) === */

/* Banner de impersonacao (ADM-14/16): filho direto do body.sig-app (flex row)
   — sem posicionamento ele viraria uma "coluna" ao lado da sidebar. Barra
   fixa no rodape, sempre visivel, sem esconder a navegacao. */
.sig-impersonation-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--sig-alarm-bg);
  color: var(--sig-alarm);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 -2px 8px rgba(60, 72, 56, 0.12);
}

.sig-muted {
  margin: 0;
  font-size: 12.5px;
  color: var(--sig-text-muted);
}


.sig-field-hint {
  margin: 0;
  font-size: 12px;
  color: var(--sig-text-faint);
}

/* Tabela larga rola dentro do proprio card — a pagina nunca rola na horizontal. */
.sig-table-scroll {
  overflow-x: auto;
}

/* Sem isto o `overflow-x: auto` acima nunca entra em acao: uma <table> com
   `table-layout: auto` ENCOLHE para caber no container, espremendo as colunas
   ate o texto quebrar, e so entao estoura. O resultado era o pior dos dois
   mundos — a tabela cabia, o botao de acao ficava cortado dentro da celula, e
   nao havia rolagem lateral para alcanca-lo. `min-width: max-content` devolve a
   largura natural, e ai a rolagem existe de verdade. */
.sig-table-scroll > table {
  min-width: max-content;
}

/* ── Tabela por prioridade (TAB-01, TAB-20) ─────────────────────────────────
   Alternativa a rolagem para tabela larga: as colunas de menor prioridade saem
   e viram uma faixa expansivel na propria linha.

   AS DUAS ESTRATEGIAS NAO COEXISTEM NA MESMA TABELA. A rolagem exige
   `min-width: max-content` acima — senao a <table> encolhe sozinha, espremendo
   colunas, e o `overflow-x` nunca entra em acao. A prioridade exige o oposto:
   que a tabela CAIBA. Medido no prototipo; e por isso que a variante anula o
   min-width em vez de conviver com ele.

   Quem decide o que some e o JS, medindo (TAB-01). Este CSS so oferece o
   mecanismo de esconder e o desenho da faixa — nao ha media query de coluna
   aqui, de proposito: largura e funcao do CONTEUDO, e breakpoint erraria. */
.sig-table-scroll > table.sig-table--prioridade {
  min-width: 0;
  width: 100%;
}

/* O controller marca a celula; o CSS so obedece. `display: none` e nao
   `visibility`, para a coluna nao reservar largura. */
.sig-table--prioridade [data-coluna-oculta] {
  display: none;
}

/* Em coluna estreita o preenchimento de 10px de cada lado vira orcamento: com 3
   colunas sao 60px dos ~300 disponiveis, e foi o que faltou em /devices (321
   contra 301 com DUAS colunas). Apertar espacamento e apresentacao; encurtar
   rotulo ou trocar selo por icone seria mexer no CONTEUDO, que esta fora do
   escopo desta feature. */
@media (max-width: 640px) {
  .sig-table--prioridade th,
  .sig-table--prioridade td {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* O SELO era o glutao, e nao o nome: medido, a coluna de status ficava com
     159px em /devices e 128px em /calibrations, porque o selo e `nowrap` e
     carrega o texto inteiro numa linha so ("Nunca visto", "Vence em breve").
     Deixar quebrar devolve a coluna ao tamanho do conteudo.

     REPOSTA em 2026-08-31: a rodada de redesenho tirou `.sig-table--prioridade
     .sig-badge` desta lista, e o defeito voltou na hora — /alerts/events/:id a
     375px media 347px de tabela numa caixa de 301, com um selo de 194px levando
     "Pulado — canal nao configurado" numa linha so. Sem o seletor, 122px. */
  .sig-table--prioridade .sig-badge,
  .sig-table--prioridade .sig-seen-at {
    white-space: normal;
  }
}

.sig-table--prioridade .sig-tabela-expandir {
  width: 44px;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
}

.sig-table--prioridade .sig-tabela-expandir button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--sig-border);
  border-radius: 8px;
  background: var(--sig-bg);
  color: var(--sig-text);
  cursor: pointer;
}

.sig-table--prioridade tr.sig-tabela-detalhe > td {
  padding: 6px 12px 14px;
}

.sig-table--prioridade .sig-tabela-detalhe dl {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  padding: 12px 14px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  font-size: 12.5px;
  align-items: center;
}

.sig-table--prioridade .sig-tabela-detalhe dt {
  color: var(--sig-text-faint);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sig-table--prioridade .sig-tabela-detalhe dd {
  margin: 0;
  color: var(--sig-text);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sig-table--prioridade .sig-tabela-detalhe dd .sig-ack-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

.sig-table--prioridade .sig-tabela-detalhe dd .sig-input--ack {
  flex: 1 1 130px;
  min-width: 110px;
  max-width: 220px;
  height: 34px;
  font-size: 12px;
}

.sig-table--prioridade .sig-tabela-detalhe dd .sig-button--ack {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
}

@media (max-width: 480px) {
  .sig-table--prioridade .sig-tabela-detalhe dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .sig-table--prioridade .sig-tabela-detalhe dt {
    margin-top: 6px;
  }

  .sig-table--prioridade .sig-tabela-detalhe dt:first-child {
    margin-top: 0;
  }

  .sig-table--prioridade .sig-tabela-detalhe dd .sig-ack-form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 4px;
  }

  .sig-table--prioridade .sig-tabela-detalhe dd .sig-input--ack {
    width: 100%;
    max-width: 100%;
    height: 38px;
    font-size: 13px;
  }

  .sig-table--prioridade .sig-tabela-detalhe dd .sig-button--ack {
    width: 100%;
    height: 38px;
    font-size: 13px;
    justify-content: center;
  }
}

/* Valor sem rotulo (a coluna de acoes tem <th> vazio) ocupa a linha inteira. */
.sig-table--prioridade .sig-tabela-detalhe dd.sig-tabela-detalhe-sem-rotulo {
  grid-column: 1 / -1;
}

.sig-table-actions {
  white-space: nowrap;
}

.sig-table-actions .sig-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.sig-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sig-table-actions form,
.sig-filter-actions form {
  display: contents;
}

/* Severidade de alerta e resultado de instalacao (badges dinamicos). */
.sig-badge--critical {
  background: var(--sig-alarm-bg);
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 700;
}

.sig-badge--warning {
  background: var(--sig-warn-bg);
  color: #b45309;
  border: 1px solid #fde68a;
  font-weight: 700;
}

.sig-badge--info {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-weight: 700;
}

/* Cabecalho/acoes das telas de conta (suspensa) no molde auth. */
.sig-auth-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sig-auth-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Telas de erro (ERR-01/02) no molde auth: anuncio CENTRADO, ao contrario do
   card de login, que e um formulario e por isso alinha a esquerda. So o layout
   `errors` aplica isto — o 403 renderizado dentro do app fica no fluxo da tela,
   com o menu ao lado, e centralizar la seria estranho. */
.sig-erro {
  align-items: center;
  text-align: center;
}

/* O codigo ancora a leitura: grande para ser lido de relance e repetido ao
   suporte, na cor apagada para o titulo continuar sendo o titulo. Tabular para
   os tres digitos nao dancarem entre uma tela e outra. */
.sig-erro-codigo {
  margin: 0 0 8px;
  color: var(--sig-text-muted);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* A MESMA view sai em dois contextos. No layout `errors` ela ja chega dentro de
   um card centrado; dentro do app ela cai numa area de conteudo larga e vazia, e
   sem isto o bloco fica encostado no canto superior esquerdo, parecendo pagina
   pela metade. O bloco carrega o proprio card, e o layout `errors` o desfaz. */
.sig-erro-bloco {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  max-width: 420px;
  margin: 48px auto;
  padding: 28px 24px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  box-shadow: var(--sig-shadow-card);
}

/* Quando JA existe um card em volta, o bloco volta a ser transparente. Vale
   para o layout `errors` E para o `authentication` — o 429 do rate limit de
   login nasce sob este ultimo, e sem esta regra saia como card dentro de card.
   Ancorado em `.sig-auth-card`, que e o que os dois layouts tem em comum, e nao
   em `.sig-erro`, que so o `errors` emite. */
.sig-auth-card .sig-erro-bloco {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* O card de login e um formulario, onde o titulo e so um rotulo acima dos
   campos. Aqui ele e a frase principal, e ao lado de um numeral de 40px o
   tamanho do login sumia. */
.sig-erro-bloco .sig-auth-title {
  font-size: 20px;
}

/* Protocolo: metadado, nao texto corrido. Separado por um filete e em mono,
   porque o proposito dele e ser LIDO EM VOZ ALTA para o suporte — e num id
   sem serifa o 1 e o l se confundem. */
.sig-erro-protocolo {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--sig-border);
  width: 100%;
  font-size: 11.5px;
  color: var(--sig-text-muted);
}

.sig-erro-protocolo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

/* Alerta inline (reseller/new) — mesma familia do flash de erro. */
.sig-alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--sig-radius-control);
  font-size: 12.5px;
  font-weight: 600;
}

.sig-alert--error {
  background: var(--sig-alarm-bg);
  color: var(--sig-alarm);
}

/* Preview ao vivo do branding (WL-02): banner interativo + pickers de cor */
.sig-branding-preview-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--sig-radius-control);
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.sig-branding-preview-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sig-branding-preview-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}

.sig-branding-preview-logo-wrapper img {
  max-height: 32px;
  max-width: 160px;
  object-fit: contain;
}

.sig-branding-preview-default-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--sig-text);
}

.sig-branding-swatch-pair {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sig-branding-swatch-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.sig-branding-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease;
}

.sig-branding-color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sig-branding-color-picker {
  width: 42px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  background: var(--sig-card);
  cursor: pointer;
}

/* Listas de definicao (sims/show, reseller, branding) — mesmos moldes do
   .sig-details: rotulo mudo a esquerda, valor a direita. */
.sig-deflist,
.sig-detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: baseline;
}

.sig-deflist dt,
.sig-detail-list dt,
.sig-def-term {
  font-size: 12px;
  font-weight: 700;
  color: var(--sig-text-muted);
}

.sig-deflist dd,
.sig-detail-list dd,
.sig-def-value {
  margin: 0;
  word-break: break-word;
}

.sig-def-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sig-def {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--sig-border);
}

.sig-def:first-child {
  border-top: none;
}

/* Gate de senha dos links publicos (PUB-08): card estreito e centrado. */
.sig-public-gate {
  max-width: 380px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sig-public-gate-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.sig-public-gate-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Botao de tela cheia do modo TV alinhado ao fim da toolbar. */
.sig-tv-fullscreen {
  margin-left: 12px;
}

/* Fotos do registro de instalacao em grade compacta. */
.sig-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 10px;
}

.sig-photo-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--sig-radius-control);
  border: 1px solid var(--sig-border);
}

/* === pill generica + painel staff /admin (DSG-01, correcoes-uat-1 T30) —
   classes de marcação do admin (K1..K3) e da pagina de status eram fantasmas. === */
.sig-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  color: var(--sig-text-muted);
}

.sig-pill--accent {
  background: var(--sig-accent);
  border-color: var(--sig-accent);
  color: var(--sig-card);
}

.sig-pill--alert {
  background: var(--sig-alarm-bg);
  border-color: var(--sig-alarm-bg);
  color: var(--sig-alarm);
}

.sig-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}

.sig-card-value {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.sig-section-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.sig-empty {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sig-text-muted);
}

.sig-metric {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.sig-metric--muted {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sig-text-faint);
}

.sig-metric-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--sig-text-faint);
}

.sig-metric-caption {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--sig-text-faint);
}

.sig-metric-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sig-metric-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sig-metric-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.sig-metric-value {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sig-metric-foot {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--sig-text-faint);
}

.sig-funnel {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sig-funnel-step {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--sig-border);
  font-size: 12.5px;
}

.sig-funnel-step:first-child {
  border-top: none;
}

.sig-funnel-label {
  color: var(--sig-text-muted);
  font-weight: 500;
}

.sig-funnel-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sig-segmented {
  display: inline-flex;
  gap: 5px;
  background: var(--sig-card);
  border-radius: var(--sig-radius-control);
  padding: 4px;
  box-shadow: var(--sig-shadow-raised);
  align-self: flex-start;
}

.sig-segmented-item {
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-faint);
  text-decoration: none;
}

.sig-segmented-item--active {
  background: var(--sig-accent-soft);
  color: var(--sig-text);
  font-weight: 700;
}

.sig-pagination-info {
  font-size: 12px;
  color: var(--sig-text-muted);
}

.sig-incident-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sig-incident {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--sig-border);
}

.sig-incident:first-child {
  border-top: none;
}

.sig-incident-title {
  font-size: 13px;
  font-weight: 700;
}

.sig-incident-components {
  font-size: 12px;
  color: var(--sig-text-muted);
  margin-right: auto;
}

.sig-sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 8px 0;
}

/* === galeria de integrações (DSG-01, correcoes-uat-1 T28) — classes eram
   fantasmas nas views de integrations. Cards em grade responsiva, cabeçalho
   nome+estado, fieldset de eventos compacto. === */
.sig-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}

.sig-integration-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sig-integration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sig-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.sig-fieldset {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.sig-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--sig-text-muted);
}

.sig-badge--connected {
  background: var(--sig-accent-soft);
  color: var(--sig-text);
  border: 1px solid #dcedc8;
  font-weight: 700;
}

.sig-badge--disconnected {
  background: var(--sig-border);
  color: var(--sig-text-muted);
}

.sig-badge--requires_oauth {
  background: var(--sig-warn);
  color: var(--sig-card);
}

/* === paginacao numerada (correcoes-uat-1, STR-01/02) === */
.sig-pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; }
.sig-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 9px;
  border: 1px solid var(--sig-border);
  border-radius: 8px;
  background: var(--sig-card);
  color: var(--sig-text);
  font-size: 13px;
  text-decoration: none;
}
.sig-pagination-link:hover { border-color: var(--sig-accent); color: var(--sig-accent-strong); }
.sig-pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 9px;
  border: 1px solid var(--sig-accent);
  border-radius: 8px;
  background: var(--sig-accent);
  color: var(--sig-card);
  font-size: 13px;
  font-weight: 700;
}
.sig-pagination-gap { color: var(--sig-text-muted); padding: 0 2px; }
.sig-pagination-total { margin-left: auto; color: var(--sig-text-muted); font-size: 12px; }

/* === show de auditoria (correcoes-uat-1, STR-07) === */
.sig-audit-detail { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sig-audit-detail-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: baseline; }
.sig-audit-detail-row dt { font-size: 12px; font-weight: 700; color: var(--sig-text-muted); }
.sig-audit-detail-row dd { margin: 0; word-break: break-word; }
.sig-audit-metadata {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--sig-border);
  border-radius: 10px;
  background: var(--sig-surface);
  font-size: 12px;
  overflow-x: auto;
}

/* === separador do item "Nova organizacao" no menu da org (correcoes-uat-1, STR-09) === */
.sig-user-menu-separator { border-top: 1px solid var(--sig-border); margin-top: 6px; padding-top: 10px; }

/* STR-04: wizard de cadastro de dispositivo — stepper e painéis de passo.
   Painéis precisam da regra [hidden] explícita: o display do painel não pode
   vencer o atributo hidden alternado pelo wizard_controller. */
.sig-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.sig-wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  background: var(--sig-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.sig-wizard-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sig-border);
  color: var(--sig-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.sig-wizard-step--current {
  background: var(--sig-card);
  border-color: var(--sig-accent-strong);
  color: var(--sig-text);
}

.sig-wizard-step--current .sig-wizard-step-number,
.sig-wizard-step--done .sig-wizard-step-number {
  background: var(--sig-accent-strong);
  color: var(--sig-card);
}

/* Edição em seções agrupadas (correcoes-uat: acesso direto, visual do wizard). */
.sig-form-section {
  border: 0;
  border-top: 1px solid var(--sig-border);
  margin: 0;
  padding: 16px 0 4px;
  min-width: 0;
}

.sig-form-section:first-of-type,
.sig-form-section--divider,
.sig-form-section:has(.sig-form-section-divider) {
  border-top: 0;
  padding-top: 0;
}

.sig-form-section-title {
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sig-text);
}

/* Padrao de builder rows para condicoes e acoes (espelhando /data/explorer) */
.automation-builder-row,
.sig-builder-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  transition: border-color 0.15s ease;
}

.automation-builder-row:hover,
.sig-builder-row:hover {
  border-color: var(--sig-accent-strong);
}

.automation-builder-row .sig-field,
.sig-builder-row .sig-field {
  margin: 0;
}

/* UAT4-04: pilha de linhas do builder (condicoes, janelas, destinatarios) —
   mesmo espacamento entre linhas e o botao "adicionar" logo abaixo. */
.sig-builder-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

/* Nivel de escalonamento como ILHA, no mesmo vocabulario do grupo de condicoes
   das regras (UAT 2026-08-30). Antes os niveis eram divs em sequencia, sem caixa:
   dois niveis abertos viravam uma parede de campos onde nao dava para ver onde um
   terminava e o outro comecava. */
/* Divisor de secao: rotulo pequeno em caixa alta CENTRADO entre duas linhas.
   Componente UNICO do app desde 2026-09-01 — nasceu como copia do
   `.explorer-section-divider` do explorer.css, e os dois foram unificados aqui
   quando se mediu que eram visualmente identicos. */
.sig-form-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
}

/* Variante APERTADA, herdada do extinto `.explorer-section-divider`, que
   declarava `margin: 4px 0`. Ela existe para que a unificacao dos dois divisores
   nao mexesse no respiro de 29 lugares — o pedido era unificar, nao reespacar.

   Fica AQUI, antes das utilitarias `.sig-mb-*` (linha ~4268), de proposito: com a
   mesma especificidade (0,1,0), quem ganha e a ordem, entao a utilitaria vence a
   variante e `sig-mb-12` volta a valer 12px. No arquivo antigo era o contrario —
   `explorer.css` carrega DEPOIS da application.css, o divisor ganhava das
   utilitarias, e so `sig-mb-14` e `sig-mb-16` tinham correcao de especificidade.
   O `sig-mb-12` nao tinha: medido em /automations/new, os divisores "Condicoes" e
   "Acoes" pediam 12px e recebiam 4. */
.sig-form-section-divider--tight {
  margin: 4px 0;
}

.sig-form-section-divider::before,
.sig-form-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sig-border);
}

.sig-form-section-divider > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sig-text-muted);
  white-space: nowrap;
}

.sig-escalation-levels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.sig-escalation-level {
  padding: 14px 16px;
  margin: 0;
  border: 1px solid var(--sig-border);
}

/* Cabecalho do nivel: o numero a esquerda e o "Remover nivel" na ponta. Estavam
   colados um no outro no meio da linha, o que fazia o botao parecer parte do
   rotulo. */
.sig-escalation-level-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Grupo de condicoes (E) como ilha do builder, espelhando a caixa de acoes
   das automacoes; grupos alternativos (OU) ficam separados verticalmente. */
.alert-rule-group {
  padding: 14px 16px;
  margin-bottom: 12px;
}

.alert-rule-group > legend {
  padding: 0 6px;
  margin-left: -6px;
}

.sig-wizard-panel {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sig-wizard-panel[hidden] {
  display: none;
}

.sig-wizard-panel-title {
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--sig-text);
}

/* O atributo [hidden] precisa vencer o display autoral de .sig-field — sem
   isto os campos condicionais da ilha dev-eui (e qualquer campo alternado por
   JS) continuam visíveis mesmo ocultados. */
.sig-field[hidden] {
  display: none;
}

/* correcoes-uat-2 (WIZA): resumo client-side do passo de revisao do wizard de
   automacoes — dl simples preenchida pelo automation_builder#renderSummary. */
.sig-wizard-summary {
  display: grid;
  gap: 8px;
  margin: 0 0 4px;
}

.sig-wizard-summary > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.sig-wizard-summary dd {
  margin: 0;
  color: var(--sig-text);
}

.sig-wizard-summary[hidden] {
  display: none;
}

/* ==========================================================================
   Signalis Modern Design System - Glassmorphism, Tabs & Responsive Grid
   ========================================================================== */

/* Pulse Glow Animation para telemetria em tempo real */
@keyframes sig-pulse-glow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.sig-dot--online {
  background: #10b981;
  animation: sig-pulse-glow 2s infinite;
}

/* Sistema de Abas (Tabs) para páginas complexas */
/* As abas QUEBRAM em vez de rolar. `overflow-x: auto` sozinho nao resolvia:
   medido em /devices/:id a 589px de conteudo, as cinco abas somam 1033px e o
   container ROLA de fato (scrollLeft aceita 300), mas a barra de rolagem tem
   1px de altura — invisivel no macOS — e roda de mouse nao rola na horizontal.
   O mecanismo existia e nao havia como usa-lo: metade das abas ficava
   inalcancavel, sem nenhum sinal de que houvesse mais. Com `wrap` elas descem
   para a segunda linha quando nao cabem, e continuam numa linha so quando cabem. */
.sig-tab-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  border-bottom: 1px solid var(--sig-border);
  margin-bottom: 16px;
  padding-bottom: 2px;
}

.sig-tab-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sig-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sig-tab-link:hover {
  color: var(--sig-text);
  background: rgba(241, 245, 249, 0.6);
}

.sig-tab-link--active {
  color: var(--sig-accent-strong);
  border-bottom-color: var(--sig-accent-strong);
  font-weight: 700;
  background: var(--sig-card);
}

.sig-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sig-tab-panel[hidden] {
  display: none !important;
}

/* Grid System para Cards */
.sig-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}

.sig-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .sig-app {
    flex-direction: column;
  }

  /* NAO mexer na largura aqui. Este bloco (max-width: 768px) e uma segunda
     estrategia responsiva, de barra empilhada no topo, que conflita com a gaveta
     off-canvas definida em `max-width: 767px` — 1px de diferenca, e este vem
     depois no arquivo, entao ganhava. Com `width: 100%` a gaveta abria em tela
     CHEIA, cobria o scrim que fecha ao clique e escondia o proprio botao de
     menu: nao havia como sair dela a nao ser clicando num link de navegacao.
     A gaveta e a estrategia vigente (tem botao, scrim e transicao). */
  .sig-sidebar {
    padding: 12px 16px;
  }

  .sig-main {
    padding: 14px 14px 24px;
  }

  .sig-telemetry-hero-grid {
    grid-template-columns: 1fr;
  }

  .sig-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Construtor de Playlist TV */
.sig-playlist-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  margin-top: 10px;
}

.sig-playlist-dashboard-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.sig-playlist-dashboard-card:hover {
  border-color: var(--sig-border-hover);
  background: var(--sig-surface);
}

.sig-preset-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.sig-preset-chip {
  padding: 6px 14px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sig-preset-chip:hover {
  background: var(--sig-card);
  color: var(--sig-text);
  border-color: var(--sig-border-hover);
}

/* Seletor de Tipo de Widget em Dashboards */
.sig-widget-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 10px;
  margin-top: 6px;
}

.sig-widget-type-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.sig-widget-type-card:hover {
  border-color: var(--sig-accent-strong);
  background: var(--sig-surface);
}

/* ————— Passada de design admin + 2FA (achado de UAT 2026-07-30) ————— */

/* Variante de aviso do sig-alert (recovery codes do 2FA). */
.sig-alert--warn {
  background: var(--sig-warn-bg);
  color: var(--sig-warn);
}

/* Setup do 2FA: passos à esquerda, QR emoldurado à direita. */
.sig-2fa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}

@media (max-width: 720px) {
  .sig-2fa-grid {
    grid-template-columns: 1fr;
  }
}

.sig-steps {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.sig-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sig-steps strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.sig-steps p {
  margin: 0;
  font-size: 12.5px;
  color: var(--sig-text-muted);
}

.sig-step-badge {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sig-accent-soft);
  color: var(--sig-accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.sig-input--otp {
  max-width: 220px;
  font-size: 18px;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

.sig-2fa-qr {
  text-align: center;
}

.sig-2fa-qr .sig-qr {
  margin-bottom: 8px;
}

.sig-2fa-secret {
  margin: 0;
  max-width: 220px;
  font-size: 11.5px;
  color: var(--sig-text-faint);
}

.sig-2fa-secret code {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sig-text-muted);
  word-break: break-all;
}

.sig-recovery-aviso {
  margin-bottom: 16px;
  max-width: 480px;
}

/* Dashboard do admin: atalhos como cards-link vivos. */
.sig-admin-shortcut {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.sig-admin-shortcut:hover {
  border-color: var(--sig-accent-strong);
  transform: translateY(-1px);
}

.sig-admin-shortcut-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--sig-accent-soft);
  color: var(--sig-accent-strong);
  margin-bottom: 12px;
}

.sig-admin-shortcut-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--sig-text-muted);
}

/* Linha de status/ações no topo do conteúdo admin (pill do tenant, botão novo). */
.sig-admin-status-row {
  margin-bottom: 16px;
}

/* Cards de formulário do admin: largura de leitura, campos não esticam à tela toda. */
.sig-card--form {
  max-width: 640px;
}

/* Botão compacto (linha de status/voltar do admin). */
/* Familia COMPACTA: UMA altura, 32px (Eric, 2026-08-29). Vive dentro de linha de
   tabela e de lista densa, onde os 38px do padrao inflariam toda linha — mas
   tinha TRES alturas (24 no `--xs`, 32 no `--table`, 34 no `--sm`), o que e a
   mesma bagunca do padrao, so que em escala menor. 32 e o valor do `--table`,
   que e o uso mais denso e o que define o piso confortavel de toque.

   Precisa de `min-height: 0`, senao o piso de 38 do botao padrao venceria a
   altura declarada aqui. */
.sig-button--xs,
.sig-button--sm,
.sig-button--table {
  min-height: 0;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

/* `--xs` guarda o padding horizontal mais curto: e o botao de dentro de celula,
   onde cada pixel de largura disputa espaco com a coluna. So a ALTURA e comum. */
.sig-button--xs {
  padding: 0 10px;
}

/* ==========================================================================
   Utilitarios extraidos dos style= inline das views (refactor 2026-08-01).
   Vocabulario compartilhado: tiles de estatistica, linhas/pilhas flex e
   espacamentos recorrentes. Valores dinamicos (ex.: largura de medidor)
   entram por custom property --sig-* setada inline na view.
   ========================================================================== */

/* Tile: superficie pequena com rotulo uppercase + valor (sims, audit,
   billing, devices, integrations). */
.sig-tile {
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 12px 14px;
}

.sig-tile--stretch {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sig-tile-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sig-text-muted);
  display: block;
}

.sig-tile-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--sig-text);
  margin-top: 4px;
}

.sig-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

/* Linha flex generica (cabecalhos de secao, grupos de meta/acoes). */
.sig-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sig-row--between {
  justify-content: space-between;
}

.sig-row--divider {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sig-border);
}

.sig-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sig-stack--tight {
  gap: 6px;
}

/* Medidor fino (uso de franquia/quota) — largura via --sig-meter-w inline. */
.sig-meter {
  height: 6px;
  background: var(--sig-border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.sig-meter-fill {
  display: block;
  height: 100%;
  width: var(--sig-meter-w, 0%);
  background: var(--sig-accent-strong);
}

.sig-meter-fill--alarm {
  background: var(--sig-alarm);
}

/* Barras do logo signalis (SVG dos layouts) — fill nao aceita var() em
   atributo, so via CSS. */
.sig-logo-bar {
  fill: var(--sig-accent-strong);
}

.sig-logo-bar--dim {
  fill: var(--sig-accent-strong);
  opacity: 0.45;
}

.sig-logo-bar--mid {
  fill: var(--sig-accent-strong);
  opacity: 0.75;
}

.sig-logo-bar--ink {
  fill: var(--sig-text);
}

/* Espacamentos e ajustes pontuais recorrentes. */
.sig-m-0 { margin: 0; }
.sig-mb-0 { margin-bottom: 0; }
.sig-mb-4 { margin-bottom: 4px; }
.sig-mb-8 { margin-bottom: 8px; }
.sig-mb-10 { margin-bottom: 10px; }
.sig-mb-12 { margin-bottom: 12px; }
.sig-mb-14 { margin-bottom: 14px; }
.sig-mb-16 { margin-bottom: 16px; }
.sig-mt-2 { margin-top: 2px; }
.sig-mt-4 { margin-top: 4px; }
.sig-mt-8 { margin-top: 8px; }
.sig-mt-12 { margin-top: 12px; }
.sig-mt-14 { margin-top: 14px; }
.sig-mt-24 { margin-top: 24px; }
.sig-ta-left { text-align: left; }
.sig-ta-right { text-align: right; }
.sig-strong { font-weight: 700; }
.sig-semibold { font-weight: 600; }
.sig-hidden { display: none; }
.sig-w-full { width: 100%; }
.sig-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Texto secundario pequeno (subtitulos de celula/valor). */
.sig-subtext {
  font-size: 12px;
  color: var(--sig-text-muted);
}

.sig-subtext--faint {
  font-size: 11px;
  color: var(--sig-text-faint);
}

/* Titulo de sub-secao dentro de card (acoes do SIM, paineis de settings). */
.sig-subcard-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-meter--compact {
  height: 5px;
  margin-top: 4px;
  max-width: 140px;
}

/* Nota vazia centrada dentro de card/tabela. */
.sig-empty-note {
  padding: 20px 0;
  text-align: center;
}

.sig-badge--lg {
  font-size: 13px;
  padding: 6px 14px;
}

/* Controle da familia COMPACTA: 32px, o mesmo do botao compacto. Ficava em 36 e
   aparecia ao lado de um `--sm` de 32 dentro da celula de /admin/releases — a
   contraparte do descasamento que o padrao de 38px resolveu fora das tabelas. */
/* `.sig-input.sig-input--compact` (0,2,0) e nao `.sig-input--compact` (0,1,0): a
   regra da altura padrao e `.sig-input:not(textarea)`, que vale (0,1,1) e venceria
   — o campo continuava com 38 e a correcao nao aparecia. Quarta vez nesta sessao
   que uma regra de excecao perde por especificidade para a regra geral. */
.sig-input.sig-input--compact {
  height: 32px;
  font-size: 12px;
  padding: 0 12px;
}

.sig-scroll-x {
  overflow-x: auto;
}

.sig-text-faint {
  color: var(--sig-text-faint);
}

.sig-push-right {
  margin-left: auto;
}

.sig-divider-top {
  padding-top: 8px;
  border-top: 1px solid var(--sig-border);
}

.sig-page-title--mono {
  margin: 0;
  font-size: 1.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sig-label--muted {
  font-weight: 600;
  font-size: 12px;
  color: var(--sig-text-muted);
}

.sig-stack--form {
  gap: 14px;
  max-width: 440px;
}

.sig-settings-hint--sm {
  margin-bottom: 14px;
  font-size: 12px;
}

.sig-tile-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

/* Filtros de index (audit e afins): campos elasticos + controles 38px. */
/* O piso mora no `flex-basis`, e NAO no `min-width`. O `min-width: 140px` que
   estava aqui era letra morta: `.sig-field { min-width: 0 }` (application.css:4959)
   vem depois com a mesma especificidade, e todo campo de filtro carrega as duas
   classes. E aquele zero nao pode voltar atras — ele existe porque `min-width:
   auto` fazia o item herdar a largura INTRINSECA (input do Rails com `size=100`,
   select dimensionado pela opcao mais longa) e quatro telas rolavam na horizontal.

   Sem piso nenhum, porem, os cinco filtros de /audit_events dividiam o que
   sobrava depois dos 323px da faixa de botoes e viravam campos de 45px a 900px de
   viewport — ilegiveis, o defeito que o comentario da regra de tela estreita ja
   previa. `flex-basis` resolve os dois: ele decide ONDE a linha quebra (o campo
   desce em vez de espremer) e continua permitindo encolher, entao nao ressuscita
   o estouro horizontal. Medido a 752, 900 e 1100px. */
.sig-filter-field {
  flex: 1 1 160px;
}

.sig-filter-field--sm {
  flex-basis: 130px;
}

/* PISO DE GRADE — `minmax(min(Npx, 100%), 1fr)`, e nunca `minmax(Npx, 1fr)`
   (2026-08-29). `minmax(Npx, ...)` e um piso INTRINSECO: mesmo em uma coluna a
   grade nunca declara menos que N, e num container mais estreito que N ela vaza.
   Era a causa da rolagem horizontal de `/`, `/data/explorer` e `/integrations` a
   320px — cards de 320px num espaco de 292 — e ja tinha sido remendada duas
   vezes com media query (`.billing-overview-grid` e `.dash-form-row-2`).
   O `min(Npx, 100%)` e inerte quando o container e mais largo que N e cede
   sozinho quando nao e, em qualquer largura, sem breakpoint. As 27 faixas de
   `grid-template-columns` do sistema usam esta forma. */

/* ==========================================================================
   BARRA DE FILTROS — o componente unico (UAT 2026-08-29)
   ==========================================================================
   Antes disto a mesma barra existia em CINCO containers diferentes
   (`sig-form sig-field-row`, `sig-filter-form`, `sig-filters`,
   `sig-form--inline`, `dash-search-form`), e por isso divergia em quatro eixos
   ao mesmo tempo: altura do controle (38, 40 e 42 — em /devices, 42 e 40 na
   MESMA barra), largura (cada campo pelo conteudo, deixando a barra serrilhada),
   posicao (8 telas em card proprio, 3 dentro do card da tabela) e cor do botao
   (8 cinza, 3 verde). Nao era descuido pontual: sem componente, cada tela nova
   reinventava a barra, e a divergencia voltava.

   As decisoes, do Eric em 2026-08-29:
   - barra em CARD PROPRIO, acima da tabela — separa o que o operador controla do
     que o sistema devolve, e deixa a tabela sozinha no card dela;
   - botao "Filtrar" CINZA (ghost) — filtrar e acao secundaria, e o verde fica
     reservado para a acao principal da tela ("Novo dispositivo", "Nova regra");
     dois verdes competindo e o que se queria evitar;
   - controle com 38px de altura, sempre;
   - campos com a MESMA largura quando dividem a linha.

   O `flex: 1 1 190px` e o que alinha: mesma base e mesmo crescimento fazem os
   campos de uma linha terminarem identicos, em vez de cada um medir o proprio
   conteudo. O grupo de acoes fica `flex: 0 0 auto` para o botao guardar a
   largura natural — botao esticado do tamanho de um select parece defeito. */
.sig-filtros {
  /* GRADE, e nao flex. Com flex os campos crescem por LINHA, entao numa barra que
     quebra 3 + 1 a linha de baixo tinha um campo de 480px ao lado de tres de 200
     — desigual justamente nas larguras intermediarias (medido a 700, 900 e
     1000px). Em grade a coluna e a mesma para todas as linhas, por construcao.

     `auto-fill` e nao `auto-fit`: `auto-fit` colapsa as colunas vazias e faz os
     poucos itens restantes se esticarem, o que devolveria o campo gigante numa
     barra de um filtro so (a busca de /organization/members). Com `auto-fill` a
     coluna tem sempre a mesma largura, e sobra espaco a direita — que e o
     comportamento uniforme.

     `minmax(min(190px, 100%), 1fr)` pelo mesmo motivo das outras grades do
     sistema: piso em px vaza em container mais estreito que ele. */
  /* Uma GRADE so, para campos e acoes: a coluna e a mesma em todas as linhas, e
     o grupo de acoes cai na celula logo apos o ultimo campo — a 12px dele, e nao
     empurrado para a borda direita do card. Com o grupo FORA da grade (num
     wrapper flex que crescia), a folga entre o ultimo campo e os botoes chegava a
     228px em /devices e 661px em /calibrations a 1440px. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  align-items: end;
  gap: 12px;
  /* Quando a barra vive dentro de um `.sig-toolbar` (devices, sims, qt, mapa),
     ela e item de flex e ficaria `0 1 auto` — encolhendo ate a largura dos
     campos e empurrando o botao para a linha de baixo, com 300px de card vazio
     ao lado. Medido em /devices: form de 844 num toolbar de 1150. Tomando a
     linha inteira, campos e botao cabem juntos. */
  flex: 1 1 100%;
}

/* Os CAMPOS na grade; as ACOES fora dela. Foi a unica forma de ter as duas
   propriedades ao mesmo tempo: campo com largura igual em toda linha (grade) e
   botao com largura natural ao lado (flex). Com tudo numa grade so, o grupo de
   acoes ocupava UMA celula de ~190px e os tres botoes de /audit_events (Filtrar,
   Limpar, Exportar CSV) vazavam o card a 900px — e nao a 1440, onde a coluna e
   mais larga, que foi como escapou da primeira verificacao.

   As alternativas medidas e recusadas: `flex-wrap` no grupo empilha os botoes em
   duas alturas (84px); `grid-column: span 2` e `1 / -1` nao vazam, mas custam uma
   linha extra a barra em 1440px. */
/* `display: contents`: o wrapper agrupa os campos no MARKUP — util para ler a
   view e para a regra de tela estreita — mas nao forma caixa, entao os campos
   entram como itens diretos da grade acima. Wrapper com caixa propria foi a
   tentativa anterior, e era ele que empurrava as acoes para a borda. */
.sig-filtros-campos {
  display: contents;
}

.sig-filtros-campos > .sig-field,
.sig-filtros-campos > .sig-input {
  min-width: 0;
}

/* UMA coluna, ao lado do ultimo campo. Medido: "Filtrar" sozinho ocupa 69px e
   "Filtrar + Limpar" 151px — os dois cabem folgados numa coluna de 190. Eu tinha
   reservado DUAS para todo mundo por causa de uma unica tela, e isso empurrava o
   grupo para a linha de baixo em barras onde ele cabia ao lado. */
.sig-filtros > .sig-filtros-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* A excecao e nominal: /audit_events carrega um TERCEIRO botao no mesmo grupo, o
   "Exportar CSV", que nao e acao de filtro — precisa do mesmo form por causa do
   `formaction`, mas soma 272px e vaza a celula de 190. So essa barra reserva duas
   colunas; quando as duas nao cabem na linha, o grupo inteiro desce. */
.sig-filtros > .sig-filtros-acoes--larga {
  grid-column: span 2;
}

/* Card da barra: mesmo card do sistema, so sem a margem de baixo dobrada com a
   do card da tabela que vem logo abaixo. */
.sig-card--filtros {
  margin-bottom: 16px;
}

.sig-input--filter {
  width: 100%;
  height: 38px;
}

.sig-button--filter {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

.sig-label--ghost {
  visibility: hidden;
}

/* Filtros com Gaveta Avançada (Proposta 3) */
.sig-filtros-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-filtros-main {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.sig-filtros-main .sig-filter-field {
  flex: 1 1 200px;
  min-width: 160px;
  width: 100%;
}

.sig-filtros-main .sig-input--filter {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .sig-filtros-main {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sig-filtros-main .sig-filter-field {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }

  .sig-filtros-main .sig-filtros-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
  }

  .sig-filtros-main .sig-filtros-acoes .sig-button {
    flex: 1 1 auto;
  }
}

.sig-filtros-details {
  display: block;
}

.sig-filtros-details > summary {
  display: none;
}

.sig-filtros-drawer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
  padding: 14px 16px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  animation: sig-slide-down 0.2s ease-out;
}

@keyframes sig-slide-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sig-filter-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sig-accent-strong);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
}

.sig-filtros-toggle-icon {
  margin-right: 4px;
  vertical-align: -2px;
}

/* Filtros por Chips / Pílulas Rápidas (Proposta 2) */
.sig-filter-chips-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-filter-chips-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sig-filter-chips-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sig-text-faint);
  margin-right: 4px;
  white-space: nowrap;
}

.sig-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.sig-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  color: var(--sig-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  line-height: 1.2;
}

.sig-filter-chip:hover {
  background: var(--sig-card);
  color: var(--sig-text);
  border-color: var(--sig-border-hover);
}

.sig-filter-chip--active {
  background: var(--sig-text);
  color: #ffffff !important;
  border-color: var(--sig-text);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.sig-filter-chip--critical.sig-filter-chip--active {
  background: var(--sig-alarm);
  border-color: var(--sig-alarm);
  color: #ffffff !important;
}

.sig-filter-chip--warning.sig-filter-chip--active {
  background: var(--sig-warn);
  border-color: var(--sig-warn);
  color: #ffffff !important;
}

.sig-filter-chip--info.sig-filter-chip--active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff !important;
}

/* Barra de Filtros Compacta e Integrada (Proposta 1) */
.sig-filtros-inline {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.sig-filtros-inline .sig-filter-field {
  flex: 1 1 140px;
  min-width: 130px;
}

.sig-filtros-inline .sig-filtros-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .sig-filtros-inline .sig-filter-field {
    flex: 1 1 calc(50% - 6px);
    min-width: 130px;
  }

  .sig-filtros-inline .sig-filtros-acoes {
    flex: 1 1 100%;
    margin-top: 4px;
  }

  .sig-filtros-inline .sig-filtros-acoes .sig-button {
    flex: 1 1 50%;
  }
}

/* `min-height`, e nao `height`. Os 38px existem para alinhar a linha de botoes
   com a linha de campos ao lado, no desktop — e altura FIXA nao cresce quando os
   botoes quebram em mais de uma linha. Em /audit_events a 375px sao tres
   (Aplicar filtros, Limpar, Exportar CSV): eles vazavam pela borda de baixo do
   card e ficavam por baixo do card seguinte. Era o achado 8 do UAT de
   2026-08-29. O piso preserva o alinhamento do desktop e a caixa cresce quando
   precisa, em qualquer largura — e nao so abaixo de um breakpoint. */
.sig-filter-actions--tall {
  min-height: 38px;
}

/* Rodape de paginacao prev/next (audit e indexes hand-rolled). */
.sig-pager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--sig-border);
  flex-wrap: wrap;
  gap: 12px;
}

.sig-button--pager {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

.sig-link-plain {
  color: var(--sig-text);
  text-decoration: none;
}

.sig-badge--md {
  font-size: 12px;
}

.sig-badge--xs {
  font-size: 11.5px;
  font-weight: 600;
}

.sig-tile-grid--md {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.sig-nowrap {
  white-space: nowrap;
}

.sig-break-all {
  word-break: break-all;
}

.sig-mb-20 {
  margin-bottom: 20px;
}

/* Icone de marca da galeria de integracoes — cor da marca via custom
   property inline (valor vem do helper por tipo). */
.sig-integration-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--integration-color, var(--sig-accent)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--integration-color, var(--sig-accent)) 19%, transparent);
  color: var(--integration-color, var(--sig-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sig-card--alarm-edge {
  border-left: 4px solid var(--sig-alarm);
}

.sig-filter-form--top {
  gap: 12px;
  align-items: flex-start;
}

.sig-filter-slot {
  display: flex;
  flex-direction: column;
}

.sig-card-grid--integrations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  align-items: stretch;
}

.sig-integration-card--stretch {
  justify-content: space-between;
  height: 100%;
}

.sig-integration-header--top {
  align-items: flex-start;
  gap: 12px;
}

.sig-card-title--lg {
  margin: 0;
  font-size: 1.1rem;
}

.sig-tile--dense {
  padding: 10px 12px;
  font-size: 12px;
}

.sig-subtext--dim {
  color: var(--sig-text-muted);
  font-size: 11px;
}

.sig-credential-value--block {
  font-size: 11.5px;
  padding: 10px;
}

.sig-credential-value--inline {
  font-size: 12px;
  padding: 6px 10px;
}

.sig-integration-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--sig-border);
}

.sig-toolbar--inline {
  margin: 0;
  justify-content: flex-start;
  gap: 8px;
}

.sig-mt-6 { margin-top: 6px; }
.sig-mt-10 { margin-top: 10px; }

/* Painel de compartilhamento (links publicos do dashboard). */
.dash-share {
  margin-top: 16px;
}

.dash-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.dash-share-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sig-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-share-open {
  white-space: nowrap;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-share-panel {
  padding: 18px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
}

.dash-share-panel-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sig-text);
}

.dash-share-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-share-form--edit {
  gap: 12px;
}

.dash-share-label {
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}

.dash-share-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--sig-text-muted);
  text-align: center;
}

.dash-share-url-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 440px;
  /* Mesmo caso ja documentado no bloco de `min-width: 0` (application.css:4959):
     `<input>` do Rails sem `size` carrega largura INTRINSECA, e como item de flex
     com `min-width: auto` ele nao encolhe. A celula media 263px de minimo, e a
     385px de tela a coluna da URL sozinha ja nao cabia com o expansor — a tabela
     por prioridade avisava TAB-16 (nem o piso coube) com razao. */
  min-width: 0;
}

/* `width: 0` + `flex-grow`, e nao `flex-basis: 0`. A coluna da URL declarava
   263px de minimo e sozinha ja estourava a caixa de 301px a 375px de tela: um
   `<input>` do Rails sem `size` vale 20 caracteres (~175px), mais o botao
   "Copiar" (70) e o gap. Medido em quatro candidatos no navegador — `size=1`,
   `width: 0`, `table-layout: fixed` e esconder o input levam a tabela de 365 para
   301; `flex-basis: 0` NAO, porque o minimo intrinseco que a tabela usa para
   dimensionar coluna sai de `width`/`size`, e nao da base do flex. Com
   `flex-grow` o campo recupera toda a largura disponivel quando ela existe.

   O `min-width: 90px` devolve um piso DEPOIS de matar o intrinseco: so com
   `width: 0` o campo ficava com 60px a 741px de tela — mais estreito do que a
   375, porque ali as cinco colunas dividem a linha. Com o piso: 104 / 116 / 270
   nas tres larguras, e a tabela continua cabendo (281 dos 301 disponiveis).

   O seletor tem dois niveis de proposito: `.sig-input` recebe `flex-basis: 100%`
   na regra de tela estreita mais abaixo neste arquivo, e com a mesma
   especificidade venceria. */
.dash-share-url-cell > .dash-share-url {
  font-size: 12px;
  font-family: monospace;
  background: var(--sig-surface);
  width: 0;
  min-width: 90px;
  flex: 1 1 auto;
}

.dash-share-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sig-accent-strong);
  font-weight: 600;
}

.dash-share-edit-panel {
  padding: 16px 18px;
  margin: 6px 0 14px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
}

.dash-share-edit-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sig-text);
}

.dash-share-row {
  border: none;
}

.dash-share-row > td {
  padding: 0;
  border: none;
}

.sig-checkbox--compact {
  font-size: 12px;
  margin: 0;
}

.sig-checkbox--accent {
  color: var(--sig-accent-strong);
  font-weight: 700;
}


.sig-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.sig-mt-16 { margin-top: 16px; }

/* Grupo de acoes flex generico (fora de tabela: paineis, celulas custom). */
.sig-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sig-actions--end {
  justify-content: flex-end;
}

.sig-fieldset-plain {
  border: none;
  padding: 0;
  margin: 0;
}

.sig-flex-fill {
  flex: 1;
  min-width: 0;
}

.sig-flex-1 {
  flex: 1;
}

.sig-option-title {
  margin: 0;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sig-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sig-option-hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--sig-text-muted);
}

.sig-mt-0 { margin-top: 0; }

/* Lista de chips com rolagem (selecao de regras do builder). */
.sig-chips-scroll {
  max-height: 160px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  background: var(--sig-surface);
}

.sig-input--chip-filter {
  height: 32px;
  font-size: 11.5px;
  padding: 0 10px;
}

.sig-page-title--lg {
  margin: 0;
  font-size: 1.3rem;
}

.sig-tile-value--hero {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sig-tile-value--row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sig-tile--accent-edge {
  border-left: 4px solid var(--sig-accent-strong);
}

.sig-tile-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--sig-text);
}

.sig-note {
  font-size: 11.5px;
  color: var(--sig-text-muted);
  font-weight: 500;
}

.sig-quote {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--sig-text-muted);
  font-style: italic;
}

.sig-hint-sm {
  font-size: 12.5px;
  color: var(--sig-text-muted);
}

.sig-block { display: block; }
.sig-mb-2 { margin-bottom: 2px; }
.sig-mb-6 { margin-bottom: 6px; }

/* Importacao de devices em CSV. */
.devices-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

.sig-button--icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sig-button--block {
  width: 100%;
  height: 38px;
  font-weight: 700;
}

.sig-button--cta {
  height: 38px;
  padding: 0 24px;
  font-weight: 700;
}

.sig-settings-hint--plain {
  margin: 0;
  font-size: 12px;
  color: var(--sig-text);
}

.sig-tile-label--md {
  font-size: 12px;
  letter-spacing: normal;
}

.sig-hint-13 {
  font-size: 13px;
  color: var(--sig-text-muted);
}

.sig-stack--cozy {
  gap: 8px;
}

.sig-actions--roomy {
  gap: 10px;
}

.sig-badge--count {
  font-weight: 700;
  padding: 4px 10px;
}

.sig-doc-list {
  font-size: 12.5px;
  color: var(--sig-text);
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sig-col-narrow {
  width: 80px;
}

.sig-my-2 {
  margin: 2px 0;
}

.sig-success-banner {
  margin-top: 20px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--sig-radius-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.sig-success-banner-title {
  font-weight: 700;
  color: var(--sig-ok);
  font-size: 14px;
  margin-bottom: 2px;
}

.sig-telemetry-value--empty {
  color: var(--sig-text-faint);
  font-size: 1.5rem;
}

/* Dropdown do picker de template de dashboard. */
.dash-template-picker {
  position: relative;
}

.dash-template-trigger {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.dash-template-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: 320px;
  padding: 18px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  box-shadow: var(--sig-shadow-raised);
}

.dash-template-title {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sig-text);
}

.dash-template-picker-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-toolbar--end {
  justify-content: flex-end;
  gap: 8px;
}

.sig-toolbar--start {
  justify-content: flex-start;
}

/* Posicionamento data-driven da grade publica (coords do widget). */
.dash-public-cell {
  grid-column: var(--dash-col);
  grid-row: var(--dash-row);
}

.sig-member--sensor {
  padding: 12px 16px;
  flex-wrap: wrap;
}

/* Sensor List Item Cards on Device Show */
.sig-sensor-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.sig-sensor-card {
  background: var(--sig-card-bg-subtle, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sig-sensor-card:hover {
  border-color: var(--sig-border-strong);
}

.sig-sensor-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}

.sig-sensor-card__identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sig-sensor-card__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sig-sensor-card__kind {
  font-size: 13px;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-sensor-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-sensor-card__reading-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--sig-text-muted);
}

.sig-sensor-card__reading-val {
  font-weight: 700;
  color: var(--sig-text);
  font-size: 14px;
}

.sig-sensor-card__reading-time {
  color: var(--sig-text-muted);
  font-size: 12px;
}

.sig-sensor-card__position {
  background: var(--sig-bg, rgba(0, 0, 0, 0.15));
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-sm);
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

.sig-sensor-position-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.sig-sensor-position-form__intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sig-sensor-position-form__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sig-sensor-position-form__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
}

.sig-sensor-position-form__action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

@media (max-width: 900px) {
  .sig-sensor-position-form__fields {
    grid-template-columns: 1fr;
  }
  .sig-sensor-position-form__action {
    padding-bottom: 0;
  }
}

/* Disclosure / Collapsible Details Component */
.sig-disclosure {
  width: 100%;
}

.sig-disclosure-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--sig-accent-strong, #3b82f6);
  padding: 8px 14px;
  border-radius: var(--sig-radius-sm);
  background: var(--sig-accent-soft, rgba(59, 130, 246, 0.08));
  border: 1px solid var(--sig-border);
  transition: all 0.15s ease;
  user-select: none;
  list-style: none;
  width: fit-content;
}

.sig-disclosure-summary::-webkit-details-marker {
  display: none;
}

.sig-disclosure-summary:hover {
  background: var(--sig-surface-hover);
  color: var(--sig-text);
}

/* Device Model Specs & Sensor Templates */
.sig-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
}

.sig-spec-item {
  background: var(--sig-card-bg-subtle, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sig-spec-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sig-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sig-spec-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-sensor-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.sig-sensor-template-card {
  background: var(--sig-card-bg-subtle, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.15s ease;
}

.sig-sensor-template-card:hover {
  border-color: var(--sig-border-strong);
}

.sig-sensor-template-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--sig-radius-sm);
  background: var(--sig-accent-soft, rgba(59, 130, 246, 0.08));
  color: var(--sig-accent-strong, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sig-sensor-template-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sig-sensor-template-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-sensor-template-card__meta {
  font-size: 12px;
  color: var(--sig-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sig-code-sm {
  font-size: 11px;
}

.sig-button--compact {
  padding: 6px 12px;
  font-size: 12px;
}

.sig-button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  min-width: 32px;
  height: 32px;
  box-sizing: border-box;
}

/* Action Group and Dropdown Menu (Padrão Híbrido) */
.sig-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.sig-action-dropdown {
  position: relative;
  display: inline-block;
}

.sig-action-dropdown summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sig-action-dropdown summary::-webkit-details-marker {
  display: none;
}

.sig-action-dropdown summary:hover,
.sig-action-dropdown[open] summary {
  background: var(--sig-surface);
  border-color: var(--sig-border-hover);
}

.sig-action-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 150px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  box-shadow: var(--sig-shadow-raised);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sig-action-menu-panel form {
  display: block;
  margin: 0;
  width: 100%;
}

.sig-action-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--sig-radius-control);
  background: none;
  font-family: var(--sig-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--sig-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.sig-action-menu-item:hover {
  background: var(--sig-surface);
}

.sig-action-menu-item--danger {
  color: #b91c1c;
}

.sig-action-menu-item--danger:hover {
  background: var(--sig-alarm-bg);
  color: #b91c1c;
}

.sig-action-menu-item svg {
  flex-shrink: 0;
}

.sig-action-menu-divider {
  height: 1px;
  background: var(--sig-border);
  margin: 4px 0;
  width: 100%;
}

.sig-action-menu-panel--up {
  top: auto;
  bottom: calc(100% + 4px);
}

.sig-button--md {
  height: 38px;
  padding: 0 18px;
}

.sig-section-divider {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sig-border);
}

.sig-tile--panel {
  padding: 18px;
}

.sig-stack--form-fluid {
  gap: 14px;
}

.sig-details-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-text-muted);
  cursor: pointer;
  user-select: none;
}

.sig-json-block {
  margin-top: 6px;
  padding: 10px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  overflow-x: auto;
}

.sig-ml-4 { margin-left: 4px; }

.sig-error-text {
  color: var(--sig-alarm);
  font-weight: 600;
}

/* Painel de assinatura (billing).

   A segunda trilha e `minmax(0, 2fr)`, e nao `minmax(min(320px, 100%), 2fr)`.
   `min(Npx, 100%)` resolve piso maior que o CONTAINER, mas aqui o problema era a
   SOMA de dois pisos: 280 + 320 + 16 de gap = 616 contra um container de 556, que
   e o que sobra entre 768 e ~860px de tela — a faixa em que a barra lateral ja
   aparece e a janela ainda e estreita. A pagina rolava 836 contra 800. Com o piso
   da segunda em 0, a primeira guarda os 280 e a segunda fica com o resto; acima
   disso a proporcao 1fr:2fr volta a valer. */
.billing-overview-grid {
  grid-template-columns: minmax(min(280px, 100%), 1fr) minmax(0, 2fr);
  gap: 16px;
  margin-bottom: 16px;
}

.billing-current-plan--column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.billing-plan-headline {
  margin: 0 0 6px;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sig-text);
}

.billing-plan-price-lg {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sig-accent-strong);
  font-variant-numeric: tabular-nums;
}

.billing-plan-cycle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.billing-plan-cycle--sm {
  font-size: 0.8rem;
  font-weight: 500;
}

.billing-payment-line {
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.billing-plan-card-name--lg {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

.billing-plan-card-price--lg {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sig-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}

.billing-plan-current-note {
  padding: 8px 0;
  text-align: center;
  color: var(--sig-accent-strong);
  font-weight: 700;
  font-size: 13px;
}

.sig-divider-top--roomy {
  padding-top: 14px;
}

.sig-button--full-center {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.sig-button-full {
  width: 100%;
  justify-content: center;
}

.sig-stack--builder {
  gap: 10px;
}

.sig-stack--roomy {
  gap: 12px;
}

.sig-align-end {
  align-items: flex-end;
}

.sig-field--grow-2 { flex: 2 1 200px; }
.sig-field--grow-220 { flex: 1 1 220px; }
.sig-field--grow-140 { flex: 1 1 140px; }
.sig-field--grow-130 { flex: 1 1 130px; }
.sig-field--grow-120 { flex: 1 1 120px; }

.sig-row--tight {
  gap: 10px;
}

.sig-row--snug {
  gap: 8px;
}

/* Texto corrido gerado (narrativas/relatorios/mensagens do copiloto). */
.sig-prose {
  font-size: 13.5px;
  color: var(--sig-text);
  line-height: 1.6;
}

.sig-prose--message {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.copilot-report-content {
  line-height: 1.7;
  font-size: 14px;
}

.copilot-report-content h1,
.copilot-report-content h2,
.copilot-report-content h3 {
  color: var(--sig-text);
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 700;
}

.copilot-report-content h2 {
  font-size: 17px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sig-border);
}

.copilot-report-content h3 {
  font-size: 15px;
}

.copilot-report-content p {
  margin-bottom: 14px;
}

.copilot-report-content ul,
.copilot-report-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.copilot-report-content li {
  margin-bottom: 6px;
}

.copilot-report-content strong {
  color: var(--sig-text);
  font-weight: 700;
}

.sig-input--min-140 { min-width: 140px; }
.sig-input--min-160 { min-width: 160px; }

.sig-link-accent {
  color: var(--sig-accent-link);
  text-decoration: none;
}

.sig-input--plan {
  flex: 1;
  max-width: 200px;
}

.sig-field--grow-240 { flex: 1 1 240px; }
.sig-field--grow-200 { flex: 1 1 200px; }
.sig-field--fixed { flex: 0 0 auto; }

.sig-button--cta-38 {
  height: 38px;
  padding: 0 20px;
  font-weight: 700;
}

.sig-search-box {
  width: 320px;
  max-width: 100%;
}

.sig-input--search {
  height: 38px;
  font-size: 13px;
  width: 100%;
}

.sig-home-card-title--row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.sig-home-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sig-home-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Grafico destaque da home (SVG server-rendered). */
.sig-chart--clipped {
  position: relative;
  overflow: hidden;
}

.sig-chart-header--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.sig-chart-heading--fluid {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

.sig-chart-device-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sig-text-muted);
  flex-shrink: 0;
}

.sig-chart-device-form {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
}

.sig-chart-device-select {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sig-text);
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.sig-chart-meta--wrap {
  font-size: 11.5px;
  color: var(--sig-text-muted);
  word-break: break-word;
}

.sig-chart-last-box {
  text-align: right;
  flex-shrink: 0;
}

.sig-chart-last--xl {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sig-chart-last-caption {
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.sig-chart-canvas {
  margin-top: 14px;
  position: relative;
}

.sig-chart-svg {
  width: 100%;
  height: 220px;
  display: block;
}

.sig-chart-axis--row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.sig-page-numbers {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.sig-h-38 {
  height: 38px;
}

.sig-list-flat {
  margin: 0;
  padding-left: 20px;
}

.sig-input--hex {
  font-family: monospace;
  text-transform: uppercase;
}

/* Codigo de pareamento do WhatsApp (show-once). */
.sig-pairing-code {
  font-size: 26px;
  letter-spacing: 5px;
  font-family: ui-monospace, monospace;
  margin: 10px 0;
}

.sig-metric--alarm {
  color: var(--sig-alarm);
}

.sig-metric-list--roomy {
  gap: 12px;
}

/* AD-047 (ALCOA-07): dialog nativo de justificativa — top-layer do navegador,
   zero lib nova (AD-022); fecha com Esc pelo proprio <dialog>. */
.sig-dialog {
  border: 1px solid var(--sig-border);
  border-radius: 12px;
  background: var(--sig-card);
  color: var(--sig-text);
  padding: 20px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
  /* UAT5-04: o dialog e filho direto de .sig-form (flex column), entao o
     `margin: auto` que o navegador usa para centralizar o modal era anulado e
     ele colava no canto superior esquerdo. Centralizacao e limites declarados
     explicitamente; a altura rola dentro do proprio dialog em telas baixas. */
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-height: min(85dvh, 620px);
  overflow-y: auto;
}

/* O conteudo nunca estoura a caixa (textarea/botoes em telas estreitas). */
.sig-dialog .sig-input,
.sig-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.sig-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
}

.sig-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* === Módulo de Qualificação Térmica (QT) === */

.qt-probe-device {
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 14px 18px;
  margin: 16px 0;
  background: var(--sig-surface);
}

.qt-probe-device-name {
  font-size: 13px;
  font-weight: 700;
  padding: 0 8px;
  color: var(--sig-text);
}

.qt-probe-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: 8px;
  margin: 8px 0;
  transition: all 0.15s ease;
  cursor: pointer;
}

.qt-probe-row:hover {
  border-color: var(--sig-border-hover);
  background: var(--sig-bg);
}

.qt-probe-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sig-accent-strong);
  cursor: pointer;
}

.qt-probe-position {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-faint);
  background: var(--sig-surface);
  padding: 2px 8px;
  border-radius: 12px;
}

/* Wizard - Passo de Revisão */
.qt-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
  margin: 16px 0;
}

.qt-review-card {
  padding: 20px;
  background: var(--sig-accent-soft);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qt-review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sig-shadow-raised);
}

.qt-review-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--sig-accent-strong);
  line-height: 1.2;
  margin-bottom: 4px;
}

.qt-review-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sig-text-muted);
}

/* Detalhes do Estudo - KPI Cards */
.qt-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
  margin: 16px 0 24px;
}

.qt-metric-card {
  padding: 16px 20px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  box-shadow: var(--sig-shadow-card);
  transition: all 0.2s ease;
}

.qt-metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--sig-border-hover);
  box-shadow: var(--sig-shadow-raised);
}

.qt-metric-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--sig-text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.qt-metric-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--sig-text-muted);
}

.qt-verdict-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.qt-verdict-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qt-verdict-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
}

.qt-verdict-desc {
  font-size: 13.5px;
  color: var(--sig-text-muted);
  margin: 0;
}

.qt-hash-box {
  font-size: 11px;
  color: var(--sig-text-faint);
  margin: 8px 0 0 0;
}

.qt-hash-box code {
  font-family: monospace;
  background: var(--sig-surface);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

/* Mapa de calor & Recomendações */
.qt-heat-map-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
}

.qt-heat-map {
  width: 100%;
  max-width: 720px;
  overflow: auto;
}

.qt-recommendations-box {
  background: var(--sig-surface);
  border-left: 4px solid var(--sig-accent);
  padding: 16px 20px;
  border-radius: 0 var(--sig-radius-control) var(--sig-radius-control) 0;
  margin-top: 16px;
}

.qt-recommendations-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sig-text);
  margin: 0 0 10px 0;
}

.qt-recommendations-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--sig-text-muted);
  line-height: 1.5;
}

.qt-recommendations-list li {
  margin-bottom: 6px;
}
.qt-recommendations-list li:last-child {
  margin-bottom: 0;
}

.sig-tab-card {
  padding: 20px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  box-shadow: var(--sig-shadow-card);
}

/* Gestão de Releases de Firmware (AD-035 / OTA-14) */

.sig-release-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sig-release-hero {
  position: relative;
  background: linear-gradient(135deg, var(--sig-card) 0%, var(--sig-surface) 100%);
  border: 1px solid var(--sig-border);
  border-left: 4px solid var(--sig-accent);
  border-radius: var(--sig-radius-card);
  padding: 24px 28px;
  box-shadow: var(--sig-shadow-raised);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all 0.2s ease;
}

.sig-release-hero:hover {
  border-color: var(--sig-border-hover);
}

.sig-release-hero--none {
  border-left-color: var(--sig-border);
  background: var(--sig-card);
}

.sig-release-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sig-release-hero-badge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sig-release-hero-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sig-accent-strong);
  background: var(--sig-accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 195, 74, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sig-release-hero-version {
  font-size: 28px;
  font-weight: 800;
  color: var(--sig-text);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sig-release-hero-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px 24px;
  padding: 18px 22px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
}

.sig-release-spec-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sig-release-spec-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sig-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sig-release-spec-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--sig-text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sig-release-notes-box {
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 14px 18px;
}

.sig-release-notes-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sig-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.sig-release-notes-content {
  font-size: 13px;
  color: var(--sig-text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Gaveta de Ação para Retirada (substitui o input cru na tabela) */
.sig-retire-dropdown {
  position: relative;
  display: inline-block;
}

.sig-retire-dropdown summary {
  list-style: none;
  cursor: pointer;
}

.sig-retire-dropdown summary::-webkit-details-marker {
  display: none;
}

.sig-retire-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 320px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card);
  box-shadow: var(--sig-shadow-raised);
  padding: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sig-retire-panel-header {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sig-text);
  margin-bottom: 4px;
}

.sig-retire-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Justificativa de Retirada na tabela */
.sig-release-retired-box {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--sig-alarm-bg);
  border-left: 3px solid var(--sig-alarm);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--sig-text-muted);
}

.sig-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  padding: 3px 8px;
  border-radius: var(--sig-radius-control);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--sig-text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sig-code-copy:hover {
  background: var(--sig-card);
  border-color: var(--sig-accent-strong);
  color: var(--sig-accent-strong);
}



/* ── Firmware (OTA-14): classes que substituem `style=` inline ─────────────────
   Nomeadas pelo QUE SAO, e nao pelo que parecem — `sig-release-meta` e a linha
   secundaria de uma celula, nao "texto de 11.5px". Utilitario nomeado por
   aparencia envelhece na primeira vez que a aparencia muda, e ai o nome mente. */

/* Metrica curta (texto em vez de numero grande) nos cartoes de KPI. */
.sig-metric--short {
  font-size: 20px;
}
/* O verde da MARCA, e nao o esmeralda de `--sig-ok`. Dentro deste mesmo card o icone de
   escudo ja usava `--sig-accent-strong`, e a pill "binario integro no disco" do destaque
   tambem — o numero era o unico elemento verde de outro verde, lado a lado com os dois.
   `--sig-ok` continua valendo onde tem familia propria (`--sig-ok-bg`, os pontos dos
   dashboards); aqui ele era o unico consumidor. */
.sig-metric--ok {
  color: var(--sig-accent-strong);
}
.sig-metric-caption--alarm {
  color: var(--sig-alarm);
  font-weight: 600;
}

/* Linha secundaria de uma celula ou de um item do hero: autor, byte exato, data. */
.sig-release-meta {
  font-size: 11.5px;
}
.sig-release-meta--xs {
  font-size: 11px;
}

/* Versao na coluna da tabela, com os selos ao lado. */
.sig-release-row-version {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sig-release-row-version strong,
.sig-release-version-number {
  font-weight: 700;
  font-size: 14px;
}
.sig-release-row-notes {
  margin-top: 2px;
  font-size: 12px;
}
.sig-release-row-warning {
  margin-top: 4px;
  display: inline-flex;
}

/* Bloco da retirada: quem/quando em cima, o motivo citado embaixo. */
.sig-release-retired-who {
  font-weight: 600;
}
.sig-release-retired-reason {
  margin-top: 2px;
  font-style: italic;
}

/* Tamanho legivel em cima, bytes exatos embaixo. */
.sig-release-size {
  font-weight: 600;
}

/* Placa da release. Discreta de proposito: identifica, nao alerta — ao contrario da pill de
   "afeta medicao", que fica ao lado e precisa gritar. */
.sig-pill--board {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--sig-text-muted);
}

/* Grupo de auditoria do artefato, na coluna do SHA-256: o hash que se confere e os dois
   arquivos com que se confere. Ficam na MESMA celula porque so servem juntos — e a coluna de
   acoes fica com o que muda estado, que e decisao de outra natureza.

   Quebra de linha permitida: em tela estreita os dois downloads descem para baixo do hash em
   vez de espremerem a coluna. */
.sig-artifact-audit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Mesmo peso visual do botao de copiar hash: os tres sao do mesmo grupo. Compacto porque o
   rotulo (.bin / .sig) ja diz tudo e o `title` carrega a frase inteira. */
.sig-artifact-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  padding: 3px 7px;
  border-radius: var(--sig-radius-control);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--sig-text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
}

.sig-artifact-file:hover {
  background: var(--sig-card);
  border-color: var(--sig-accent-strong);
  color: var(--sig-accent-strong);
}

/* Coluna de acoes e cabecalho dela, alinhados a direita. */
.sig-col-actions {
  text-align: right;
}

/* Corpo do painel de retirada, empilhado. */
.sig-retire-panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cabecalho da secao do historico, com o contador a direita. */
.sig-section-header {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sig-section-title--flush {
  margin: 0;
}

/* Paginacao: o botao inerte nas pontas, e a legenda entre eles. */
.sig-button--inert {
  opacity: 0.4;
  cursor: not-allowed;
}
.sig-pagination-info {
  font-size: 12.5px;
  color: var(--sig-text-muted);
}

/* ── Tela estreita: itens de linha flex que se recusavam a encolher ──────────
   Medido em 375x812: quatro telas rolavam na horizontal por larguras mínimas
   intrínsecas, e nenhuma delas era culpa de CSS mal escrito.

   `min-width: auto` é o padrão de item flex, e faz o item herdar a largura
   INTRÍNSECA do conteúdo. Duas fontes surpreendentes disso:

   1. Um `<input>` do Rails herda `size` de `maxlength` quando `size` não é
      passado. Em /groups, `maxlength: 100` virava `size=100` — 831px de largura
      intrínseca num viewport de 375. Nada no CSS pedia isso.
   2. Um `<select>` se dimensiona pela opção MAIS LONGA. Em /sims a barra de
      filtros ficava 367px, e o `min-width: 160px` da classe não era a causa —
      era só o piso.

   O conserto é deixar o item encolher e o controle acompanhar. */
/* 3. A `.sig-topbar` ficou de fora desta lista, e o sintoma era 4px de rolagem
      horizontal a 320px em duas telas. A conta: a barra tem 292px uteis
      (`14..306`) e quatro filhos com `gap: 12px` — botao do menu (28), bloco do
      titulo, menu da org e menu do usuario (36). Em /alerts/escalation_policies o
      titulo "Politicas de escalonamento" mede 146 e a soma da 310 contra 292; em
      /groups, com titulo de 123, da exatamente 292 e passava raspando. O bloco do
      titulo e' um <div> sem classe (`layouts/application.html.erb:50`) com o
      `min-width: auto` padrao, entao ele nao cedia e empurrava o avatar para fora
      — o avatar terminava em 324. Com o item podendo encolher, o titulo QUEBRA em
      duas linhas na tela estreita, que e' o que ja acontece com titulo longo em
      qualquer outra barra do sistema. */
.sig-field,
.sig-filter-form,
.sig-toolbar > * {
  min-width: 0;
}

/* O alvo e' o BLOCO DO TITULO, e nao `.sig-topbar > *`. Medido: com a regra em
   todos os filhos, o avatar (36px de largura fixa) tambem podia encolher e caiu
   para 15px, e a pagina passou a rolar MAIS (327 contra os 324 originais) e em
   telas que antes passavam. Os outros tres filhos sao controles de tamanho
   proprio — quem tem texto elastico, e portanto quem deve ceder, e' so' o titulo.
   `> div` e' exatamente ele: os irmaos sao <button> e dois <details>. */
.sig-topbar > div {
  min-width: 0;
}

/* `min-width: 0` deixa a CAIXA encolher, e nao o texto. "escalonamento" e' uma
   palavra so' de 146px: a caixa foi para 128 e a TINTA continuou indo ate 200,
   por cima do menu da org, que comeca em 194. O gate nao ve isso — ele compara
   retangulos de caixa, e a caixa estava dentro do lugar dela. Medido a 320px em
   /alerts/escalation_policies; a 375 a palavra ja cabe e o problema some.
   Deixar a palavra QUEBRAR e' o que mantem a escolha de quebrar em duas linhas
   sem que ela passe por cima do vizinho. */
.sig-topbar > div > .sig-page-title,
.sig-topbar > div > .sig-page-subtitle {
  overflow-wrap: break-word;
}

.sig-input {
  max-width: 100%;
}

@media (max-width: 640px) {
  /* O piso de 160px vale no desktop; em coluna estreita ele é o que estoura. */
  .sig-input--min-160 {
    min-width: 0;
  }

  /* Deixar o item encolher, sozinho, troca um defeito por outro: com
     `flex: 1 1 0%`, quatro filtros dividem a linha e viram 48px cada — não
     estoura mais e não dá para ler nada. Em tela estreita o filtro ocupa a
     linha inteira. A regra é na CLASSE do campo, e não no pai: `.sig-filter-field`
     aparece dentro de `.sig-field-row` (/alerts/events) e de
     `.sig-filter-form--top` (/audit_events), e mirar o pai cobria só um. */
  /* A lista de PAIS foi abandonada. Ela nasceu com dois seletores, ganhou
     `.sig-field-row` quando /calibrations apareceu, e no UAT de 2026-08-29
     apareceu um QUARTO pai — `form.sig-filters` em /devices — com selects de
     150, 178 e 191px quebrando torto num card de 347. Perseguir o pai e correr
     atras: cada tela nova traz um pai novo, e o defeito volta identico.

     `flex-basis` so tem efeito em item de flex, entao mirar `.sig-input` inteiro
     e INERTE fora de barra de filtro — em grid ou em bloco a declaracao nao faz
     nada. E o que torna a regra geral segura, e nao so mais curta. */
  .sig-filter-field,
  .sig-field,
  .sig-input {
    flex-basis: 100%;
  }

  /* O botao de submeter acompanha a largura, em vez de sobrar espremido ao lado
     de um campo que agora ocupa a linha inteira. `.sig-button--filter` e a
     classe do BOTAO de barra de filtro — mesma logica de mirar o controle. */
  .sig-button--filter,
  .sig-field-row > .sig-button,
  .sig-filter-form > .sig-button {
    flex-basis: 100%;
  }

  /* O componente tem especificidade (0,2,0) e venceria a regra generica acima,
     que e (0,1,0) — os campos ficavam com a base de 190px e o teto de 480 e a
     barra voltava a ser desigual no telefone (301 ao lado de 220, medido). Aqui a
     regra do componente e reescrita com a mesma especificidade, mais abaixo. */
  .sig-filtros-campos > .sig-field,
  .sig-filtros-campos > .sig-input {
    max-width: 100%;
  }

  /* `.sig-field` empilha rotulo e controle em COLUNA, e em container de coluna o
     `flex-basis` e a ALTURA — e vence o `height`. A regra generica de
     `flex-basis: 100%` la em cima, pensada para largura, esticava todo controle
     de campo ROTULADO de 38px para 40 (select) e 42 (date). Media so no telefone,
     e so nas telas com rotulo visivel: /qt/studies, /audit_events e
     /alerts/events. A excecao e no filho direto do campo, que e onde a coluna
     comeca. */
  .sig-field > .sig-input {
    flex-basis: auto;
  }

  /* O grupo de acoes e `flex: 0 0 auto` no desktop para o botao guardar a
     largura natural — e `0 0 auto` nao encolhe. Com tres botoes (Aplicar
     filtros, Limpar, Exportar CSV) ele media 316px num card de 292 a 320px de
     tela e vazava, levando a pagina a rolar. No telefone ele toma a linha
     inteira e os botoes quebram entre si. */
  /* `1 / -1` e nao `span 2`: `span 2` EXIGE duas colunas, e quando so uma cabe a
     grade inventa uma segunda coluna implicita — que nao segue o template e sai
     com a largura que sobrou. Medido a 375px: trilhas de `190px 99px`, com os
     campos desiguais. `1 / -1` cobre as colunas que EXISTEM, sem criar nenhuma.

     `.sig-filtros > .sig-filtros-acoes`, com o combinador: a regra base tem
     especificidade (0,2,0) e `.sig-filtros-acoes` sozinha (0,1,0) perderia. */
  .sig-filtros > .sig-filtros-acoes {
    grid-column: 1 / -1;
    min-width: 0;
    flex-wrap: wrap;
  }

  /* Excecao declarada, e nao pai novo na lista: `.sig-filter-actions` existe
     JUSTAMENTE para agrupar botoes que dividem a linha de proposito (Aplicar +
     Limpar em /qt/studies). Sem esta linha a regra geral acima empurrava os dois
     para 100% cada, o grupo transbordava o `.sig-filter-slot` e "Limpar" ficava
     por baixo de "Novo estudo" — medido a 375px. */
  .sig-filter-actions > .sig-button--filter {
    flex-basis: auto;
  }

  /* `.sig-field-row > select.sig-input` tem teto de 280px (application.css:743),
     que e dimensionamento de DESKTOP. Em coluna estreita ele deixava o select
     com 280 ao lado de campos de 347 — desalinhado sem motivo. */
  select.sig-input {
    max-width: 100%;
  }

  /* Redundante desde que todo piso de grade virou `minmax(min(Npx, 100%), ...)`,
     que ja cede sozinho — fica como rede, e porque colapsar em UMA coluna aqui e
     decisao de layout, nao so de nao estourar. */
  .billing-overview-grid {
    grid-template-columns: 1fr;
  }

  /* Os botões de ação do membro estouravam por 6px sem poder quebrar linha. */
  .sig-member-actions {
    flex-wrap: wrap;
  }

  /* O editor de grupo (/groups) e' um popover ancorado a DIREITA do botao
     "Editar", que por sua vez mora no fim da linha da arvore. O teto era
     `max-width: calc(100vw - 32px)` — largura de VIEWPORT — e essa e' a medida
     errada para uma caixa ancorada a direita: o que limita nao e' a tela, e' o
     espaco a ESQUERDA da ancora. A 320px o botao termina em 288, o popover abria
     com 322 de largura e comecava em -34; a 375px, -31. Ou seja 34px do
     formulario ficavam FORA da tela, e o gate acusava o campo fora do card.

     Em tela estreita o popover deixa de ser ancorado ao botao e passa a ocupar a
     LINHA da arvore: a linha vira o bloco de contencao (`position: relative`) e o
     editor se estica nela com `left: 0; right: 0`. A linha esta dentro do card
     por construcao — inclusive nos nos aninhados, que so' recuam a esquerda —
     entao o popover nao tem mais como escapar, em largura nenhuma.

     `top: 100%` continua certo: relativo a linha, e' logo abaixo dela, que e'
     onde o popover ja aparecia. */
  .sig-tree-row {
    position: relative;
    /* Manter a linha inteira em UMA linha a 320px espremia o nome ate' "CD ..." —
       o contador (104px) e o "Editar" (57px) sao rigidos e sobrava menos de 40px
       para o nome. Aqui o "Editar" desce para a propria linha, e o nome e o
       contador ficam legiveis inteiros. */
    flex-wrap: wrap;
  }

  /* Vence `.sig-push-right` (0,1,0) pela especificidade do combinador (0,2,0). */
  .sig-tree-row > .sig-tree-actions {
    flex: 0 0 100%;
    margin-left: 0;
  }

  .sig-tree-actions {
    position: static;
  }

  .sig-tree-editor {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* ── Escala de Plantão (Oncall Schedule) ────────────────────────────────── */
.sig-oncall-hero {
  background: linear-gradient(135deg, var(--sig-card) 0%, var(--sig-surface) 100%);
  border-left: 4px solid var(--sig-accent-strong);
  margin-bottom: 16px;
}

.sig-oncall-hero-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sig-oncall-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sig-accent-soft);
  color: var(--sig-accent-strong);
  flex-shrink: 0;
}

.sig-oncall-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sig-oncall-hero-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sig-text-muted);
}

.sig-oncall-hero-person {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-oncall-day-cell {
  vertical-align: top;
  padding-top: 14px;
  width: 140px;
}

.sig-oncall-day-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-oncall-slot-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: var(--sig-text-muted);
  margin-top: 2px;
}

.sig-oncall-slots-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.sig-oncall-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sig-oncall-slot:hover {
  border-color: var(--sig-border-hover);
}

.sig-oncall-slot--current {
  background: var(--sig-accent-soft);
  border-color: #c5e1a5;
  box-shadow: 0 1px 3px rgba(46, 125, 50, 0.08);
}

.sig-oncall-slot-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.sig-oncall-slot-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sig-oncall-slot-time-sep {
  color: var(--sig-text-muted);
  font-weight: 600;
}

.sig-input--time {
  width: 68px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 0 6px !important;
}

.sig-oncall-slot-member {
  flex: 1 1 180px;
  min-width: 140px;
}

.sig-oncall-slot-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sig-button--danger-text {
  color: #b91c1c !important;
}

.sig-button--danger-text:hover {
  background: var(--sig-alarm-bg) !important;
  color: #b91c1c !important;
}

.sig-oncall-slot-viewer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sig-oncall-slot-time-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sig-text);
}

.sig-oncall-slot-member-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--sig-text-muted);
}

.sig-oncall-new-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  align-items: flex-end;
}

.sig-oncall-new-grid .sig-field--grow {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .sig-table-scroll > table.sig-oncall-table {
    min-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }

  .sig-oncall-table thead {
    display: none !important;
  }

  .sig-oncall-table tbody,
  .sig-oncall-day-row,
  .sig-oncall-day-cell,
  .sig-oncall-slots-cell {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .sig-oncall-day-row {
    margin-bottom: 16px;
    padding: 14px;
    background: var(--sig-surface);
    border: 1px solid var(--sig-border);
    border-radius: var(--sig-radius-control);
  }

  .sig-oncall-day-cell {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid var(--sig-border);
    margin-bottom: 12px;
  }

  .sig-oncall-slots-cell {
    padding: 0 !important;
  }

  .sig-oncall-slot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    background: var(--sig-card);
    padding: 12px !important;
    border-radius: var(--sig-radius-control);
    margin-bottom: 8px;
  }

  .sig-oncall-slot-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sig-oncall-slot-time {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .sig-oncall-slot-time .sig-input--time {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0;
    height: 38px;
    font-size: 14px;
  }

  .sig-oncall-slot-member {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .sig-oncall-slot-member select {
    width: 100% !important;
    height: 38px;
    font-size: 14px;
  }

  .sig-oncall-slot-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .sig-oncall-slot-actions .sig-button {
    flex: 1 1 auto !important;
    height: 38px;
    justify-content: center;
  }

  .sig-oncall-slot > form {
    width: 100%;
  }

  .sig-oncall-slot > form .sig-button {
    width: 100%;
    height: 38px;
    justify-content: center;
  }

  .sig-oncall-new-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .sig-oncall-new-grid .sig-field--grow {
    grid-column: span 1 !important;
  }

  .sig-oncall-new-submit .sig-button {
    width: 100% !important;
    height: 42px;
    justify-content: center;
  }
}

/* ── Catálogo e Modelos de Dispositivos (Device Models & Decoders) ────────── */
.sig-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.sig-catalog-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  transition: all 0.15s ease;
}

.sig-catalog-card:hover {
  border-color: var(--sig-border-hover);
  box-shadow: var(--sig-shadow-raised);
  transform: translateY(-1px);
}

.sig-catalog-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.sig-catalog-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--sig-accent-soft);
  color: var(--sig-accent-strong);
  flex-shrink: 0;
}

.sig-catalog-card-title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sig-text);
}

.sig-catalog-card-title a {
  color: var(--sig-text);
  text-decoration: none;
}

.sig-catalog-card-title a:hover {
  color: var(--sig-accent-strong);
}

.sig-catalog-card-desc {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--sig-text-muted);
  line-height: 1.4;
}

.sig-catalog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sig-catalog-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sig-text-muted);
}

.sig-catalog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--sig-border);
  margin-top: auto;
}

.sig-catalog-card-footer form {
  width: 100%;
}

.sig-catalog-card-footer .sig-button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px) {
  .sig-catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* === Deviations / CAPA Investigation === */
.sig-deviation-hero {
  border-left: 4px solid var(--sig-accent);
}
.sig-deviation-hero--aberta {
  border-left-color: var(--sig-warning, #f59e0b);
}
.sig-deviation-hero--em_investigacao {
  border-left-color: var(--sig-accent, #4f46e5);
}
.sig-deviation-hero--concluida {
  border-left-color: var(--sig-success, #10b981);
}

.sig-deviation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sig-deviation-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 16px;
  margin-bottom: 16px;
  transition: border-color 0.15s ease;
}

.sig-deviation-field-group:focus-within {
  border-color: var(--sig-accent-strong);
}

.sig-deviation-field-group .sig-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sig-text);
  margin-bottom: 4px;
}

.sig-deviation-textarea {
  min-height: 110px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  background: var(--sig-card);
  color: var(--sig-text);
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}

.sig-deviation-textarea:focus {
  outline: 2px solid var(--sig-accent);
  outline-offset: 1px;
  border-color: var(--sig-accent);
}

.sig-deviation-concluded-card {
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-control);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sig-deviation-seal {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sig-deviation-seal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  flex-shrink: 0;
}

/* === Automation Pipeline Steps === */
.sig-pipeline-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sig-pipeline-step {
  background: var(--sig-card);
  border: 1px solid var(--sig-border);
  border-radius: var(--sig-radius-card, 12px);
  padding: 20px 24px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sig-pipeline-step:focus-within {
  border-color: var(--sig-accent-strong);
}

.sig-pipeline-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sig-border);
}

.sig-pipeline-step-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sig-pipeline-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  color: var(--sig-accent-strong);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.sig-pipeline-step-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--sig-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sig-pipeline-step-desc {
  font-size: 12.5px;
  color: var(--sig-text-muted);
  margin: 2px 0 0;
}

.sig-pipeline-step-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sig-group-profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--sig-surface);
  border: 1px solid var(--sig-border);
  color: var(--sig-text-muted);
  white-space: nowrap;
}

.sig-group-profile-tag svg {
  color: var(--sig-accent-strong);
}






/* ── Rolagem horizontal com afordancia (ROLA-01..15, AD-065) ────────────────
   Toda superficie que transborda na horizontal rola, em QUALQUER largura e com
   QUALQUER ponteiro, e avisa que ha mais com um degrade que aparece so no lado
   onde ha conteudo escondido. Um comportamento so — nao ha media query aqui.

   NAO FOI SEMPRE ASSIM. Ate 2026-09-03 o padrao vivia dentro de
   `@media (hover: none) and (pointer: coarse)` e a `.sig-tab-bar` quebrava linha
   no ponteiro fino. Medido em oito combinacoes: celular, foldable nas duas dobras
   e tablet ja rolavam (sao toque), mas notebook com tela sensivel reporta
   `hover: hover` e `pointer: fine` — o ponteiro PRIMARIO e o mouse — e empilhava
   em 5 linhas a 375px. Decisao do Eric: um desenho so.

   O motivo que justificava quebrar linha era "nao ha sinal de que ha mais". Esse
   motivo deixou de existir quando o degrade passou a existir.

   POR QUE MASCARA, e nao `background`: `background-attachment: local` some
   sozinho nas pontas, mas e pintado ATRAS do conteudo e por isso nao o alcanca
   — medido em navegador, um bloco solido na borda fica identico ao controle.
   `mask-attachment: local` resolveria e NAO EXISTE (`CSS.supports` = false, com
   e sem prefixo). Sobra a mascara com as paradas dirigidas pela rolagem.

   A BARRA DE ROLAGEM E O SINAL DE RESERVA. Ela e visivel por padrao e so some
   DENTRO do @supports, onde o degrade funciona. Sem essa divisao, um navegador
   sem animacao dirigida por rolagem ficaria com rolagem, sem degrade e sem barra:
   abas cortadas e nada dizendo que ha mais — o defeito de 2026-09-01 de volta.

   INICIAIS ZERO NOS DOIS LADOS, e isto nao e detalhe: quando o conteudo CABE, a
   linha do tempo da rolagem tem comprimento zero e as animacoes nao correm, entao
   valem os iniciais. Zero e o que faz "cabe" nao ganhar degrade (ROLA-05),
   inclusive quando o conteudo termina colado na borda. */

@property --sig-rola-esq {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --sig-rola-dir {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* `.sig-tabs` e `inline-flex` SEM rolagem nenhuma: transborda sem rolar e sem quebrar.
   E a mesma doenca da `.sig-tab-bar`, num quarto lugar, e nenhum gate de fonte que varra
   `overflow-x` acharia — ela nao tem overflow-x para achar. */
.sig-tabs {
  overflow-x: auto;
}

/* A BARRA DE ROLAGEM E O SINAL DE RESERVA, e por isso ela e visivel POR PADRAO.
   Esconde-la so e seguro onde o degrade funciona — e e isso que o @supports abaixo faz.
   Sem esta divisao, um navegador sem animacao dirigida por rolagem ficaria com `nowrap`,
   rolagem e NENHUM sinal: as abas cortadas e nada dizendo que ha mais. Que e exatamente
   o defeito de 2026-09-01, reintroduzido pela porta dos fundos. */

@supports (animation-timeline: scroll()) {
    .sig-tab-bar,
    .sig-tabs,
    .sig-subnav,
    .sig-table-scroll,
    .sig-scroll-x,
    .sig-code,
    .sig-json-block,
    .sig-csv-sample,
    .sig-audit-metadata,
    .dash-header-center-zone,
    .qt-heat-map {
      --sig-rola-largura: 24px;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sig-rola-esq), #000 calc(100% - var(--sig-rola-dir)), transparent);
      mask-image: linear-gradient(to right, transparent, #000 var(--sig-rola-esq), #000 calc(100% - var(--sig-rola-dir)), transparent);
      animation: sig-rola-esq linear both, sig-rola-dir linear both;
      animation-timeline: scroll(self inline), scroll(self inline);
      animation-range: 0 var(--sig-rola-largura), calc(100% - var(--sig-rola-largura)) 100%;

      /* O degrade substitui a barra de rolagem: aqui dentro, e SO aqui, ela pode sumir. */
      scrollbar-width: none;
    }
}

@keyframes sig-rola-esq {
  from { --sig-rola-esq: 0px; }
  to { --sig-rola-esq: var(--sig-rola-largura); }
}

@keyframes sig-rola-dir {
  from { --sig-rola-dir: var(--sig-rola-largura); }
  to { --sig-rola-dir: 0px; }
}

/* UATP-09/10 (correcoes-uat-parque) — os marcadores do filtro do parque.
 *
 * Classe NOVA, e do parque: nenhuma regra existente da folha e alterada, porque `.sig-field`
 * e `.sig-filter-field` servem a barra de filtro de dezenas de telas e mexer nelas mudaria
 * o que ninguem pediu para mudar.
 *
 * O desalinhamento que o UAT achou era estrutural. `.sig-filtros-main` alinha os itens pelo
 * fim (`align-items: flex-end`), e cada celula de campo tem DUAS linhas (rotulo de 12px e
 * controle de 38px). A celula de um checkbox tem UMA, entao ela media 19px, caia numa linha
 * so dela e nao se alinhava a controle nenhum. Aqui os dois marcadores ficam numa celula so,
 * com a altura do CONTROLE vizinho — a mesma de `.sig-input--filter` e `.sig-button--filter`
 * — e centrados nela, de modo que a caixa do checkbox cai na linha do controle ao lado. */
.sig-parque-marcadores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 38px;
  flex: 1 1 320px;
}

.sig-parque-marcador {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sig-text-muted);
  white-space: nowrap;
}

/* Em coluna, `flex-basis` mede a ALTURA e nao a largura. Sem esta linha, a celula dos
 * marcadores viraria uma faixa de 320px de altura com dois checkboxes boiando no meio —
 * o mesmo defeito que esta correcao existe para tirar, so que no celular. O ponto de quebra
 * e o mesmo em que `.sig-filtros-main` passa a empilhar. */
@media (max-width: 640px) {
  .sig-parque-marcadores {
    flex-basis: auto;
  }
}

/* INV-14 (inventario-do-aparelho) — a barra do parque passou a ter SETE campos.
 *
 * Classe NOVA e do parque, pelo mesmo motivo escrito acima nos marcadores: `.sig-filtros-main
 * .sig-filter-field` serve a barra de filtro de uma duzia de telas, e mexer nela mudaria o
 * que ninguem pediu para mudar. A especificidade e a mesma (0,2,0) e esta regra vem DEPOIS,
 * que e o que a faz valer — a mesma disciplina do `.sig-filtros > .sig-filtros-acoes`.
 *
 * O NUMERO nao e escolhido: e o `min-width: 160px` que a propria folha ja declara como piso
 * de campo legivel. O `flex-basis` decide ONDE a linha quebra, e o piso decide o quanto o
 * campo pode encolher; igualando os dois, a barra quebra exatamente no ponto em que o campo
 * chegaria no piso — nao antes, com espaco sobrando, nem depois, espremendo.
 *
 * MEDIDO, e nao estimado, nas duas larguras que a UATP-09/10 cobra (o gap de 12px e o da
 * folha):
 *
 *   1280px de viewport => 962px de barra. Com 200px cabiam QUATRO campos por linha, e o
 *   setimo campo levou o total de oito para nove celulas: 4 + 4 + 1, com as acoes sozinhas
 *   no fim — a celula orfa que a UATP-10 reprova. Nao havia conserto por ordem no documento:
 *   sete campos de 200 mais marcadores (322) e acoes (191) nao cabem em duas linhas de 962,
 *   de jeito nenhum. Com 160 cabem CINCO (5x160 + 4x12 = 848), e os dois campos restantes
 *   dividem a segunda linha com marcadores e acoes (320 + 322 + 191 + 36 = 869): 5 + 4.
 *
 *   768px de viewport => 694px de barra. Com 200 (e com 175) a terceira linha ficava com um
 *   campo e os marcadores, empurrando as acoes para uma quarta linha sozinhas — e os
 *   checkboxes deixavam de cair na linha do controle vizinho. Com 160 sao QUATRO campos na
 *   primeira (676), tres na segunda, e marcadores + acoes dividem a terceira (525): 4 + 3 + 2.
 *
 * So acima de 640px. Abaixo disso a barra vira COLUNA (`flex-direction: column`), e numa
 * coluna `flex-basis` e ALTURA: com a mesma especificidade e vindo depois, esta regra
 * vencia o `flex: 1 1 100%` do mobile e dava 160px de altura a cada campo — um vao de
 * ~100px entre um filtro e o proximo (UAT do Eric, 2026-10-13). */
@media (min-width: 641px) {
  .sig-filtros-main--parque .sig-filter-field {
    flex-basis: 160px;
  }
}

/* UATP-12/16 (correcoes-uat-parque) — o vocabulario de ausencia da ficha do parque.
 *
 * Classes NOVAS, e do parque: `.sig-empty` e `.sig-empty-note` servem 24 views de outras
 * frentes e nao sao tocadas. O que faltava na folha nao era um paragrafo apagado a mais —
 * era forma para "este CAMPO nao tem valor", papel que ate aqui era ocupado por um
 * travessao cru, sem elemento e sem classe, indistinguivel de sujeira de renderizacao.
 *
 * A marca e apagada e nao-selecionavel de proposito: ela nao e conteudo, e arrastar a
 * ficha inteira para copiar nao deve trazer uma fileira de travessoes junto. `cursor:
 * help` mais o `title` do helper fazem o par que transforma o glifo em declaracao. */
.sig-parque-ausencia-marca {
  color: var(--sig-text-faint);
  user-select: none;
  cursor: help;
}

/* A forma de BLOCO: a secao inteira sem dado. O `padding` e a mesma altura de duas linhas
 * de `.sig-deflist` (12px de gap mais o corpo), para que o cartao vazio ocupe o lugar do
 * corpo que ele substitui em vez de encolher contra a borda — que era o "nao esta
 * profissional" do UAT: ao lado de um cartao cheio, a frase solta lia como conteudo que
 * faltou carregar. */
.sig-parque-ausencia {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
}

.sig-parque-ausencia-texto {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sig-text-muted);
}

/* FICHA-01/02 (ficha-do-parque) — os campos da ficha na grade de detalhe do PRODUTO.
 *
 * O defeito do segundo UAT, medido no navegador: o valor (`dd`) saia com 16px/400, IDENTICO
 * ao elemento pai — sem estilo proprio nenhum, so herdando o texto cru da pagina. O unico
 * negrito da linha era o rotulo. Era isso o "parece que nem css tem ativado, apenas o bold".
 *
 * O vocabulario e' o de `devices/show`: `sig-member-list--grid` > `sig-member` > rotulo
 * `sig-member-meta` EM CIMA + valor `sig-member-name` embaixo. Duas diferencas, e as duas
 * existem por um motivo escrito:
 *
 * 1. O `dl` CONTINUA carregando `sig-deflist`. E' por essa classe que o exemplo da UATP-16
 *    reconhece um corpo de "linha de definicao", e exemplo de frente anterior nao se altera
 *    para acomodar esta. Como `.sig-deflist` vem DEPOIS na folha e redefine a grade
 *    (180px | resto, alinhada pela base), `.sig-parque-grade` impoe a grade da ficha — e
 *    tira do rotulo o negrito que `.sig-deflist dt` impoe. A especificidade (duas classes)
 *    e' o que faz isto valer independente da ordem.
 *
 * 2. SEM o wrapper `sig-member-identity`, que o produto usa e que NAO TEM REGRA na folha —
 *    o gate de classe-sem-regra (UATP-08) reprovaria, com razao. Dispensa-lo e' a saida
 *    certa, e nao so a conveniente: dentro de um `dl`, o `div` que agrupa um par tem de
 *    conter o `dt` e o `dd` DIRETAMENTE (modelo de conteudo do HTML), entao um segundo
 *    wrapper seria marcacao invalida. O unico efeito do wrapper no produto era fazer
 *    rotulo e valor virarem UM bloco empilhado dentro de um `.sig-member` que e' flex em
 *    LINHA; `.sig-parque-campo` faz exatamente isso, com uma regra que diz o que faz. */
/* DECISAO DO ERIC (2026-09-18, depois do UAT da ficha): DUAS colunas FIXAS em tela larga, e
 * uma no celular — nao a grade do produto, que abre 4 colunas em 1280px. Por isso esta regra
 * NAO repete os valores de `.sig-member-list--grid`: ela e' a grade da FICHA, e aquela continua
 * servindo ao produto sem mudanca. O ponto de quebra e' o mesmo em que `.sig-filtros-main`
 * empilha (640px). */
.sig-parque-grade.sig-deflist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  align-items: normal;
}

@media (max-width: 640px) {
  .sig-parque-grade.sig-deflist {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sig-parque-grade.sig-deflist dt {
  font-weight: inherit;
}

.sig-parque-campo {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* FICHA-06 (ficha-do-parque) — o valor de um cartao de ESTADO.
 *
 * `.sig-telemetry-value` foi desenhado para LEITURA: um numero curto, a 2.25rem. O cartao do
 * parque carrega PALAVRAS de estado, e com o mesmo tamanho elas quebram — medido em 1280px:
 * "Sem credencial ativa" em TRES linhas de 36px, "Nunca calibrado" em duas. Era trocar o
 * "grosseiro" do UAT por outro. 1.25rem e' o MAIOR tamanho em que toda palavra de estado cabe
 * numa linha no desktop e no celular (medido em 2.25 / 1.5 / 1.375 / 1.25rem). O peso e o
 * resto do vocabulario do cartao ficam os do produto. */
.sig-parque-estado-valor {
  font-size: 1.25rem;
  line-height: 1.2;
}

/* DECISAO DO ERIC (2026-09-18) — os cartoes de estado em 4 / 2x2 / 1, NUNCA 3+1.
 *
 * A grade do produto (`.sig-telemetry-hero-grid`, `auto-fit` com minimo de 240px) poe quantos
 * cartoes couberem por linha. Medido: com o painel entre 752px e 992px de largura (janela de
 * 1024 a 1264px), ela da 3+1 — o Firmware orfao na segunda linha. Um `auto-fit` sozinho nao
 * consegue proibir tres colunas, e por isso aqui a grade escolhe entre TRES arranjos.
 *
 * Por CONSULTA DE CONTAINER, e nao de viewport: quem decide e' a largura da propria grade. Uma
 * media query teria de embutir a largura da barra lateral do admin (que ainda some em 767px), e
 * quebraria calada no dia em que a barra mudasse. A grade nao pode consultar a si mesma, entao o
 * `.sig-parque-estado` que a envolve e' o container.
 *
 * Os limites sao os do CARTAO DO PRODUTO, e nao numeros novos: minimo de 240px, vao de 14px.
 *   duas colunas   2 x 240 + 14     = 494px
 *   quatro         4 x 240 + 3 x 14 = 1002px
 * E' tambem o que faz "Sem credencial ativa" — a palavra de estado mais larga, 192px mais os
 * 42px de enchimento e borda do cartao — caber numa linha em qualquer um dos tres arranjos.
 *
 * Especificidade de duas classes: vence a media query do produto que forca 1 coluna em 768px,
 * e o painel de 740px nessa largura fica em 2x2, e nao em quatro linhas. */
.sig-parque-estado {
  container-type: inline-size;
}

.sig-parque-estado-grade.sig-telemetry-hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 494px) {
  .sig-parque-estado-grade.sig-telemetry-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 1002px) {
  .sig-parque-estado-grade.sig-telemetry-hero-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* DECISAO DO ERIC (2026-09-18) — o tom do valor de um cartao de estado. Quem decide qual estado
 * e' alarme, atencao ou neutro e' `Admin::ParqueHelper#tom_do_estado`, num lugar so; aqui ficam
 * so as cores, e so por token. O neutro nao tem regra: e' a cor do `.sig-telemetry-value`. */
.sig-parque-estado-valor--alarme {
  color: var(--sig-alarm);
}

.sig-parque-estado-valor--atencao {
  color: var(--sig-warn);
}

/* O valor na MESMA linha nos quatro cartoes, com ou sem linha de apoio.
 *
 * `.sig-telemetry-card` e' coluna com `justify-content: space-between`: numa linha da grade os
 * cartoes esticam ate o mais alto, e a sobra se reparte ENTRE os filhos — entao a altura da
 * linha de apoio de CADA cartao decide onde o valor dele cai. Medido em 1280px: 175 / 183 /
 * 205 / 175px. O Credencial (sem linha de apoio) 30px abaixo, e a Calibracao 8px abaixo so
 * porque o apoio dela ocupa uma linha e o dos vizinhos, duas.
 *
 * O remedio ancora o valor logo abaixo do titulo — a altura do titulo, igual nos quatro, e' a
 * unica coisa antes dele —, e a sobra vai inteira para o pe do cartao. A linha de apoio fica
 * colada ao valor que ela qualifica ("vale ate", "visto por ultimo"). */
.sig-parque-estado-cartao {
  justify-content: flex-start;
}

/* UAT do Eric (2026-10-13) — inventario-do-aparelho, segunda rodada.
 *
 * T1: no cartao de versoes a linha "Versao publicada" vem ANTES da lista, e o `.sig-metric-foot`
 * da folha so tem margem em cima (ele nasceu para o rodape). Colada na primeira linha da lista,
 * as duas se liam como uma frase so. */
.sig-parque-versoes-corrente {
  margin: 4px 0 12px;
}

/* Caso B5: "em versao retirada" e' um SUBCONJUNTO de "em outra versao" — recuada, para nao se
 * ler como mais um desfecho somado ao total, e em tom de alarme. */
.sig-parque-versoes-sub {
  padding-left: 14px;
}

.sig-parque-versoes-retirada {
  color: var(--sig-alarm);
}

/* T2: no desktop o grupo de acoes da barra do parque nao tinha `gap` — a regra com `gap` da folha
 * (`.sig-filtros-main .sig-filtros-acoes`) mora so dentro do media de 640px, e "Filtrar" encostava
 * em "Exportar CSV". Classe do parque, pelo mesmo motivo das regras de cima. */
.sig-filtros-main--parque .sig-filtros-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Caso B5: o selo de "versao nao publicada". Variante de atencao do `.sig-pill`, irma da
 * `--alert`; o texto usa o tom escuro do ambar porque `--sig-warn` sobre `--sig-warn-bg` nao
 * passa contraste para texto de 11px. */
.sig-pill--warn {
  background: var(--sig-warn-bg);
  border-color: var(--sig-warn-bg);
  color: #92400e;
}