/* Auto-suficiência: este arquivo NÃO funciona sem os tokens, e o <link> do
   tokens.css vive no template — que só recarrega com restart do serviço (que
   aqui exige elevação). Sem este @import, qualquer janela entre "CSS novo no
   disco" e "template novo em memória" serve a folha com todo var(--g-*) vazio
   e a tela renderiza pelada. Aconteceu em 11/08/2026.
   O <link> no template continua existindo — é ele que carrega o cache-bust por
   mtime; este @import é a rede de segurança. Carregar duas vezes é inofensivo. */
@import url("tokens.css");

/* ===================================================================
   Integração — Design System v9 (moderno, informativo, minimalista)
   =================================================================== */

/* Os tokens --g-* saíram daqui em 11/08/2026: fonte única em
   static/tokens.css, carregado ANTES deste arquivo. Declarar token aqui
   de novo faz o vencedor voltar a depender da ordem de carga — que era
   exatamente o problema. Travado por tests/test_css_tokens.py. */

/* ===== Reset / base =====
   11/08/2026 — o que este bloco tinha em duplicata com o app.css foi removido.
   Critério: só saiu o que o app.css já reproduz IGUAL ou como superset, e nada
   foi movido daqui para lá que não estivesse lá — porque 6 telas (login,
   criar-conta, esqueci-senha, primeiro-acesso, alterar-senha, criar-conta-ok)
   carregam o app.css SEM este arquivo, e ganhariam regra que hoje não têm.

   Saíram:  * {box-sizing}      -> app.css cobre *, ::before e ::after
            *:focus-visible     -> especificidade idêntica (0,1,0); o do app.css
                                   já vencia em 100% das páginas servidas
            a {color/decoration}-> duplicata exata
            p {margin:0}        -> já no reset do app.css
            body {…}            -> app.css cobre tudo; o único órfão era o
                                   -moz-osx-font-smoothing, movido para lá

   FICARAM de propósito (o app.css não tem equivalente):
            html,body{height:100%}
            h1..h4  -> ~199 títulos sem classe nos templates dependem disto
            small   -> 88 usos                                            */

html, body { height: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--g-weight-semi);
  letter-spacing: -.005em;
  color: var(--g-text);
}
h1 { font-size: var(--g-text-2xl); line-height: 1.2; }
h2 { font-size: var(--g-text-lg); line-height: 1.3; }
h3 { font-size: var(--g-text-md); line-height: 1.35; }

small { font-size: var(--g-text-xs); }

.g-mono { font-family: var(--g-mono); font-variant-numeric: tabular-nums; }
.g-num  { font-variant-numeric: tabular-nums; }

.hidden, .g-hidden { display: none !important; }

/* ===== Icons (Lucide stroke) ===== */
.g-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.g-icon-sm { width: 14px; height: 14px; }
.g-icon-lg { width: 20px; height: 20px; }
.g-icon-xl { width: 28px; height: 28px; }

/* ===== Topbar (unificada) ===== */
.g-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--g-topbar);
  color: var(--g-topbar-text);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--g-space-6);
  padding: 0 var(--g-space-6);
  height: var(--g-h-topbar);
  border-bottom: 1px solid var(--g-topbar-border);
}
.g-brand {
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  min-width: 0;
}
/* Logo (SVG do UbiSafe) substituindo o quadradinho "IN" */
.g-brand-logo {
  display: inline-flex;
  align-items: center;
  height: 26px;
  color: #fff;            /* SVG usa currentColor */
  flex-shrink: 0;
}
.g-brand-logo svg {
  height: 100%;
  width: auto;
}
/* Divisor sutil entre logo e subtitle */
.g-brand-divider {
  width: 1px;
  height: 22px;
  background: var(--g-topbar-border);
  margin: 0 var(--g-space-1);
}
.g-brand-subtitle {
  font-size: var(--g-text-xs);
  color: var(--g-topbar-text-2);
  font-weight: var(--g-weight-medium);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Mantém compat com templates que ainda usam .g-brand-mark + .g-brand-text (legado) */
.g-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--g-radius-sm);
  background: linear-gradient(135deg, var(--g-brand), var(--g-brand-2));
  color: #fff;
  font-weight: var(--g-weight-bold);
  font-size: 12px;
  letter-spacing: .02em;
  display: grid;
  place-items: center;
}
.g-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.g-brand-text strong {
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-semi);
  color: #fff;
}
.g-brand-text span {
  font-size: var(--g-text-xs);
  color: var(--g-topbar-text-2);
  font-weight: var(--g-weight-medium);
}

.g-nav {
  display: flex;
  gap: 2px;
  align-items: center;
}
.g-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  color: #c5ccd9;
  padding: 7px var(--g-space-3);
  border-radius: var(--g-radius-sm);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  white-space: nowrap;
  transition: background var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
}
.g-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.g-nav-item.active {
  background: var(--g-topbar-2);
  color: #fff;
}

/* Nav dropdown */
.g-nav-group {
  position: relative;
  display: inline-flex;
}
.g-nav-group > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c5ccd9;
  padding: 7px var(--g-space-3);
  border-radius: var(--g-radius-sm);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  white-space: nowrap;
  transition: background var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
}
.g-nav-group > summary::-webkit-details-marker { display: none; }
.g-nav-group > summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.g-nav-group[open] > summary {
  background: var(--g-topbar-2);
  color: #fff;
}
.g-nav-group > summary .g-nav-chevron {
  transition: transform var(--g-fast) var(--g-ease);
}
.g-nav-group[open] > summary .g-nav-chevron { transform: rotate(180deg); }

.g-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--g-topbar);
  border: 1px solid var(--g-topbar-border);
  border-radius: var(--g-radius);
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 100;
}
.g-nav-dropdown a {
  color: #c5ccd9;
  padding: 8px var(--g-space-3);
  border-radius: var(--g-radius-sm);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  text-decoration: none;
  transition: background var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
}
.g-nav-dropdown a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.g-nav-dropdown a.active {
  background: var(--g-topbar-2);
  color: #fff;
}

.g-user {
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  padding-left: var(--g-space-3);
  border-left: 1px solid var(--g-topbar-border);
}
.g-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
  min-width: 0;
}
.g-user-info strong {
  color: #fff;
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-semi);
}
.g-user-info span {
  color: var(--g-topbar-text-2);
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-medium);
}
.g-logout {
  font-size: var(--g-text-sm);
  color: #c5ccd9;
  padding: 6px var(--g-space-3);
  border-radius: var(--g-radius-sm);
  border: 1px solid var(--g-topbar-border);
  font-weight: var(--g-weight-medium);
  transition: border-color var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
}
.g-logout:hover { border-color: #3a4a66; color: #fff; }

/* ===== Shell ===== */
.g-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--g-space-6) var(--g-space-6) var(--g-space-9);
}
.g-shell-narrow {
  max-width: 720px;
}

/* ===== Page header (slim, sem hero) ===== */
.g-pageheader {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--g-space-6);
  margin-bottom: var(--g-space-5);
  padding-bottom: var(--g-space-4);
  border-bottom: 1px solid var(--g-border);
}
.g-pageheader-title h1 {
  font-size: var(--g-text-xl);
  font-weight: var(--g-weight-semi);
  margin: 0 0 var(--g-space-1);
}
.g-pageheader-title p {
  margin: 0;
  color: var(--g-text-2);
  font-size: var(--g-text-sm);
}

/* ===== Buttons ===== */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-space-2);
  height: var(--g-h-button);
  padding: 0 var(--g-space-4);
  border-radius: var(--g-radius);
  font-family: var(--g-font);
  font-size: var(--g-text-base);
  font-weight: var(--g-weight-medium);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--g-text);
  transition: background var(--g-fast) var(--g-ease),
              border-color var(--g-fast) var(--g-ease),
              color var(--g-fast) var(--g-ease),
              transform var(--g-fast) var(--g-ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.g-btn:disabled { opacity: .55; cursor: not-allowed; }
.g-btn:active:not(:disabled) { transform: translateY(.5px); }

.g-btn-primary {
  background: var(--g-brand);
  color: #fff;
  border-color: var(--g-brand);
}
.g-btn-primary:hover:not(:disabled) { background: var(--g-brand-2); border-color: var(--g-brand-2); }

.g-btn-secondary {
  background: var(--g-surface);
  color: var(--g-text);
  border-color: var(--g-border-strong);
}
.g-btn-secondary:hover:not(:disabled) { background: var(--g-surface-2); }

.g-btn-ghost {
  background: transparent;
  color: var(--g-text-2);
}
.g-btn-ghost:hover:not(:disabled) { background: var(--g-surface-3); color: var(--g-text); }

.g-btn-danger {
  background: var(--g-surface);
  color: var(--g-danger);
  border-color: var(--g-border-strong);
}
.g-btn-danger:hover:not(:disabled) {
  background: var(--g-danger-soft);
  border-color: var(--g-danger);
}

.g-btn-success {
  background: var(--g-success);
  color: #fff;
  border-color: var(--g-success);
}
.g-btn-success:hover:not(:disabled) { filter: brightness(1.05); }

/* tamanhos */
.g-btn-sm { height: 30px; padding: 0 var(--g-space-3); font-size: var(--g-text-sm); }
.g-btn-lg { height: 44px; padding: 0 var(--g-space-5); font-size: var(--g-text-md); }
.g-btn-touch { height: var(--g-h-button-touch); padding: 0 var(--g-space-5); font-size: var(--g-text-md); }
.g-btn-block { width: 100%; }

/* link como botão de texto */
.g-link {
  color: var(--g-brand);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  padding: 4px var(--g-space-2);
  border-radius: var(--g-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-1);
  transition: background var(--g-fast) var(--g-ease);
}
.g-link:hover { background: var(--g-brand-soft); }

/* ===== Form fields ===== */
.g-field {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-2);
}
.g-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-space-4);
}
.g-label {
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  color: var(--g-text);
}
.g-label-hint {
  font-size: var(--g-text-xs);
  color: var(--g-text-3);
  font-weight: var(--g-weight-regular);
  margin-left: var(--g-space-2);
}

.g-input, .g-select, .g-textarea {
  width: 100%;
  font-family: var(--g-font);
  font-size: var(--g-text-base);
  line-height: 1.4;
  color: var(--g-text);
  background: var(--g-surface);
  border: 1px solid var(--g-border-strong);
  border-radius: var(--g-radius);
  padding: 0 var(--g-space-3);
  height: var(--g-h-input);
  transition: border-color var(--g-fast) var(--g-ease),
              box-shadow var(--g-fast) var(--g-ease);
}
.g-textarea {
  height: auto;
  padding: var(--g-space-3);
  min-height: 80px;
  resize: vertical;
}
.g-input:hover, .g-select:hover, .g-textarea:hover {
  border-color: var(--g-text-3);
}
.g-input:focus, .g-select:focus, .g-textarea:focus {
  outline: none;
  border-color: var(--g-brand);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
}
.g-input:disabled, .g-select:disabled, .g-textarea:disabled {
  background: var(--g-surface-2);
  color: var(--g-text-3);
  cursor: not-allowed;
}
.g-input-touch, .g-select-touch, .g-textarea-touch {
  height: 46px;
  font-size: var(--g-text-md);
}

.g-helper {
  font-size: var(--g-text-xs);
  color: var(--g-text-3);
}
.g-error-text {
  font-size: var(--g-text-xs);
  color: var(--g-danger);
  font-weight: var(--g-weight-medium);
}

/* ===== Cards ===== */
.g-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-5);
  box-shadow: var(--g-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-4);
  min-width: 0;
}
.g-card-interactive {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--g-fast) var(--g-ease),
              box-shadow var(--g-fast) var(--g-ease),
              transform var(--g-fast) var(--g-ease);
}
.g-card-interactive:hover {
  border-color: var(--g-border-strong);
  box-shadow: var(--g-shadow-sm);
}

.g-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--g-space-3);
}
.g-card-head h2 {
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-semi);
  margin: 0 0 2px;
}
.g-card-sub {
  font-size: var(--g-text-xs);
  color: var(--g-text-3);
  font-weight: var(--g-weight-regular);
}

/* ===== Pills / Tags ===== */
.g-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: var(--g-weight-semi);
  padding: 3px 8px;
  border-radius: var(--g-radius-pill);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
}
.g-pill-blue    { background: var(--g-brand-soft); color: var(--g-brand); }
.g-pill-neutral { background: var(--g-surface-3); color: var(--g-text-2); }
.g-pill-success { background: var(--g-success-soft); color: var(--g-success); }
.g-pill-warn    { background: var(--g-warn-soft); color: var(--g-warn); }
.g-pill-danger  { background: var(--g-danger-soft); color: var(--g-danger); }

/* Pill com case-normal (mais para tipo de dia, código, etc.) */
.g-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-medium);
  padding: 3px 8px;
  border-radius: var(--g-radius-pill);
  background: var(--g-surface-2);
  color: var(--g-text-2);
  border: 1px solid var(--g-border);
}

/* ===== KPI cards (com sparkline opcional) ===== */
.g-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--g-space-3);
  margin-bottom: var(--g-space-5);
}
.g-kpi {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-4) var(--g-space-5) var(--g-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-2);
  min-height: 118px;
  box-shadow: var(--g-shadow-xs);
}
.g-kpi-link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--g-fast) var(--g-ease);
}
.g-kpi-link:hover { border-color: var(--g-border-strong); }

.g-kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--g-space-2);
}
.g-kpi-label {
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-semi);
  color: var(--g-text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.g-kpi-value {
  font-size: var(--g-text-2xl);
  font-weight: var(--g-weight-semi);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--g-text);
}
.g-kpi-foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--g-space-2);
  margin-top: auto;
}
.g-kpi-foot small {
  color: var(--g-text-3);
  font-size: var(--g-text-xs);
}
.g-spark {
  width: 88px !important;
  height: 28px !important;
}

/* ===== Grid de dashboard ===== */
.g-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--g-space-4);
}
.g-card-wide { grid-column: span 1; }
.g-card-full { grid-column: 1 / -1; }

.g-chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
}
.g-chart-wrap-tall { height: 280px; }
/* Chart.js define width inline no canvas; clampa pra não estourar o card no celular */
.g-chart-wrap canvas { max-width: 100%; }

/* ===== Período (segmented control) ===== */
.g-period {
  display: inline-flex;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: 2px;
  gap: 0;
}
.g-period-btn {
  border: 0;
  background: transparent;
  color: var(--g-text-2);
  font-family: var(--g-font);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  padding: 0 var(--g-space-4);
  height: 32px;            /* compacto no desktop */
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
  white-space: nowrap;
}
.g-period-btn:hover { color: var(--g-text); }
.g-period-btn.active {
  background: var(--g-text);
  color: #fff;
}

/* Responsivo: em tablet/mobile, period wrap quebra e botões viram 40px (touch) */
@media (max-width: 900px) {
  .g-pageheader,
  .g-card-head {
    flex-wrap: wrap;
  }
  .g-period-wrap {
    align-items: flex-start;
    width: 100%;
  }
  .g-period {
    flex-wrap: wrap;
    width: 100%;
  }
  .g-period-btn {
    height: 40px;
    flex: 1 1 auto;
    min-width: 64px;
  }
  .g-period-range {
    flex-wrap: wrap;
  }
}

/* ===== Rank list (lista vertical) ===== */
.g-rank-list { display: flex; flex-direction: column; gap: var(--g-space-2); }

/* ===== Alerts (cards de observação) ===== */
.g-alerts { display: grid; gap: var(--g-space-2); }
.g-alert {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: var(--g-space-3);
  background: var(--g-surface-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: var(--g-space-3) var(--g-space-3) var(--g-space-3) 0;
  overflow: hidden;
}
.g-alert::before {
  content: "";
  background: var(--g-warn);
}
.g-alert.is-general::before { background: var(--g-brand); }
.g-alert-body { padding: 2px 0; min-width: 0; }
.g-alert-head {
  display: flex;
  justify-content: space-between;
  gap: var(--g-space-3);
  font-size: var(--g-text-sm);
}
.g-alert-head b { color: var(--g-text); font-weight: var(--g-weight-semi); }
.g-alert-head small { color: var(--g-text-3); font-size: var(--g-text-xs); }
.g-alert-text {
  margin: 4px 0 0;
  font-size: var(--g-text-sm);
  color: var(--g-text-2);
  line-height: 1.45;
}

/* ===== Inline alerts (form errors / success messages) ===== */
.g-banner {
  display: flex;
  align-items: start;
  gap: var(--g-space-3);
  padding: var(--g-space-3) var(--g-space-4);
  border-radius: var(--g-radius);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  border: 1px solid transparent;
}
.g-banner-info    { background: var(--g-brand-soft); color: var(--g-brand); border-color: rgba(30,64,175,.15); }
.g-banner-success { background: var(--g-success-soft); color: var(--g-success); border-color: rgba(21,128,61,.18); }
.g-banner-warn    { background: var(--g-warn-soft); color: var(--g-warn); border-color: rgba(180,83,9,.18); }
.g-banner-error   { background: var(--g-danger-soft); color: var(--g-danger); border-color: rgba(185,28,28,.18); }
.g-banner .g-icon { margin-top: 1px; }

/* ===== Empty state ===== */
.g-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g-space-3);
  padding: var(--g-space-7) var(--g-space-5);
  background: var(--g-surface-2);
  border: 1px dashed var(--g-border-strong);
  border-radius: var(--g-radius);
  color: var(--g-text-3);
  text-align: center;
}
.g-empty-icon {
  width: 36px;
  height: 36px;
  color: var(--g-text-3);
}
.g-empty-title {
  font-size: var(--g-text-base);
  font-weight: var(--g-weight-semi);
  color: var(--g-text-2);
}
.g-empty-desc {
  font-size: var(--g-text-sm);
  color: var(--g-text-3);
  max-width: 380px;
}

/* ===== Table ===== */
.g-table-wrap {
  overflow-x: auto;
  border-radius: var(--g-radius);
}
.g-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
  font-size: var(--g-text-sm);
}
.g-table thead th {
  text-align: left;
  font-weight: var(--g-weight-semi);
  font-size: var(--g-text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--g-text-3);
  padding: var(--g-space-2) var(--g-space-3);
  background: var(--g-surface-2);
  border-bottom: 1px solid var(--g-border);
}
.g-table thead th:first-child { border-top-left-radius: var(--g-radius); }
.g-table thead th:last-child  { border-top-right-radius: var(--g-radius); }
.g-table tbody td {
  padding: var(--g-space-3);
  border-bottom: 1px solid var(--g-border);
  color: var(--g-text);
  vertical-align: middle;
}
.g-table tbody tr:hover td { background: var(--g-surface-2); }
.g-table tbody tr:last-child td { border-bottom: 0; }
.g-right { text-align: right; }
.g-center { text-align: center; }
.g-nowrap { white-space: nowrap; }

.g-row-summary { cursor: pointer; font-weight: var(--g-weight-medium); }
.g-row-summary:hover td { background: var(--g-brand-soft) !important; }
.g-row-summary td b { font-weight: var(--g-weight-semi); }
.g-row-detail td {
  background: var(--g-surface-2);
  color: var(--g-text-2);
  font-size: var(--g-text-sm);
}

.g-qty {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: var(--g-weight-semi);
  background: var(--g-success-soft);
  color: var(--g-success);
  padding: 2px 9px;
  border-radius: var(--g-radius-pill);
  font-size: var(--g-text-xs);
}
.g-tipo {
  display: inline-block;
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-medium);
  padding: 2px 8px;
  border-radius: var(--g-radius-pill);
  background: var(--g-surface-2);
  color: var(--g-text-2);
  border: 1px solid var(--g-border);
}

/* ===== Auth (centered card) ===== */
.g-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--g-space-5);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(30,64,175,.08), transparent 60%),
    var(--g-bg);
}
.g-auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-xl);
  padding: var(--g-space-7);
  box-shadow: var(--g-shadow-md);
}
.g-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  margin-bottom: var(--g-space-5);
}
.g-auth-logo {
  height: 32px;
  width: auto;
  color: var(--g-text);  /* SVG do logo usa currentColor */
}
/* Divisor "ou" entre Entrar e Criar conta */
.g-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--g-space-3) 0;
  color: var(--g-text-3);
  font-size: var(--g-text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.g-auth-divider::before,
.g-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--g-border);
}
.g-auth-divider span {
  padding: 0 var(--g-space-3);
}

/* Banner global no topo (auto-approve, manutenção, etc) — acima do topbar */
.g-banner-global {
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  padding: 8px var(--g-space-5);
  background: var(--g-warn);
  color: #fff;
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  position: sticky;
  top: 0;
  z-index: 60;  /* acima do topbar */
}
.g-banner-global svg {
  stroke: #fff;
  flex-shrink: 0;
}
.g-banner-global b { color: #fff; }
.g-banner-global-action {
  margin-left: auto;
  color: #fff;
  text-decoration: underline;
  font-weight: var(--g-weight-semi);
  white-space: nowrap;
}
.g-banner-global-action:hover { opacity: 0.85; }

/* ===== g-card-collapsible: cards sanfonáveis =====
   Uso:
     <details class="g-card g-card-collapsible">
       <summary>
         <div class="g-card-head g-card-head-summary">
           <div>
             <h2>Título <span class="g-pill g-pill-neutral">N</span></h2>
             <span class="g-card-sub">subtítulo</span>
           </div>
           <span class="g-card-collapsible-chevron" aria-hidden="true">
             <svg ...><path d="M6 9l6 6 6-6"/></svg>
           </span>
         </div>
       </summary>
       <div class="g-card-body">
         ...conteúdo...
       </div>
     </details>
*/
details.g-card-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  outline: none;
}
details.g-card-collapsible > summary::-webkit-details-marker { display: none; }
details.g-card-collapsible > summary::marker { display: none; }
details.g-card-collapsible > summary:hover .g-card-head-summary {
  background: var(--g-surface-2);
}
details.g-card-collapsible .g-card-head-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-3);
  padding: var(--g-space-4);
  border-radius: var(--g-radius);
  transition: background var(--g-fast) var(--g-ease);
}
details.g-card-collapsible .g-card-collapsible-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform var(--g-fast) var(--g-ease);
  color: var(--g-text-3);
  flex-shrink: 0;
}
details.g-card-collapsible[open] .g-card-collapsible-chevron {
  transform: rotate(180deg);
}
details.g-card-collapsible > .g-card-body {
  padding: 0 var(--g-space-4) var(--g-space-4);
  border-top: 1px solid var(--g-border);
  margin-top: 0;
}
details.g-card-collapsible[open] > .g-card-body {
  padding-top: var(--g-space-4);
}

/* ===== Bulk selection bar (ex.: excluir vários defeitos) ===== */
.g-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-3);
  padding: var(--g-space-3) var(--g-space-4);
  margin-bottom: var(--g-space-3);
  background: var(--g-surface-2);
  border: 1px solid var(--g-border);
  border-left: 3px solid var(--g-brand);
  border-radius: var(--g-radius);
  position: sticky;
  top: 0;
  z-index: 5;
}
.g-bulk-bar[hidden] { display: none; }
.g-bulk-info { color: var(--g-text-2); font-size: var(--g-text-sm); }
.g-bulk-info b { color: var(--g-text); font-weight: var(--g-weight-semi); }
.g-bulk-actions { display: flex; gap: var(--g-space-2); }
.g-bulk-check, .g-bulk-check-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--g-brand);
}
.g-auth-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--g-radius-sm);
  background: linear-gradient(135deg, var(--g-brand), var(--g-brand-2));
  color: #fff;
  font-weight: var(--g-weight-bold);
  font-size: 13px;
  display: grid;
  place-items: center;
}
.g-auth-brand strong {
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-semi);
  color: var(--g-text);
}
.g-auth-card h1 {
  font-size: var(--g-text-xl);
  margin: 0 0 var(--g-space-1);
}
.g-auth-card > p {
  color: var(--g-text-2);
  font-size: var(--g-text-sm);
  margin: 0 0 var(--g-space-5);
}
.g-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
}
.g-auth-form .g-btn { margin-top: var(--g-space-3); }
.g-auth-foot {
  margin-top: var(--g-space-5);
  padding-top: var(--g-space-4);
  border-top: 1px solid var(--g-border);
  font-size: var(--g-text-sm);
  text-align: center;
}
.g-auth-foot a { color: var(--g-brand); font-weight: var(--g-weight-medium); }
.g-auth-foot a:hover { text-decoration: underline; }

/* ===== Home / hub cards ===== */
.g-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--g-space-4);
  margin-top: var(--g-space-5);
}
.g-hub-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--g-fast) var(--g-ease),
              box-shadow var(--g-fast) var(--g-ease);
}
.g-hub-card:hover {
  border-color: var(--g-brand);
  box-shadow: var(--g-shadow);
}
.g-hub-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--g-radius);
  background: var(--g-brand-soft);
  color: var(--g-brand);
  display: grid;
  place-items: center;
}
.g-hub-card h3 { font-size: var(--g-text-md); }
.g-hub-card p {
  color: var(--g-text-2);
  font-size: var(--g-text-sm);
  margin: 0;
  line-height: 1.45;
}

/* ===== Action card (touch para integrador) ===== */
.g-action {
  display: flex;
  align-items: center;
  gap: var(--g-space-4);
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--g-fast) var(--g-ease);
  min-height: 84px;
}
.g-action:hover { border-color: var(--g-brand); }
.g-action.is-primary {
  background: var(--g-brand);
  color: #fff;
  border-color: var(--g-brand);
}
.g-action.is-primary:hover { background: var(--g-brand-2); border-color: var(--g-brand-2); }
.g-action-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--g-radius);
  background: var(--g-brand-soft);
  color: var(--g-brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.g-action.is-primary .g-action-icon {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.g-action-text { flex: 1; min-width: 0; }
.g-action-text strong {
  display: block;
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-semi);
  margin-bottom: 2px;
}
.g-action-text span {
  display: block;
  font-size: var(--g-text-sm);
  color: var(--g-text-2);
}
.g-action.is-primary .g-action-text span { color: rgba(255,255,255,.85); }
.g-action-arrow {
  color: var(--g-text-3);
  flex-shrink: 0;
}
.g-action.is-primary .g-action-arrow { color: rgba(255,255,255,.7); }

/* ===== Info strip (servidor local) ===== */
.g-info-strip {
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  background: var(--g-surface-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: var(--g-space-3) var(--g-space-4);
  font-size: var(--g-text-sm);
}
.g-info-strip-icon {
  color: var(--g-brand);
  flex-shrink: 0;
}
.g-info-strip-body { flex: 1; min-width: 0; }
.g-info-strip-body strong {
  display: block;
  color: var(--g-text);
  font-weight: var(--g-weight-semi);
  font-size: var(--g-text-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.g-info-strip-body code {
  font-family: var(--g-mono);
  font-size: var(--g-text-base);
  color: var(--g-text);
  font-weight: var(--g-weight-semi);
  word-break: break-all;
}

/* ===== Equipment chooser grid (touch) ===== */
.g-equip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--g-space-3);
}
.g-equip-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-4);
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  min-height: 64px;
  transition: border-color var(--g-fast) var(--g-ease);
}
.g-equip-card:hover { border-color: var(--g-brand); }
.g-equip-card strong {
  display: block;
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-semi);
}
.g-equip-card small {
  display: block;
  color: var(--g-text-3);
  font-family: var(--g-mono);
  font-size: var(--g-text-xs);
  letter-spacing: .05em;
  margin-top: 2px;
}
.g-equip-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--g-radius);
  background: var(--g-surface-2);
  color: var(--g-brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ===== Activity cart (questionario) ===== */
.g-cart-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--g-space-3);
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: var(--g-space-3);
  margin-bottom: var(--g-space-2);
}
.g-cart-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-cart-item-body b {
  font-size: var(--g-text-base);
  font-weight: var(--g-weight-semi);
}
.g-cart-item-body span {
  font-size: var(--g-text-sm);
  color: var(--g-text-2);
}
.g-cart-item-body small {
  font-size: var(--g-text-xs);
  color: var(--g-text-3);
  margin-top: 2px;
}
.g-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--g-surface-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: var(--g-space-3) var(--g-space-4);
  margin-top: var(--g-space-3);
}
.g-cart-total b {
  font-size: var(--g-text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--g-weight-semi);
  color: var(--g-brand);
}

/* ===== Accordion (defeitos por bancada, etc) ===== */
.g-defects-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-2);
}
.g-acc {
  background: var(--g-surface-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  overflow: hidden;
}
.g-acc[open] {
  background: var(--g-surface);
  border-color: var(--g-border-strong);
  box-shadow: var(--g-shadow-xs);
}
.g-acc > summary {
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  padding: var(--g-space-3) var(--g-space-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--g-fast) var(--g-ease);
}
.g-acc > summary::-webkit-details-marker { display: none; }
.g-acc > summary:hover { background: var(--g-surface-3); }
.g-acc[open] > summary { border-bottom: 1px solid var(--g-border); }

.g-acc-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--g-text-3);
  transition: transform var(--g-fast) var(--g-ease);
}
.g-acc[open] > summary .g-acc-chevron { transform: rotate(90deg); color: var(--g-brand); }
.g-acc-title {
  flex: 1;
  font-weight: var(--g-weight-semi);
  font-size: var(--g-text-md);
  color: var(--g-text);
}
.g-acc-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
}
.g-acc-body {
  padding: var(--g-space-4);
  background: var(--g-surface);
}

/* ===== Defect chips (questionário de teste) ===== */
.g-defect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-space-2);
}
.g-defect-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--g-surface);
  border: 1px solid var(--g-border-strong);
  color: var(--g-text);
  font-family: var(--g-font);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  padding: 8px 14px;
  border-radius: var(--g-radius-pill);
  cursor: pointer;
  transition: background var(--g-fast) var(--g-ease), border-color var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
}
.g-defect-chip:hover {
  background: var(--g-brand-soft);
  border-color: var(--g-brand);
  color: var(--g-brand);
}
.g-defect-chip.is-active {
  background: var(--g-brand);
  border-color: var(--g-brand);
  color: #fff;
  padding: 6px 6px 6px 14px;
  gap: 8px;
}
.g-defect-chip.is-active:hover {
  background: var(--g-brand-2);
}

/* Sprint 3: nome do defeito (clicável pra remover) + qty inline */
.g-defect-chip-name {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: var(--g-weight-semi);
  cursor: pointer;
  padding: 0;
}
.g-defect-chip-name:hover {
  text-decoration: line-through;
  opacity: 0.8;
}
.g-defect-chip-qty {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 0;
  overflow: hidden;
}
.g-defect-qty-btn {
  background: transparent;
  border: 0;
  color: #fff;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-weight: bold;
  transition: background .12s var(--g-ease);
}
.g-defect-qty-btn:hover {
  background: rgba(255,255,255,0.25);
}
.g-defect-qty-input {
  width: 42px;
  text-align: center;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: var(--g-weight-bold);
  -moz-appearance: textfield;
  padding: 0;
}
.g-defect-qty-input::-webkit-inner-spin-button,
.g-defect-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.g-defect-qty-input:focus {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: -2px;
  border-radius: 4px;
}

.g-defect-row {
  display: grid;
  grid-template-columns: 1fr 110px auto;
  gap: var(--g-space-2);
  align-items: center;
  background: var(--g-surface-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: var(--g-space-2) var(--g-space-3);
}
.g-defect-row b { font-weight: var(--g-weight-semi); font-size: var(--g-text-sm); }
.g-defect-row input { height: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.g-saldo-ok    { background: var(--g-success-soft) !important; }
.g-saldo-ok b  { color: var(--g-success); }
.g-saldo-warn  { background: var(--g-warn-soft) !important; }
.g-saldo-warn b{ color: var(--g-warn); }
.g-saldo-error { background: var(--g-danger-soft) !important; }
.g-saldo-error b { color: var(--g-danger); }

/* ===== Section divider ===== */
.g-divider {
  border: 0;
  border-top: 1px solid var(--g-border);
  margin: var(--g-space-5) 0;
}

/* ===== Service accordion override ===== */
.g-rank-list .service-accordion {
  background: var(--g-surface-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  margin: 0;
  overflow: hidden;
}
.g-rank-list .service-accordion summary {
  padding: var(--g-space-3);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--g-space-3);
  align-items: center;
  list-style: none;
}
.g-rank-list .service-accordion summary::-webkit-details-marker { display: none; }
.g-rank-list .service-accordion summary b {
  background: var(--g-brand-soft);
  color: var(--g-brand);
  font-weight: var(--g-weight-semi);
  padding: 3px 9px;
  font-size: var(--g-text-xs);
  border-radius: var(--g-radius-pill);
}
.g-rank-list .accordion-body { padding: var(--g-space-1) var(--g-space-3) var(--g-space-3); }
.g-rank-list .accordion-subrow {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  padding: var(--g-space-2) var(--g-space-3);
  margin-top: var(--g-space-2);
  font-size: var(--g-text-sm);
}
.g-rank-list .accordion-subrow div:first-child {
  display: flex;
  justify-content: space-between;
  gap: var(--g-space-2);
}
.g-rank-list .accordion-subrow small {
  color: var(--g-text-3);
  font-weight: var(--g-weight-medium);
  font-size: var(--g-text-xs);
}
.g-rank-list .bar {
  height: 4px;
  background: var(--g-border);
  margin-top: var(--g-space-2);
  border-radius: var(--g-radius-pill);
  overflow: hidden;
}
.g-rank-list .bar i {
  display: block;
  height: 100%;
  background: var(--g-brand);
  border-radius: var(--g-radius-pill);
}

/* ===== QR Codes (on-screen + print) ===== */
.g-qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--g-space-4);
}
.g-qr-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
}
.g-qr-card h2 {
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-semi);
}
.g-qr-card img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  margin: 0 auto;
  image-rendering: pixelated;
}
.g-qr-url {
  font-family: var(--g-mono);
  font-size: 11px;
  color: var(--g-text-3);
  word-break: break-all;
}
.g-qr-code {
  display: inline-block;
  font-family: var(--g-mono);
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-bold);
  letter-spacing: .08em;
  background: var(--g-text);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--g-radius-sm);
}

/* ===== Filter bar (observações) ===== */
.g-filter-bar {
  display: flex;
  gap: var(--g-space-3);
  align-items: end;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-4);
  margin-bottom: var(--g-space-4);
  flex-wrap: wrap;
}
.g-filter-bar > .g-field { flex: 1; min-width: 180px; }

/* ===== Confirm screen (touch) ===== */
.g-confirm {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--g-space-5);
  align-items: center;
}
.g-confirm-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  background: var(--g-brand-soft);
  color: var(--g-brand);
  padding: 6px var(--g-space-4);
  border-radius: var(--g-radius-pill);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-semi);
}
.g-confirm h1 {
  font-size: var(--g-text-2xl);
  margin: 0;
}
.g-confirm p {
  color: var(--g-text-2);
  font-size: var(--g-text-sm);
  max-width: 360px;
  margin: 0 auto;
}
.g-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
  width: 100%;
  max-width: 360px;
}
.g-confirm-actions .g-btn { width: 100%; }

/* ===== Status pills (usuarios) ===== */
.g-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--g-text-xs);
  font-weight: var(--g-weight-semi);
  padding: 3px 9px;
  border-radius: var(--g-radius-pill);
}
.g-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.g-status-ok    { background: var(--g-success-soft); color: var(--g-success); }
.g-status-off   { background: var(--g-surface-3); color: var(--g-text-2); }
.g-status-warn  { background: var(--g-warn-soft); color: var(--g-warn); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .g-grid { grid-template-columns: 1fr; }
  .g-hub { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .g-topbar {
    grid-template-columns: 1fr;
    height: auto;
    padding: var(--g-space-3) var(--g-space-4);
    gap: var(--g-space-3);
  }
  /* Sem wrap o nav estoura a largura do celular (links vazam do fundo escuro) */
  .g-nav { flex-wrap: wrap; row-gap: 2px; }
  .g-user { padding-left: 0; border-left: 0; justify-content: space-between; }
  .g-shell { padding: var(--g-space-4) var(--g-space-4) var(--g-space-7); }
  .g-kpis { grid-template-columns: repeat(2, 1fr); }
  .g-pageheader { flex-direction: column; align-items: stretch; }
  .g-hub { grid-template-columns: 1fr; }
  .g-equip-grid { grid-template-columns: 1fr; }
  .g-field-row { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .g-kpis { grid-template-columns: 1fr; }
  .g-auth-card { padding: var(--g-space-5); }
}

@media print {
  body { background: white; }
  /* `.topbar` entrou junto em 11/08: a barra da gestão nunca teve regra de
     impressão, então TODA folha saía com a faixa escura no topo. Só a tela de
     QR contornava isso, à mão, com um `no-print` no header do operador. */
  .no-print, .g-topbar, .topbar { display: none !important; }
  .g-shell { max-width: none; padding: 0; }
  .g-qr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .g-qr-card {
    border: 2px solid var(--g-text);
    box-shadow: none;
    break-inside: avoid;
  }
}

/* ===================================================================
   Avisos (comunicação Gestão/Conferente -> Testador/Integrador)
   =================================================================== */

/* Badge numérico vermelho (não-lidos) — pulsante como sinalizador */
.g-badge-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: var(--g-radius-pill);
  background: var(--g-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: var(--g-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.7);
  z-index: 1;
}

/* "Ping" — anel vermelho expandindo continuamente atrás do badge */
.g-badge-count::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* `inset` não existe no Safari iOS < 14.5 */
  border-radius: inherit;
  background: var(--g-danger);
  opacity: 0.65;
  z-index: -1;
  animation: g-badge-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes g-badge-ping {
  0%   { transform: scale(1);   opacity: 0.65; }
  80%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
  .g-badge-count::before {
    animation: none;
    opacity: 0;
  }
}

/* Lista e card de aviso */
.g-aviso-list {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
  padding: var(--g-space-4);
}

.g-aviso {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  background: var(--g-surface);
  padding: var(--g-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
}

.g-aviso-enviado {
  border-left: 3px solid var(--g-warn);
  background: var(--g-warn-soft);
}
.g-aviso-lido {
  border-left: 3px solid var(--g-brand);
}
.g-aviso-respondido {
  border-left: 3px solid var(--g-success);
}

.g-aviso-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--g-space-3);
  flex-wrap: wrap;
}

.g-aviso-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--g-text-sm);
}

.g-aviso-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.g-aviso-msg {
  font-size: var(--g-text-base);
  color: var(--g-text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.g-aviso-reply {
  border-left: 2px solid var(--g-border-strong);
  padding: var(--g-space-2) var(--g-space-3);
  background: var(--g-surface-2);
  border-radius: var(--g-radius-sm);
}
.g-aviso-reply p {
  margin: 4px 0 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.g-aviso-actions {
  display: flex;
  gap: var(--g-space-2);
  flex-wrap: wrap;
  align-items: center;
}

.g-aviso-reply-form > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.g-aviso-reply-form > summary::-webkit-details-marker { display: none; }

.g-aviso-pendentes-bloco {
  border-left: 3px solid var(--g-warn);
}

/* ===== Dialog (modal nativo) ===== */
.g-dialog {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-5);
  max-width: 560px;
  width: 92vw;
  box-shadow: var(--g-shadow-md);
  background: var(--g-surface);
  color: var(--g-text);
}
.g-dialog::backdrop {
  background: rgba(15, 26, 43, .45);
  backdrop-filter: blur(2px);
}
.g-dialog h2 {
  margin-bottom: 0;
  font-size: var(--g-text-lg);
}
.g-dialog form { display: block; }

/* ===== Seletor de Origem (radios em chips) — usado no teste_questionario ===== */
.g-origem-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--g-space-2);
  margin-top: 4px;
}
.g-origem-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.g-origem-option > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.g-origem-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--g-space-3) var(--g-space-2);
  border: 1.5px solid var(--g-border);
  border-radius: var(--g-radius);
  background: var(--g-surface);
  color: var(--g-text-2);
  text-align: center;
  transition: border-color var(--g-fast) var(--g-ease), background var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease);
  min-height: 56px;
}
.g-origem-pill strong {
  font-size: var(--g-text-md);
  font-weight: var(--g-weight-semi);
  color: var(--g-text);
}
.g-origem-pill small {
  font-size: var(--g-text-xs);
  color: var(--g-text-3);
  line-height: 1.25;
}
.g-origem-option:hover .g-origem-pill {
  border-color: var(--g-border-strong);
  background: var(--g-surface-2);
}
.g-origem-option > input[type="radio"]:checked + .g-origem-pill {
  border-color: var(--g-brand);
  background: var(--g-brand-soft);
  color: var(--g-brand);
}
.g-origem-option > input[type="radio"]:checked + .g-origem-pill strong {
  color: var(--g-brand);
}
.g-origem-option > input[type="radio"]:focus-visible + .g-origem-pill {
  outline: 2px solid var(--g-brand);
  outline-offset: 2px;
}

/* Pill de badge da origem (pra mostrar nos cards de teste).
   NOVO = azul (marca), RMA = laranja (retorno), RTNC = roxo (categoria neutra).
   RTNC NÃO é vermelho porque não significa "problema" — é só uma categoria. */
.g-pill-origem-novo { background: var(--g-brand-soft); color: var(--g-brand); }
.g-pill-origem-rma  { background: var(--g-warn-soft);  color: var(--g-warn); }
.g-pill-origem-ret  { background: #fef3c7;            color: #92400e; }  /* âmbar — retrabalho interno */
.g-pill-origem-rtnc { background: #ede9fe;            color: #6d28d9; }  /* roxo — RTNC */

/* ===== Seletor de período com Tudo + range customizado ===== */
.g-period-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.g-period-range-btn {
  padding: 0 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g-period-range {
  display: flex;
  align-items: center;
  gap: var(--g-space-2);
  padding: var(--g-space-2) var(--g-space-3);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  background: var(--g-surface);
  box-shadow: var(--g-shadow-sm);
}
.g-period-range-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--g-text-xs);
  color: var(--g-text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--g-weight-semi);
}
.g-period-range-label .g-input {
  height: 30px;
  padding: 0 var(--g-space-2);
  font-size: var(--g-text-sm);
  width: auto;
  min-width: 130px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--g-weight-regular);
  color: var(--g-text);
}
.g-btn-sm {
  height: 30px;
  padding: 0 var(--g-space-3);
  font-size: var(--g-text-sm);
}

/* ===== Loading spinner + animação "enviado" ===== */

/* Spinner: círculo girando */
.g-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: g-spin 0.7s linear infinite;
  vertical-align: -3px;
}
.g-spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
@keyframes g-spin {
  to { transform: rotate(360deg); }
}
/* Reduce-motion: spinner pulsa em opacidade em vez de girar */
@media (prefers-reduced-motion: reduce) {
  .g-spinner {
    animation: g-spinner-pulse 1.5s ease-in-out infinite;
  }
  @keyframes g-spinner-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
  }
}

/* Estado "enviando": botão fica disabled, troca texto por spinner */
.g-btn.is-sending {
  opacity: 0.85;
  cursor: wait;
  pointer-events: none;
}

/* Bloco que substitui o form quando enviado (envelope + texto) */
.g-sent-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--g-space-3);
  padding: var(--g-space-6) var(--g-space-4);
  color: var(--g-success);
  text-align: center;
  animation: g-sent-fade .3s var(--g-ease);
}
.g-sent-anim .g-sent-icon {
  width: 56px;
  height: 56px;
  stroke: var(--g-success);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: g-sent-pop .55s var(--g-ease);
  transform-origin: center;
}
.g-sent-anim .g-sent-check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: g-sent-check .4s var(--g-ease) .25s forwards;
}
.g-sent-anim .g-sent-text {
  font-size: var(--g-text-lg);
  font-weight: var(--g-weight-semi);
  letter-spacing: .01em;
}
.g-sent-anim .g-sent-sub {
  font-size: var(--g-text-sm);
  color: var(--g-text-2);
  font-weight: var(--g-weight-regular);
}
@keyframes g-sent-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes g-sent-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes g-sent-check {
  to { stroke-dashoffset: 0; }
}
/* Reduce-motion: animação do envelope vira fade simples, check aparece direto */
@media (prefers-reduced-motion: reduce) {
  .g-sent-anim,
  .g-sent-anim .g-sent-icon,
  .g-sent-anim .g-sent-check {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .g-sent-anim {
    animation: g-sent-fade .15s var(--g-ease) !important;
  }
}

/* Mensagem inline de erro (em forms async) */
.g-async-error {
  margin-top: var(--g-space-3);
  padding: var(--g-space-2) var(--g-space-3);
  border-radius: var(--g-radius-sm);
  background: var(--g-danger-soft);
  color: var(--g-danger);
  font-size: var(--g-text-sm);
}

/* Toast leve (canto inferior direito) — usado quando o ack/responder é AJAX */
.g-toast {
  position: fixed;
  right: var(--g-space-4);
  bottom: var(--g-space-4);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--g-space-2);
  padding: var(--g-space-3) var(--g-space-4);
  border-radius: var(--g-radius);
  background: var(--g-text);
  color: #fff;
  font-size: var(--g-text-sm);
  box-shadow: var(--g-shadow-md);
  animation: g-toast-in .2s var(--g-ease);
}
.g-toast.is-leaving {
  animation: g-toast-out .25s var(--g-ease) forwards;
}
@keyframes g-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes g-toast-out {
  to { transform: translateY(20px); opacity: 0; }
}

/* ============================================================
   Layout utilities — substituem inline styles repetidos.
   Padrão: classes sem responsabilidade visual (cor/borda),
   só layout. Use junto com componentes (g-card, g-form, etc).
   ============================================================ */

/* Linha horizontal: align-items center, gap-2 (default) */
.g-row {
  display: flex;
  gap: var(--g-space-2);
  align-items: center;
}
.g-row-3 { gap: var(--g-space-3); }
.g-row-4 { gap: var(--g-space-4); }

/* Linha que quebra em telas estreitas */
.g-row-wrap {
  display: flex;
  gap: var(--g-space-2);
  flex-wrap: wrap;
}
.g-row-wrap-3 { gap: var(--g-space-3); }

/* Coluna vertical com gap */
.g-stack {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-2);
}
.g-stack-3 { gap: var(--g-space-3); }

/* Ações alinhadas à direita (botão Cancelar / Salvar) */
.g-actions-end {
  display: flex;
  gap: var(--g-space-2);
  justify-content: flex-end;
}
/* Variante: rodapé de modal/form com margin-top */
.g-actions-end-mt {
  display: flex;
  gap: var(--g-space-2);
  justify-content: flex-end;
  margin-top: var(--g-space-4);
}

/* Linha de form inline: label/input/botão lado a lado */
.g-form-row {
  display: flex;
  gap: var(--g-space-2);
  min-width: 240px;
}

/* ============================================================
   Cards de Lote (Sprint C — fila de inspeção)
   ============================================================ */
.g-lote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--g-space-3);
}
.g-lote-card {
  background: var(--g-surface-1);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: var(--g-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
  transition: border-color .15s var(--g-ease), box-shadow .15s var(--g-ease);
}
.g-lote-card.g-timer-warn {
  border-color: var(--g-warn);
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.15);
}
.g-lote-card.g-timer-late {
  border-color: var(--g-danger);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18);
  animation: g-lote-pulse 1.5s ease-in-out infinite;
}
@keyframes g-lote-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.005); }
}
@media (prefers-reduced-motion: reduce) {
  .g-lote-card.g-timer-late { animation: none; }
}
.g-lote-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--g-space-2);
}
.g-lote-card-head h3 {
  margin: 0;
  font-size: var(--g-text-lg);
  font-weight: var(--g-weight-semi);
}
.g-lote-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--g-text-sm);
  color: var(--g-text-2);
}
.g-lote-obs {
  font-style: italic;
  color: var(--g-text-3);
  border-left: 3px solid var(--g-border);
  padding-left: var(--g-space-2);
  margin-top: var(--g-space-2);
}
.g-lote-actions {
  margin-top: auto;
}

/* Cronômetro grande / pequeno */
.g-timer {
  background: var(--g-surface-2);
  border-radius: var(--g-radius);
  padding: var(--g-space-2) var(--g-space-3);
  text-align: center;
  border: 1px solid var(--g-border);
}
.g-timer-label {
  font-size: var(--g-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g-text-3);
  font-weight: var(--g-weight-medium);
}
.g-timer-value {
  font-family: var(--g-mono, "JetBrains Mono", "Courier New", monospace);
  font-size: 1.8rem;
  font-weight: var(--g-weight-bold);
  line-height: 1.1;
  color: var(--g-text-1);
  letter-spacing: 0.02em;
}
.g-timer-grande .g-timer-value {
  font-size: 2.4rem;
}
/* Cor do cronômetro reflete urgência */
.g-lote-card.g-timer-ok .g-timer { border-color: var(--g-success); }
.g-lote-card.g-timer-ok .g-timer-value { color: var(--g-success); }
.g-lote-card.g-timer-warn .g-timer { border-color: var(--g-warn); }
.g-lote-card.g-timer-warn .g-timer-value { color: var(--g-warn); }
.g-lote-card.g-timer-late .g-timer {
  border-color: var(--g-danger);
  background: rgba(220, 53, 69, 0.08);
}
.g-lote-card.g-timer-late .g-timer-value { color: var(--g-danger); }


/* Spacing utilities */
.g-mt-2 { margin-top: var(--g-space-2); }
.g-mt-3 { margin-top: var(--g-space-3); }
.g-mt-4 { margin-top: var(--g-space-4); }
.g-mt-5 { margin-top: var(--g-space-5); }
.g-mb-2 { margin-bottom: var(--g-space-2); }
.g-mb-3 { margin-bottom: var(--g-space-3); }
.g-mb-4 { margin-bottom: var(--g-space-4); }

/* ============================================================
   Permissões — tabela matriz + toggle switch
   ============================================================ */

/* Separador de grupo (área de permissões) dentro da tabela */
.g-row-group td {
  background: var(--g-surface-2);
  border-top: 2px solid var(--g-border);
}
.g-row-area {
  font-size: var(--g-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g-text-3);
  padding: var(--g-space-2) var(--g-space-3) !important;
}

/* Toggle switch nas células da matriz role × permissão */
.g-perm-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
  vertical-align: middle;
}
.g-perm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.g-perm-toggle-thumb {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* `inset` não existe no Safari iOS < 14.5 */
  background: var(--g-surface-3, #d9d9d9);
  border-radius: 22px;
  transition: background .15s var(--g-ease);
}
.g-perm-toggle-thumb::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s var(--g-ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.g-perm-toggle input:checked + .g-perm-toggle-thumb {
  background: var(--g-brand);
}
.g-perm-toggle input:checked + .g-perm-toggle-thumb::after {
  transform: translateX(16px);
}
.g-perm-toggle input:focus-visible + .g-perm-toggle-thumb {
  outline: 2px solid var(--g-brand);
  outline-offset: 2px;
}
.g-perm-toggle.just-toggled .g-perm-toggle-thumb {
  box-shadow: 0 0 0 4px rgba(0, 100, 255, 0.15);
}

/* Tabela de perms mais compacta */
.g-table-perms td, .g-table-perms th {
  padding: var(--g-space-2) var(--g-space-3);
}
.g-table-perms th {
  font-size: var(--g-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   Radio pills — radio group estilo pill clicável.
   Usado no questionario.html (tipo_dia) substituindo o select.
   ============================================================ */
.g-radio-group {
  display: flex;
  gap: var(--g-space-2);
  flex-wrap: wrap;
}
.g-radio-pill {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.g-radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.g-radio-pill > span {
  display: inline-block;
  padding: 10px 16px;
  min-height: 40px;
  border: 1px solid var(--g-border);
  border-radius: 999px;
  background: var(--g-surface-1);
  color: var(--g-text-2);
  font-size: var(--g-text-sm);
  font-weight: var(--g-weight-medium);
  line-height: 20px;
  transition: all .15s var(--g-ease);
}
.g-radio-pill:hover > span {
  border-color: var(--g-brand);
  color: var(--g-text-1);
}
.g-radio-pill input[type="radio"]:checked + span {
  background: var(--g-brand-soft, rgba(0,100,255,0.12));
  border-color: var(--g-brand);
  color: var(--g-brand);
  font-weight: var(--g-weight-semi);
}
.g-radio-pill input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--g-brand);
  outline-offset: 2px;
}