/* styles.css — Guru Atende (SPA F2) · Identidade Visual "Conceito 2"
 * ---------------------------------------------------------------------------
 * Direção: limpo, moderno, operacional, comercial.
 * Marca: Azul Marinho (confiança) + Verde Esmeralda/Menta (energia, ação).
 * Fontes: em PRODUÇÃO carregar Sora (títulos) + Inter (corpo) via @font-face
 * local. Aqui, offline-safe, caímos no system stack — sem CDN, sem @font-face
 * externo. Ícones: Lucide inline (ver icons.js) — licença ISC.
 * ------------------------------------------------------------------------- */

/* =========================================================================
   1. DESIGN TOKENS — toda cor/espaço/raio/sombra vive aqui e é usada por var()
   ========================================================================= */
:root {
  /* --- Paleta de marca (Conceito 2) --- */
  --azul-marinho: #0B1D3A;
  --verde-esmeralda: #10B981;
  --verde-menta: #00F0B5;
  --cinza-ardosia: #64748B;
  --cinza-claro: #F1F5F9;
  --branco: #FFFFFF;

  /* --- Derivados operacionais --- */
  --marinho-900: #081428;
  --marinho-800: #12294d;
  --marinho-700: #1b3a63;
  --esmeralda-700: #047857;
  --esmeralda-600: #059669;
  --esmeralda-050: #ecfdf5;
  --menta-050: #f0fdf9;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --texto: #0f172a;
  --texto-suave: #475569;
  --texto-mute: var(--cinza-ardosia);

  /* --- Semânticas de estado --- */
  --info: #3B82F6;
  --info-bg: #eff6ff;
  --aviso: #a16207;
  --aviso-bg: #fef9c3;
  --erro: #dc2626;
  --erro-bg: #fef2f2;
  --erro-borda: #fecaca;
  --ok: var(--verde-esmeralda);

  /* --- Tipografia --- */
  --font-titulo: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Escala de espaçamento (4 / 8 / 12 / 16 / 24 / 32) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* --- Raios (sm / md / lg / pill) --- */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-pill: 999px;
  --raio: var(--raio-md); /* alias legado */

  /* --- Sombras suaves --- */
  --sombra-sm: 0 1px 2px rgba(11, 29, 58, .06);
  --sombra: 0 1px 2px rgba(11, 29, 58, .06), 0 4px 12px rgba(11, 29, 58, .05);
  --sombra-md: 0 6px 18px rgba(11, 29, 58, .10);
  --sombra-lg: 0 20px 60px rgba(8, 20, 40, .35);

  /* --- Foco acessível (contorno visível) --- */
  --foco: 0 0 0 3px rgba(0, 240, 181, .45);
}

/* =========================================================================
   2. BASE
   ========================================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-corpo);
  color: var(--texto);
  background: var(--cinza-claro);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--azul-marinho);
}

a { color: var(--esmeralda-600); text-decoration: none; }
button { font-family: inherit; }

/* Acessibilidade: foco sempre visível ao navegar por teclado. */
:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--raio-sm);
}

/* Ícones Lucide — alinham com o texto e herdam a cor do contexto. */
.ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.brandmark { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* =========================================================================
   3. MARCA / LOGO
   ========================================================================= */
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); }
.logo { font-family: var(--font-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.logo .g { color: var(--azul-marinho); }
.logo .a { color: var(--verde-esmeralda); }
.logo--claro .g { color: var(--branco); }
.logo--claro .a { color: var(--verde-menta); }

/* =========================================================================
   4. SHELL (header + sidebar + main)
   ========================================================================= */
.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header" "nav main";
  min-height: 100vh;
}

.appheader {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}
.appheader .spacer { flex: 1; }
.tenant-info { text-align: right; line-height: 1.2; }
.tenant-info .nome { font-weight: 600; font-size: .9rem; color: var(--azul-marinho); }
.tenant-info .plano { font-size: .72rem; color: var(--texto-mute); text-transform: uppercase; letter-spacing: .04em; }

/* --- Sidebar (marinho, negativa) --- */
.appnav {
  grid-area: nav;
  background: var(--azul-marinho);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.nav-links { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.appnav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: #c7d2e0;
  padding: 10px 14px;
  border-radius: var(--raio-sm);
  font-size: .92rem;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.appnav a .ico { opacity: .85; }
.appnav a:hover { background: var(--marinho-700); color: var(--branco); }
.appnav a:hover .ico { opacity: 1; }
.appnav a.ativo { background: var(--verde-esmeralda); color: var(--branco); font-weight: 600; }
.appnav a.ativo .ico { opacity: 1; }
.appnav a:focus-visible { box-shadow: 0 0 0 3px rgba(0, 240, 181, .55); }

/* Slogan no rodapé da sidebar (assinatura de marca) */
.nav-foot {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #7f93ad;
  font-size: .72rem;
  line-height: 1.5;
}

.appmain { grid-area: main; padding: var(--sp-6); overflow-x: auto; }

/* Rodapé/slogan que mora no fim das views */
.slogan {
  color: var(--texto-mute);
  font-size: .78rem;
  text-align: center;
  margin-top: var(--sp-8);
}

/* =========================================================================
   5. BOTÕES E CHIPS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  padding: 9px 16px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--cinza-claro);
  color: var(--texto);
  transition: filter .12s, background .12s, box-shadow .12s, transform .05s;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--verde-esmeralda); color: var(--branco); box-shadow: 0 1px 2px rgba(16, 185, 129, .3); }
.btn--primary:hover { background: var(--esmeralda-600); filter: none; }
.btn--marinho { background: var(--azul-marinho); color: var(--branco); }
.btn--marinho:hover { background: var(--marinho-700); filter: none; }
.btn--ghost { background: transparent; border-color: var(--borda-forte); color: var(--texto-suave); }
.btn--ghost:hover { background: var(--cinza-claro); filter: none; }
.btn--ia { background: var(--verde-menta); color: var(--azul-marinho); }
.btn--ia:hover { filter: brightness(.95); }
.btn--sm { padding: 6px 11px; font-size: .8rem; gap: 5px; }
.btn .ico { margin: -1px 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  font-size: .72rem;
  font-weight: 600;
  background: var(--cinza-claro);
  color: var(--texto-suave);
  white-space: nowrap;
  line-height: 1.4;
}
.chip .ico { margin: -1px 0; }

/* Status de ticket */
.chip--open { background: #dcfce7; color: #15803d; }
.chip--pending { background: var(--aviso-bg); color: var(--aviso); }
.chip--closed { background: #e2e8f0; color: #475569; }

/* IA e custo metered */
.chip--ia { background: var(--verde-menta); color: var(--azul-marinho); }
.chip--custo { background: var(--marinho-800); color: var(--verde-menta); font-variant-numeric: tabular-nums; }

/* Etapas de funil / pousada — cores coerentes por estágio */
.chip--stage { background: #e2e8f0; color: #334155; }
.chip--lead { background: var(--info-bg); color: #1d4ed8; }
.chip--atend { background: #cffafe; color: #0e7490; }
.chip--proposta { background: #fef3c7; color: #b45309; }
.chip--ganho { background: #dcfce7; color: #15803d; }
.chip--perdido { background: #fee2e2; color: #b91c1c; }
.chip--aguardando { background: #ede9fe; color: #6d28d9; }

/* =========================================================================
   6. CARDS / PÁGINAS
   ========================================================================= */
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
}
.pagehead { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.pagehead h1 { margin: 0; font-size: 1.5rem; display: inline-flex; align-items: center; gap: var(--sp-2); }
.pagehead h1 .ico { color: var(--verde-esmeralda); }
.pagehead .spacer { flex: 1; }

/* =========================================================================
   7. ESTADOS (loading / erro / vazio / skeleton)
   ========================================================================= */
.state { padding: var(--sp-8); text-align: center; color: var(--texto-suave); }
.state .state-ico {
  width: 44px; height: 44px; border-radius: var(--raio-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cinza-claro); color: var(--cinza-ardosia);
  margin-bottom: var(--sp-3);
}
.state--error { color: var(--erro); }
.state--error .state-ico { background: var(--erro-bg); color: var(--erro); }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--borda); border-top-color: var(--verde-esmeralda);
  animation: girar .8s linear infinite; margin: 0 auto var(--sp-3);
}
@keyframes girar { to { transform: rotate(360deg); } }

.banner-erro {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--erro-bg); color: var(--erro);
  border: 1px solid var(--erro-borda); border-radius: var(--raio-sm);
  padding: 10px 14px; font-size: .88rem; margin-bottom: var(--sp-3);
}

/* Skeleton shimmer (loading discreto da lista) */
.skeleton { position: relative; overflow: hidden; background: var(--cinza-claro); border-radius: var(--raio-sm); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-row { display: flex; align-items: center; gap: var(--sp-3); padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.sk-row:last-child { border-bottom: none; }
.sk-av { width: 40px; height: 40px; border-radius: 50%; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.sk-line { height: 10px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }

/* =========================================================================
   8. LOGIN
   ========================================================================= */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6);
  background: radial-gradient(1200px 600px at 50% -10%, var(--marinho-700), var(--azul-marinho) 60%, var(--marinho-900));
}
.login-card {
  width: 100%; max-width: 390px; background: var(--branco);
  border-radius: var(--raio-lg); padding: var(--sp-8); box-shadow: var(--sombra-lg);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.login-card .logo { font-size: 1.7rem; }
.login-card .sub { text-align: center; color: var(--texto-mute); font-size: .84rem; margin: 6px 0 var(--sp-6); }
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; color: var(--texto-suave); }
.field input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm); font-size: .92rem; font-family: inherit; color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus { outline: none; border-color: var(--verde-esmeralda); box-shadow: var(--foco); }
.login-card .btn { width: 100%; margin-top: var(--sp-2); }
.login-footer { text-align: center; color: var(--texto-mute); font-size: .74rem; margin-top: var(--sp-6); line-height: 1.5; }

/* =========================================================================
   9. LISTA DE CONVERSAS
   ========================================================================= */
.conv-list { display: flex; flex-direction: column; }
.conv-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px 16px; border-bottom: 1px solid var(--borda);
  cursor: pointer; transition: background .1s;
}
.conv-item:last-child { border-bottom: none; }
.conv-item:hover { background: var(--cinza-claro); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; color: var(--branco);
  background: linear-gradient(135deg, var(--marinho-700), var(--azul-marinho));
  font-family: var(--font-titulo); font-size: .9rem;
}
.conv-body { flex: 1; min-width: 0; }
.conv-body .nome { font-weight: 600; font-size: .92rem; color: var(--azul-marinho); }
.conv-body .prev { color: var(--texto-suave); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.conv-meta .hora { font-size: .72rem; color: var(--texto-mute); }

/* =========================================================================
   10. TELA DE CONVERSA
   ========================================================================= */
.conv-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-4); align-items: start; }
.chat { display: flex; flex-direction: column; height: calc(100vh - 180px); min-height: 420px; overflow: hidden; }
.chat-head { padding: 14px 16px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: var(--sp-3); }
.chat-head .nome { font-weight: 600; color: var(--azul-marinho); }
.chat-head .fone { font-size: .78rem; color: var(--texto-mute); display: inline-flex; align-items: center; gap: 4px; }
.chat-scroll {
  flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(var(--branco), var(--branco)) padding-box;
}
.bubble { max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; word-wrap: break-word; box-shadow: var(--sombra-sm); }
.bubble .ts { display: block; font-size: .66rem; opacity: .7; margin-top: 3px; text-align: right; }
.bubble--in { align-self: flex-start; background: var(--cinza-claro); color: var(--texto); border-bottom-left-radius: 4px; }
.bubble--out { align-self: flex-end; background: var(--verde-esmeralda); color: var(--branco); border-bottom-right-radius: 4px; }
.bubble--out.bubble--failed { background: var(--erro-bg); color: var(--erro); border: 1px solid var(--erro-borda); }
.bubble-status { display: flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; margin-top: 4px; }

/* Barra de respostas rápidas */
.qr-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 12px; border-top: 1px solid var(--borda); background: #fafcff; }
.qr-hint { font-size: .76rem; color: var(--texto-mute); display: inline-flex; align-items: center; gap: 5px; }
.qr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-pill);
  padding: 4px 11px; font-size: .78rem; cursor: pointer; color: var(--texto-suave); transition: border-color .12s, color .12s;
}
.qr-chip:hover { border-color: var(--verde-esmeralda); color: var(--esmeralda-600); }
.qr-chip .sc { font-weight: 700; color: var(--verde-esmeralda); }

/* IA — ações e sugestão */
.ia-bar { display: flex; gap: var(--sp-2); align-items: center; padding: 8px 12px; border-top: 1px solid var(--borda); flex-wrap: wrap; background: var(--menta-050); }
.ia-sugestao {
  margin: 8px 12px; padding: 12px 14px; border: 1px solid #a7f3d0;
  border-left: 3px solid var(--verde-esmeralda);
  border-radius: var(--raio-sm); background: var(--menta-050); font-size: .88rem;
}
.ia-sugestao .topo { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 8px; flex-wrap: wrap; }
.ia-sugestao .txt { color: var(--texto); white-space: pre-wrap; line-height: 1.5; }
.ia-sugestao .acoes { margin-top: 10px; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* Composer */
.composer { display: flex; gap: var(--sp-2); padding: 12px; border-top: 1px solid var(--borda); align-items: flex-end; background: var(--branco); }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  padding: 10px 12px; font-family: inherit; font-size: .9rem; min-height: 42px; max-height: 140px; color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
.composer textarea:focus { outline: none; border-color: var(--verde-esmeralda); box-shadow: var(--foco); }

/* Painel lateral (contato + notas) */
.side { display: flex; flex-direction: column; gap: var(--sp-4); }
.side-block { padding: 16px; }
.side-block h3 { margin: 0 0 12px; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }
.side-block h3 .ico { color: var(--cinza-ardosia); }
.kv { font-size: .84rem; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kv .k { color: var(--texto-mute); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--marinho-800); color: var(--verde-menta); border-radius: var(--raio-pill);
  padding: 2px 9px; font-size: .7rem; font-weight: 600;
}
.muted { font-size: .78rem; color: var(--texto-mute); }
.notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.note { background: var(--aviso-bg); border: 1px solid #fde68a; border-radius: var(--raio-sm); padding: 9px 11px; }
.note .body { font-size: .84rem; }
.note .meta { font-size: .7rem; color: var(--texto-mute); margin-top: 4px; }
.note-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.note-form textarea {
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  padding: 8px 10px; font-family: inherit; font-size: .84rem; resize: vertical; min-height: 54px; color: var(--texto);
}
.note-form textarea:focus { outline: none; border-color: var(--verde-esmeralda); box-shadow: var(--foco); }

/* =========================================================================
   11. CONTATOS
   ========================================================================= */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.contact-card { padding: 18px 16px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; text-align: center; }
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); border-color: var(--borda-forte); }
.contact-card .avatar { margin: 0 auto; width: 48px; height: 48px; font-size: 1rem; }
.contact-card .nome { font-weight: 600; margin-top: 10px; color: var(--azul-marinho); }
.contact-card .fone { color: var(--texto-mute); font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; }
.contact-card .tags { justify-content: center; }

/* =========================================================================
   12. KANBAN
   ========================================================================= */
.kanban { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kcol {
  flex: 0 0 268px; background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-md); display: flex; flex-direction: column; max-height: calc(100vh - 200px);
  overflow: hidden; box-shadow: var(--sombra-sm);
}
.kcol-head {
  padding: 12px 14px; border-bottom: 1px solid var(--borda);
  border-top: 3px solid var(--stage, var(--cinza-ardosia));
  font-family: var(--font-titulo); font-weight: 700; font-size: .9rem; color: var(--azul-marinho);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.kcol-head .count { background: var(--cinza-claro); color: var(--texto-suave); border-radius: var(--raio-pill); padding: 1px 8px; font-size: .72rem; font-weight: 600; }
.kcol-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.kcol-empty { font-size: .78rem; color: var(--texto-mute); padding: 12px 6px; text-align: center; }
.kcard { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 11px 12px; box-shadow: var(--sombra-sm); transition: box-shadow .12s, border-color .12s; }
.kcard:hover { box-shadow: var(--sombra); border-color: var(--borda-forte); }
.kcard .kcard-top { display: flex; align-items: center; gap: 8px; }
.kcard .avatar { width: 30px; height: 30px; font-size: .72rem; }
.kcard .nome { font-weight: 600; font-size: .86rem; color: var(--azul-marinho); }
.kcard .lm { font-size: .78rem; color: var(--texto-suave); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard .move { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.kcard .move .hora { font-size: .7rem; color: var(--texto-mute); }
.kcard .move button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); background: var(--branco);
  border-radius: 6px; width: 30px; height: 26px; cursor: pointer; color: var(--texto-suave);
  transition: background .1s, color .1s, border-color .1s;
}
.kcard .move button:hover:not(:disabled) { background: var(--esmeralda-050); color: var(--esmeralda-600); border-color: var(--verde-esmeralda); }
.kcard .move button:disabled { opacity: .35; cursor: not-allowed; }

/* =========================================================================
   13. TABELA (auditoria)
   ========================================================================= */
.table-wrap { overflow-x: auto; }
table.audit { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.audit th, table.audit td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.audit th {
  font-family: var(--font-titulo); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-mute); background: var(--cinza-claro); position: sticky; top: 0;
}
table.audit tbody tr:hover { background: #fafcff; }
table.audit code {
  font-size: .78rem; color: var(--texto-suave); background: var(--cinza-claro);
  padding: 2px 6px; border-radius: 6px;
}
.act-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--raio-sm);
  background: var(--esmeralda-050); color: var(--esmeralda-600); flex: 0 0 auto;
}
.act-cell { display: inline-flex; align-items: center; gap: 8px; }

/* =========================================================================
   14. CANAL (WhatsApp)
   ========================================================================= */
.canal-card { max-width: 520px; }

/* Badge honesto por estado do canal */
.chip--canal-on { background: #dcfce7; color: #15803d; }
.chip--canal-qr { background: var(--aviso-bg); color: var(--aviso); }
.chip--canal-conn { background: #e2e8f0; color: #475569; }
.chip--canal-off { background: var(--erro-bg); color: #b91c1c; }

/* Aviso âmbar (ex.: canal de demonstração) — irmão do .banner-erro */
.banner-aviso {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--aviso-bg); color: var(--aviso);
  border: 1px solid #fde68a; border-radius: var(--raio-sm);
  padding: 10px 14px; font-size: .88rem; margin-bottom: var(--sp-3);
}

/* QR de pareamento — ~260px, centrado, com passos curtos embaixo */
.qr-pane { text-align: center; margin: var(--sp-4) 0; }
.qr-img {
  width: 260px; max-width: 100%; height: auto;
  border: 1px solid var(--borda); border-radius: var(--raio-md);
  background: var(--branco); padding: var(--sp-2); box-shadow: var(--sombra-sm);
}
.qr-passos { font-size: .82rem; color: var(--texto-suave); margin: var(--sp-2) 0 0; }
.canal-acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

/* =========================================================================
   15. RESPONSIVO (desktop-first; degrada em telas estreitas)
   ========================================================================= */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; grid-template-areas: "header" "nav" "main"; }
  .appnav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 6px; }
  .nav-links { flex-direction: row; }
  .appnav a { white-space: nowrap; }
  .nav-foot { display: none; }
  .conv-grid { grid-template-columns: 1fr; }
  .chat { height: auto; }
  .tenant-info .nome { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 560px) {
  .appmain { padding: var(--sp-4); }
  .appheader { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .tenant-info { display: none; }
  .pagehead h1 { font-size: 1.25rem; }
}