/* ═══════════════════════════════════════════════════════════════════════
   GenesisOS — Design System (identidade Genesis: dark + Sora + verde-limão)
   FONTE ÚNICA do shell/tema. Layout e posição dos elementos INALTERADOS —
   só a "pele" (cores, tipografia) veste a identidade do Painel Genesis.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
  --background: #070707;                 /* fundo escuro Genesis */
  --nav: #0c0c0c;                        /* sidebar (levemente destacada do fundo) */
  --surface: rgba(255, 255, 255, 0.05);  /* tiles/hover suave */
  --border: rgba(255, 255, 255, 0.09);   /* hairline */
  --text-1: #F9F9F9;                     /* texto principal */
  --text-2: #a8a8a4;
  --text-3: #7a7a76;
  --text-4: #555551;
  --primary: #9FEC14;                    /* verde-limão Genesis — cor de marca/ação */
  --primary-hover: #b2f041;
  --primary-ink: #070707;                /* texto sobre o verde (verde é claro) */
  --success: #35c46a;
  --danger: #ff6b6b;
  --hover: rgba(255, 255, 255, 0.05);
  --active: rgba(255, 255, 255, 0.08);
}

/* ─── Tema CLARO (opt-in via <html class="light">). Especificidade html.light
   (0,1,1) vence os :root locais das páginas (0,1,0), então alterna tudo que
   usa tokens. Dark é o padrão (sem a classe). ─── */
html.light {
  --background: #ffffff;
  --nav: #f7f7f5;
  --surface: #f1f1ef;
  --border: #e9e9e7;
  --text-1: #37352f;
  --text-2: #787774;
  --text-3: #9b9a97;
  --text-4: #c7c7c4;
  --primary: #7fbf10;                    /* verde Genesis um tom mais fechado p/ contraste no branco */
  --primary-hover: #6ea80d;
  --primary-ink: #ffffff;
  --success: #28a465;
  --danger: #eb5757;
  --hover: rgba(0, 0, 0, 0.04);
  --active: rgba(0, 0, 0, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body.app-page {
  font-family: 'Sora', system-ui, sans-serif;
  background: var(--background);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
}
body.app-page a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* ─── Shell ─── */
.app-page .app { display: flex; height: 100vh; }

/* ─── Sidebar (248px, #F7F7F5) — retrátil como o chat ─── */
.app-page aside {
  width: 248px; flex: none; height: 100%; overflow: hidden;
  transition: width 0.18s ease;
}
.app-page aside.gos-collapsed { width: 0; }
.side-inner {
  width: 248px; min-width: 248px; height: 100%;
  background: var(--nav); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.side-header {
  height: 45px; flex: none; display: flex; align-items: center;
  padding: 0 8px 0 10px; gap: 8px;
}
.side-header .brand { display: flex; align-items: center; gap: 8px; padding: 4px; min-width: 0; }
.logo-tile {
  display: grid; place-items: center; flex: none;
}
.logo-tile svg { display: block; }
.logo-tile img { height: 21px; width: auto; display: block; }

/* Botão de recolher (aparece no hover da sidebar) + trilho de abrir */
.side-collapse {
  margin-left: auto; flex: none; width: 26px; height: 26px; border: 0;
  background: none; color: var(--text-3); border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.app-page aside:hover .side-collapse { opacity: 1; }
.side-collapse:hover { background: var(--active); color: var(--text-1); }
.gos-open-rail {
  position: fixed; top: 9px; left: 9px; z-index: 50;
  width: 32px; height: 32px; border: 1px solid var(--border); background: var(--background);
  color: var(--text-2); border-radius: 6px; cursor: pointer;
  display: none; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.gos-open-rail:hover { background: var(--hover); color: var(--text-1); }
.app-page aside.gos-collapsed ~ .gos-open-rail { display: flex; }
.brand span { font-size: 14px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.brand span b { font-weight: 800; }

.side-nav { flex: 1; overflow-y: auto; padding: 6px 8px; }
.side-section { margin-top: 16px; }
.side-section:first-child { margin-top: 0; }
.side-section > p {
  padding: 0 8px; margin-bottom: 4px;
  font-size: 11px; font-weight: 500; color: var(--text-3); user-select: none;
}
.side-items { display: flex; flex-direction: column; gap: 1px; }
.side-item {
  display: flex; align-items: center; height: 30px; padding: 0 8px; gap: 10px;
  border-radius: 6px; color: var(--text-2); transition: background 0.12s ease;
}
.side-item:hover { background: var(--hover); }
.side-item.active { background: var(--active); color: var(--text-1); font-weight: 500; }
.side-item i { font-size: 15px; flex: none; color: var(--text-3); }
.side-item.active i { color: var(--text-1); }
.side-item span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .ext { margin-left: auto; font-size: 11px; color: var(--text-4); }

.side-footer { flex: none; border-top: 1px solid var(--border); padding: 6px; }
.side-user {
  display: flex; align-items: center; gap: 8px; padding: 6px;
  border-radius: 6px; transition: background 0.12s ease;
}
.side-user:hover { background: var(--hover); }
.avatar-wrap { position: relative; flex: none; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--active); color: var(--text-1);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.presence {
  width: 10px; height: 10px; border-radius: 50%; background: var(--success);
  border: 2px solid var(--nav); position: absolute; bottom: -2px; right: -2px;
}
.side-user p { font-size: 13px; font-weight: 500; color: var(--text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user button {
  font-family: inherit; width: 28px; height: 28px; border-radius: 6px; border: 0;
  background: none; color: var(--text-3); cursor: pointer; font-size: 15px;
  display: grid; place-items: center; flex: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.side-user button:hover { background: var(--active); color: var(--text-1); }

/* ─── Conteúdo ─── */
.app-page .content { flex: 1; overflow-y: auto; }
.app-page .page { max-width: 820px; margin: 0 auto; padding: 48px 40px 96px; }
.app-page .page.wide { max-width: 1100px; }

.gos-hero { margin-bottom: 26px; }
.gos-hero h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); }
.gos-hero p { font-size: 14px; color: var(--text-3); margin-top: 4px; }

/* ─── Cards / tabelas / forms flat ─── */
.gos-card {
  background: var(--background); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px;
}
.gos-card + .gos-card { margin-top: 14px; }
.gos-card h2, .gos-section-title {
  font-size: 15px; font-weight: 600; color: var(--text-1);
  letter-spacing: -0.01em; margin-bottom: 14px;
}

.gos-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gos-table th {
  text-align: left; font-weight: 500; color: var(--text-3);
  font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gos-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--text-1); vertical-align: middle;
}
.gos-table tbody tr:last-child td, .gos-table tr:last-child td { border-bottom: 0; }
.gos-table tbody tr:hover { background: var(--hover); }

/* ─── Form ─── */
.gos-field { margin-bottom: 16px; }
.gos-field label,
.gos-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-2); margin-bottom: 6px;
}
.gos-input, .gos-select, .gos-textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--text-1);
  background: var(--background); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 12px; height: 38px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.gos-textarea { height: auto; padding: 10px 12px; min-height: 84px; resize: vertical; line-height: 1.5; }
.gos-input:focus, .gos-select:focus, .gos-textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(159,236,20,0.22);
}
.gos-input::placeholder, .gos-textarea::placeholder { color: var(--text-4); }
.gos-help { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* ─── Botões ─── */
.gos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}
.gos-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Primário = ink (preto Notion). A Genesis não é azul; azul fica só p/ link. */
.gos-btn-primary { background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.gos-btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.gos-btn-ghost { background: var(--background); color: var(--text-1); border-color: var(--border); }
.gos-btn-ghost:hover:not(:disabled) { background: var(--hover); }
.gos-btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }

/* ─── Badges ─── */
.gos-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
}
.gos-badge.ok { background: rgba(53,196,106,0.12); color: #4fd88a; border-color: rgba(53,196,106,0.3); }
.gos-badge.warn { background: rgba(245,184,65,0.14); color: #F5B841; border-color: rgba(245,184,65,0.3); }
.gos-badge.danger { background: rgba(255,107,107,0.12); color: #ff8f8f; border-color: rgba(255,107,107,0.3); }
.gos-badge.info { background: rgba(159,236,20,0.12); color: #9FEC14; border-color: rgba(159,236,20,0.3); }

/* ─── Alerts ─── */
.gos-alert {
  display: none; align-items: flex-start; gap: 8px;
  font-size: 13.5px; line-height: 1.45; padding: 11px 14px;
  border-radius: 6px; margin-bottom: 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-1);
}
.gos-alert.show { display: flex; }
.gos-alert.error { background: rgba(255,107,107,0.09); border-color: rgba(255,107,107,0.3); color: #ff8f8f; }
.gos-alert.success { background: rgba(53,196,106,0.1); border-color: rgba(53,196,106,0.3); color: #4fd88a; }

/* ─── Loader inline p/ botão ─── */
.gos-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: gos-rot 0.7s linear infinite; display: none;
}
.gos-btn.loading .gos-spin { display: inline-block; }
.gos-btn.loading .gos-btn-label { opacity: 0.7; }
@keyframes gos-rot { to { transform: rotate(360deg); } }

/* ─── KPI cards (métrica: label + número grande + estado) ───
   Reutilizável em vendas, home, admin. Estado via classe: .ok .warn .danger. */
.gos-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gos-kpi {
  background: var(--nav); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.gos-kpi .label {
  font-size: 12px; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 6px;
}
.gos-kpi .valor { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); line-height: 1.1; }
.gos-kpi .sub { font-size: 12px; color: var(--text-3); }
/* estados: pinta o número e uma faixa à esquerda */
.gos-kpi.ok { border-left: 3px solid var(--success); }
.gos-kpi.ok .valor { color: var(--success); }
.gos-kpi.warn { border-left: 3px solid #F5B841; }
.gos-kpi.warn .valor { color: #F5B841; }
.gos-kpi.danger { border-left: 3px solid var(--danger); }
.gos-kpi.danger .valor { color: var(--danger); }
.gos-kpi.primary { border-left: 3px solid var(--primary); }
.gos-kpi.primary .valor { color: var(--primary); }

/* ─── Barra flutuante de ação em lote (seleção múltipla) ───
   Reutilizável em prospecção, contratos, admin. Some quando 0 selecionados. */
.gos-bulkbar {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px);
  z-index: 60; display: flex; align-items: center; gap: 14px;
  background: var(--nav); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px 10px 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
}
.gos-bulkbar.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.gos-bulkbar .cont { font-size: 13.5px; color: var(--text-1); font-weight: 500; white-space: nowrap; }
.gos-bulkbar .cont b { color: var(--primary); font-weight: 700; }
.gos-bulkbar .sep { width: 1px; height: 22px; background: var(--border); }
.gos-bulkbar button { font-family: inherit; }

/* ─── Checkbox custom (nunca o nativo do browser) ───
   Caixa arredondada que fica verde com tick preto quando marcada. */
.gos-check {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 18px; height: 18px; flex: none; cursor: pointer;
  border: 1.5px solid var(--text-4); border-radius: 5px; background: var(--surface);
  display: inline-grid; place-items: center;
  transition: background .12s ease, border-color .12s ease;
}
.gos-check:hover { border-color: var(--primary); }
.gos-check:checked { background: var(--primary); border-color: var(--primary); }
.gos-check:checked::after {
  content: ''; width: 5px; height: 9px; margin-top: -1px;
  border: solid #070707; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ─── Tabela avançada: cabeçalho fixo + 1ª coluna congelável ───
   Envolva <table> em <div class="gos-table-wrap"> (o scroll acontece aqui).
   O thead "gruda" no topo ao rolar; com .frozen, a 1ª coluna fica fixa ao
   rolar na horizontal. Reutilizável em prospecção, contratos, admin. */
.gos-table-wrap {
  overflow: auto; max-height: calc(100vh - 220px);
  border: 1px solid var(--border); border-radius: 10px; background: var(--nav);
}
.gos-table-wrap table { width: 100%; border-collapse: collapse; }
.gos-table-wrap thead th {
  position: sticky; top: 0; z-index: 2; background: var(--nav);
  box-shadow: inset 0 -1px 0 var(--border);
}
/* congela a 1ª coluna (ex.: nome) ao rolar horizontalmente */
.gos-table-wrap.frozen tbody td:first-child,
.gos-table-wrap.frozen thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--nav);
  box-shadow: inset -1px 0 0 var(--border);
}
.gos-table-wrap.frozen thead th:first-child { z-index: 3; }

/* ═══ Login (sem sidebar) ═══ */
body.gos-auth {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--background); color: var(--text-1);
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  font-size: 14px;
}
.gos-auth-box { width: 100%; max-width: 360px; }
.gos-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 30px; }
.gos-auth-brand .logo-tile { width: 40px; height: 40px; display: grid; place-items: center; }
.gos-auth-brand .logo-tile img { height: 38px; width: auto; filter: none; }
.gos-auth-brand h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.gos-auth-brand p { font-size: 14px; color: var(--text-3); margin-top: 2px; text-align: center; }
.gos-auth-box form { display: flex; flex-direction: column; gap: 16px; }
.gos-auth-box .gos-btn-primary { width: 100%; height: 42px; font-size: 15px; }
.gos-auth-foot { text-align: center; font-size: 12px; color: var(--text-4); margin-top: 34px; }

/* A barra de funil (fluxo-barra.js) já traz o próprio estilo Notion light —
   sem override aqui, pra não brigar com o componente. */

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — breakpoint ÚNICO do Painel: 768px.
   Regra da casa: NENHUMA página inventa outro número. Abaixo de 768px o
   shell vira topo (48px) + gaveta (sidebar deslizando por cima) + barra
   inferior (56px, 4 atalhos por perfil + Menu). O genesisos-shell.js monta
   os três; aqui só a pele. Tokens de altura são públicos para as páginas
   afastarem toasts/rodapés fixos da barra inferior:
     --gos-topbar-h, --gos-bottombar-h, --gos-safe-b (safe-area do iPhone)
   Utilitários: .gos-show-mobile (só no celular) · .gos-hide-mobile (some no celular)
   Tabela de AÇÃO no celular: <table class="gos-table gos-cards"> com
   td[data-label] — cada <tr> vira cartão, o thead some e o rótulo vem do
   data-label. Tabela de CONSULTA: envolva em .gos-table-wrap.frozen (scroll
   horizontal, 1ª coluna fixa) — já existe acima.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --gos-topbar-h: 48px;
  --gos-bottombar-h: 56px;
  --gos-safe-b: env(safe-area-inset-bottom, 0px);
  --gos-bottom-offset: 0px; /* vira barra+safe no celular; páginas somam isso a "bottom:" */
}
.gos-topbar, .gos-bottombar, .gos-drawer-veil, .gos-show-mobile { display: none; }

@media (max-width: 768px) {
  :root { --gos-bottom-offset: calc(var(--gos-bottombar-h) + var(--gos-safe-b)); }
  .gos-show-mobile { display: initial; }
  .gos-hide-mobile { display: none !important; }

  /* ── Shell vira coluna: topo em fluxo, conteúdo rola, barra fixa embaixo ── */
  body.app-page { height: 100vh; height: 100dvh; }
  .app-page .app { height: 100vh; height: 100dvh; flex-direction: column; }
  #gos-shell { flex: none; }
  .app-page .content {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--gos-bottom-offset);
  }

  /* ── Topo ── */
  .gos-topbar {
    display: flex; align-items: center; gap: 4px;
    height: var(--gos-topbar-h); padding: 0 6px;
    background: var(--nav); border-bottom: 1px solid var(--border);
  }
  .gos-topbar .gos-tap {
    width: 44px; height: 44px; border: 0; background: none; color: var(--text-2);
    border-radius: 8px; font-size: 22px; display: grid; place-items: center; cursor: pointer;
    font-family: inherit;
  }
  .gos-topbar .gos-tap:active { background: var(--active); }
  /* Voltar: fora do Início ocupa o lugar do ☰ (o Menu continua na barra de baixo) */
  #gosVoltarBtn { display: none; }
  body.gos-tem-voltar #gosVoltarBtn { display: grid; }
  body.gos-tem-voltar #gosDrawerBtn { display: none; }
  .gos-topbar .brand { margin: 0 auto; display: flex; align-items: center; gap: 8px; }
  .gos-topbar .brand span { font-size: 14px; font-weight: 600; white-space: nowrap; }
  .gos-topbar .brand span b { font-weight: 800; }
  .gos-topbar .avatar { width: 30px; height: 30px; font-size: 11px; }

  /* ── Sidebar vira gaveta (mesmo HTML). Só o #gosAside: outras <aside>
     das telas (gaveta do Baú, detalhe da Fila) NÃO são menu. ── */
  .app-page aside#gosAside, .app-page aside#gosAside.gos-collapsed {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 91;
    width: min(300px, 86vw); height: 100vh; height: 100dvh;
    transform: translateX(-102%); transition: transform 0.22s cubic-bezier(.16,1,.3,1);
    box-shadow: 12px 0 40px rgba(0,0,0,0.45);
  }
  .app-page aside#gosAside.gos-drawer-open { transform: none; }
  #gosAside .side-inner { width: 100%; min-width: 0; }
  .side-collapse { opacity: 1; width: 36px; height: 36px; font-size: 18px; }
  .side-item { height: 40px; }
  .side-item span { font-size: 15px; }
  .gos-open-rail, .app-page aside#gosAside.gos-collapsed ~ .gos-open-rail { display: none !important; }
  .gos-drawer-veil {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .gos-drawer-veil.on { opacity: 1; pointer-events: auto; }

  /* ── Barra inferior ── */
  .gos-bottombar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    height: calc(var(--gos-bottombar-h) + var(--gos-safe-b)); padding-bottom: var(--gos-safe-b);
    background: var(--nav); border-top: 1px solid var(--border);
  }
  .gos-bottombar a, .gos-bottombar button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; font-family: inherit; font-size: 10.5px; font-weight: 500;
    color: var(--text-3); background: none; border: 0; cursor: pointer; padding: 0 2px;
  }
  .gos-bottombar a span, .gos-bottombar button span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gos-bottombar i { font-size: 21px; line-height: 1; }
  .gos-bottombar .active { color: var(--primary); }
  .gos-bottombar a:active, .gos-bottombar button:active { background: var(--active); }

  /* ── Conteúdo ── */
  .app-page .page, .app-page .page.wide { max-width: none; padding: 18px 16px 32px; }
  .gos-hero { margin-bottom: 18px; }
  .gos-hero h1 { font-size: 20px; }
  .gos-hero p { font-size: 13.5px; }
  .gos-card { padding: 14px; }
  .gos-card + .gos-card { margin-top: 12px; }
  .gos-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gos-kpi { padding: 12px 12px; }
  .gos-kpi .valor { font-size: 24px; }
  .gos-kpi .label { font-size: 11px; }

  /* Toque: 44px; fonte 16px nos campos evita o zoom automático do iOS */
  .gos-input, .gos-select { font-size: 16px; height: 44px; }
  .gos-textarea { font-size: 16px; }
  .gos-btn { height: 44px; }
  .gos-btn-sm { height: 36px; }
  .gos-check { width: 22px; height: 22px; }
  .gos-check:checked::after { width: 6px; height: 11px; }

  /* Ação em lote sobe para cima da barra inferior */
  .gos-bulkbar {
    left: 12px; right: 12px; width: auto; transform: translate(0, 24px);
    bottom: calc(var(--gos-bottom-offset) + 10px);
    flex-wrap: wrap; gap: 8px; padding: 8px 10px;
  }
  .gos-bulkbar.show { transform: none; }
  .gos-bulkbar .sep { display: none; }

  /* Tabela de consulta: rola de lado, sem teto de altura (a página já rola) */
  .gos-table-wrap { max-height: none; }
  .gos-table th, .gos-table td { padding: 10px 10px; }

  /* Tabela de AÇÃO → cartões */
  table.gos-cards, table.gos-cards tbody, table.gos-cards tr, table.gos-cards td { display: block; width: 100%; }
  table.gos-cards thead { display: none; }
  table.gos-cards tr {
    background: var(--nav); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px;
  }
  table.gos-cards tbody tr:hover { background: var(--nav); }
  table.gos-cards td {
    border: 0; padding: 4px 0; display: flex; gap: 10px;
    justify-content: space-between; align-items: baseline; min-width: 0;
  }
  table.gos-cards td[data-label]::before {
    content: attr(data-label); flex: none;
    font-size: 11px; font-weight: 500; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  table.gos-cards td:empty { display: none; }
  table.gos-cards td.gos-card-title { display: block; font-size: 15px; font-weight: 600; padding-bottom: 6px; }
  table.gos-cards td.gos-card-title::before { display: none; }
  table.gos-cards td.gos-card-actions { justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; gap: 8px; }
  table.gos-cards td.gos-card-actions::before { display: none; }

  /* ── Rolagem de APP: no celular quem rola é a PÁGINA, não o .content ──
     O iPhone só dá rolagem de app (inércia certa, elástico, toque no relógio
     volta ao topo) ao documento; uma caixa com overflow rola "de site". O topo
     sai do fluxo (fixed) e o #gos-shell guarda o lugar dele, para o conteúdo
     não pular quando o shell monta. Seletor com body.app-page:not(...) de
     propósito: ganha das regras de altura que as telas repetem no próprio
     <style> (home, inpi, integracoes...).
     Tela que PRECISA de altura fixa (chat com campo preso embaixo, fila com
     rodapé fixo) põe class="app-page gos-tela-fixa" no body e rola por dentro.
     Prova: scripts/capturas-mobile.js mede quem rola em cada tela. */
  body.app-page:not(.gos-tela-fixa) { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  body.app-page:not(.gos-tela-fixa) .app { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  body.app-page:not(.gos-tela-fixa) .content { flex: none; height: auto; min-height: 0; overflow: visible; }
  body.app-page:not(.gos-tela-fixa) #gos-shell { height: var(--gos-topbar-h); }
  body.app-page:not(.gos-tela-fixa) .gos-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 85; }
  /* Gaveta aberta: a página atrás não rola junto */
  body.app-page.gos-drawer-aberta { overflow: hidden; }

  /* ── Toque de app ── */
  .gos-topbar, .gos-bottombar, #gosAside .side-item { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .side-item:active, .gos-btn:active, table.gos-cards tbody tr:active { background: var(--active); }
  .gos-btn:active, .gos-bottombar a:active i, .gos-bottombar button:active i { transform: scale(0.96); }
}

/* Toque, em qualquer largura com dedo: sem o realce cinza do Safari e sem a
   espera de duplo toque. O retorno visual é o :active de cada elemento. */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role="button"], .side-item, .gos-btn { touch-action: manipulation; }

/* ── Puxar para atualizar (só no app instalado; ver genesisos-shell.js) ──
   Nasce escondido atrás do topo e desce com o dedo. */
.gos-ptr {
  position: fixed; top: calc(var(--gos-topbar-h) - 40px); left: 50%; z-index: 84;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nav); border: 1px solid var(--border); color: var(--text-3); font-size: 17px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35); opacity: 0; transform: translate(-50%, 0);
  pointer-events: none; transition: opacity 0.12s ease, color 0.12s ease;
}
.gos-ptr.on { opacity: 1; }
.gos-ptr.pronto { color: var(--primary); }
.gos-ptr.girando i { animation: gos-ptr-gira 0.7s linear infinite; }
@keyframes gos-ptr-gira { to { transform: rotate(360deg); } }

/* ── MODO APP (app instalado; ver genesisos-shell.js) ──
   Anfitriã: o palco fica entre o topo e a barra de baixo e guarda as telas
   (iframes). Só a ativa aparece; as outras seguem vivas, escondidas com
   visibility (display:none faria o iframe perder a rolagem).
   Embutida: a tela dentro do iframe não desenha topo, menu nem barra, e os
   tokens de altura zeram — o que é fixo nela se mede pelo próprio iframe. */
.gos-telas {
  position: fixed; left: 0; right: 0; z-index: 60;
  top: var(--gos-topbar-h); bottom: var(--gos-bottom-offset);
  background: var(--background); visibility: hidden;
}
/* Escondido por visibility, não display: as telas pré-carregadas (Novo
   Pedido, Propostas) nascem já com o tamanho da tela de verdade. */
.gos-telas.on { visibility: visible; }
.gos-tela {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  visibility: hidden; background: var(--background);
}
.gos-tela.ativa { visibility: visible; }
body.app-page.gos-anfitria.gos-tela-outra { overflow: hidden; }
html.gos-embutida { --gos-topbar-h: 0px; --gos-bottom-offset: 0px; }
html.gos-embutida .gos-topbar, html.gos-embutida .gos-bottombar, html.gos-embutida #gosAside,
html.gos-embutida .gos-drawer-veil, html.gos-embutida .gos-open-rail, html.gos-embutida .gos-carregando { display: none !important; }
html.gos-embutida body.app-page #gos-shell { height: 0; }
html.gos-embutida, html.gos-embutida body { overscroll-behavior-y: contain; }

/* ── Resposta ao toque na troca de tela ──
   Trocar de tela é carregar outra página: entre o toque e a tela nova não
   havia sinal nenhum, e parecia que o toque não pegou. A barra aparece NO
   TOQUE (genesisos-shell.js põe body.gos-navegando no clique do link).
   NÃO usar @view-transition aqui: ele segura a tela velha congelada até a
   nova ficar pronta e anima por cima — saiu em 02/10 porque piorou a demora. */
.gos-carregando {
  position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 0;
  background: var(--primary); box-shadow: 0 0 8px var(--primary);
  opacity: 0; pointer-events: none;
}
body.gos-navegando .gos-carregando { opacity: 1; animation: gos-carrega 2.5s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes gos-carrega { 0% { width: 0; } 20% { width: 45%; } 100% { width: 92%; } }

/* Tablet (769–1024px): a sidebar cabe, mas rouba espaço. O shell a recolhe
   por padrão na primeira visita (localStorage manda depois). Só JS. */