/* Hubfy · Configurações → Integrações: aviso, abas, plataformas, perfis e contas da Meta, webhooks, UTMs, pixels e testes.
   Cinza em tudo; cor só no estado (ponto, etiqueta) e no que deu certo ou errado. */

/* ---------- peças comuns (também usadas na aba Instalação da oferta) ---------- */
.ig-rot { font-size: 12.5px; font-weight: 590; color: var(--text-2); }
.ig-url { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ig-url code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; background: var(--fill-1); border: 1px solid var(--line); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-eventos { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-eventos code, .ig-cod { padding: 3px 8px; border-radius: 7px; background: var(--fill-2); color: var(--text-2); font-size: 12px; }
.tela-integ code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.tela-integ .campo span small, .drawer .campo span small { font-weight: 500; color: var(--text-3); }

/* ---------- casca ---------- */
.tela-integ { max-width: 1080px; gap: 14px; }
.ig-aviso {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px;
  padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-borda); box-shadow: var(--sombra-card);
}
.ig-aviso-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange-ink); grid-row: span 2; align-self: start; }
.ig-aviso-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ig-aviso-txt b { font: 650 14.5px/1.3 var(--fonte-display); letter-spacing: -.01em; }
.ig-aviso-txt span { font-size: 13px; color: var(--text-2); }
.ig-aviso-itens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ig-pend {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--fill-1); color: var(--text); font-size: 12.5px; font-weight: 590; transition: background .15s, border-color .15s;
}
.ig-pend:hover { background: var(--fill-2); border-color: var(--line-2); }
.ig-pend .i { color: var(--text-3); }

.ig-barra { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ig-abas { flex: 0 1 auto; }
.ig-abas button { position: relative; }
.ig-pino { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-left: 1px; }
.ig-api { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--text-3); }
.ig-api:hover { background: var(--fill-1); color: var(--text-2); }
.ig-api .mst { color: var(--text-2); }
.ig-corpo { display: grid; gap: 14px; min-width: 0; }

/* ---------- cartões e listas ---------- */
.ig-card .cartao-cab { align-items: flex-start; flex-wrap: nowrap; }
.ig-card .cartao-cab > div { min-width: 0; }
.ig-card .cartao-cab > .btn { flex: none; }
.ig-lista { margin: 0; padding: 0; list-style: none; display: grid; }
.ig-lista > li + li { border-top: 1px solid var(--line); }
.ig-vazio-linha { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--fill-1); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ig-vazio-linha > .i { color: var(--text-3); flex: none; }
.ig-vazio-linha .link-btn { margin-left: auto; }
.ig-dica { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.ig-dica .i { flex: none; }
.ig-nota { padding: 0 4px; }
.ig-mono {
  width: 100%; height: 100%; display: grid; place-items: center; font: 700 12px/1 var(--fonte-display); letter-spacing: -.02em; color: var(--text-2);
}
.ig-logo { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--fill-2); color: var(--ib-on); }

/* Item de lista com ícone, texto e lado direito (webhooks, credenciais, pixels). */
.ig-item, .ig-px { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 2px; }
.ig-item-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--fill-2); color: var(--ib-on); align-self: start; }
.ig-item-txt { display: grid; gap: 6px; min-width: 0; }
.ig-item-txt > small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-item-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.ig-item-tit b { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.ig-item-lado { display: grid; justify-items: end; gap: 8px; }
.ig-item-lado .tom, .ig-item-tit .tom { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ig-item-acoes { display: inline-flex; align-items: center; gap: 4px; }
.ig-item-acoes .chave { margin-right: 6px; }

/* ---------- aba Anúncios: plataformas ---------- */
.ig-plats { display: grid; gap: 10px; }
.ig-plat { padding: 0; overflow: hidden; }
.ig-plat-cab {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; background: none; text-align: left; color: var(--text);
  transition: background .15s;
}
.ig-plat-cab:hover { background: var(--fill-1); }
.ig-plat-tit { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ig-plat-tit b { font: 650 15px/1.25 var(--fonte-display); letter-spacing: -.015em; }
.ig-plat-tit small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-plat-seta { color: var(--text-3); transition: transform .25s var(--ease); }
[aria-expanded="true"] > .ig-plat-seta { transform: rotate(180deg); }
.ig-plat-breve .ig-logo { color: var(--ib-off); }
.ig-plat-breve .ig-plat-tit b { color: var(--text-2); }
.ig-plat-corpo { display: grid; gap: 20px; padding: 4px 16px 18px; border-top: 1px solid var(--line); padding-top: 16px; animation: ig-abre .28s var(--ease); }
@keyframes ig-abre { from { opacity: 0; transform: translateY(-4px); } }
.ig-breve-txt p { margin: 0; max-width: 64ch; font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* Sub-cartão recolhível (App da Meta). */
.ig-sub { border: 1px solid var(--line); border-radius: 16px; background: var(--fill-1); overflow: hidden; scroll-margin-top: 80px; }
.ig-sub-cab { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 0; background: none; text-align: left; color: var(--text); }
.ig-sub-cab:hover { background: var(--fill-1); }
.ig-sub-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--fill-2); color: var(--ib-on); }
.ig-sub-tit { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ig-sub-tit b { font-size: 13.5px; font-weight: 650; }
.ig-sub-tit small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-sub-corpo { display: grid; gap: 14px; padding: 4px 14px 14px; }
.ig-app-form { gap: 12px; }
.ig-app-form .form-acoes { align-items: center; }

/* Passo a passo que abre e fecha. */
.ig-como-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: var(--text-2); font-size: 13px; font-weight: 590; }
.ig-como-btn:hover { color: var(--text); }
.ig-como-seta { transition: transform .2s var(--ease); }
.ig-como.aberto .ig-como-seta { transform: rotate(90deg); }
.ig-passos { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 10px; }
.ig-passos li { position: relative; padding-left: 30px; font-size: 13px; line-height: 1.55; color: var(--text-2); counter-increment: passo; }
.ig-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--fill-2); color: var(--text-2); font: 650 11px/1 var(--fonte); font-variant-numeric: tabular-nums;
}
.ig-passos b { color: var(--text); font-weight: 600; }
.ig-passos a { color: var(--blue-ink); text-decoration: none; }
.ig-passos a:hover { text-decoration: underline; }
.ig-passos code { padding: 1px 5px; border-radius: 5px; background: var(--fill-2); font-size: 12px; }
.ig-url-passo { margin-top: 8px; }

/* Campo de segredo com o olho. */
.ig-segredo { position: relative; display: block; }
.ig-segredo .input { padding-right: 42px; }
.ig-segredo .icone-btn { position: absolute; right: 3px; top: 3px; width: 32px; height: 32px; }

/* Bloco com título (Perfis, Contas). */
.ig-bloco { display: grid; gap: 12px; scroll-margin-top: 80px; }
.ig-bloco-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ig-bloco-cab h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 650 14.5px/1.3 var(--fonte-display); letter-spacing: -.01em; }
.ig-bloco-cab p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }

/* Perfis. */
.ig-pf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 2px; }
.ig-pf-txt { display: grid; gap: 1px; min-width: 0; }
.ig-pf-txt b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-pf-txt small { font-size: 12px; color: var(--text-3); }
.ig-pf-val { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.ig-pf-acoes { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.pf-av {
  position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--fill-3); color: var(--text); font: 650 13px/1 var(--fonte-display);
}
.pf-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-mini-grupo { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: -4px; }
.pf-av.pf-mini { width: 18px; height: 18px; font-size: 8px; letter-spacing: -.02em; background: var(--fill-2); color: var(--text-2); }

/* Contas de anúncio por BM. */
.ig-ct-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-ct-barra .campo-busca { width: 260px; }
.ig-bm { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ig-bm-cab { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 13px; background: var(--fill-1); border-bottom: 1px solid var(--line); }
.ig-bm-cab b { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ig-bm-cab small { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ig-bm-cab .link-btn { flex: none; }
.ig-bm-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--fill-2); color: var(--text-2); }
.ig-contas { margin: 0; padding: 0; list-style: none; }
.ig-ct { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 13px; transition: background .15s; }
.ig-ct + .ig-ct { border-top: 1px solid var(--line); }
.ig-ct:hover { background: var(--fill-1); }
.ig-ct-nome { display: grid; gap: 2px; min-width: 0; }
.ig-ct-nome b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-ct:not(.on) .ig-ct-nome b { color: var(--text-2); font-weight: 500; }
.ig-ct-nome small { display: block; min-width: 0; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-ct-nome code { font-size: 11.5px; }
.ig-ct-st { display: grid; gap: 2px; min-width: 0; }
.ig-ct-st small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-ct-erro { color: var(--red-ink); }
.ig-ct-orfa { margin-left: 8px; color: var(--orange-ink); }
.ig-ct-rot { font-size: 12px; color: var(--text-3); }
.ig-ct-chave .ig-ct-rot { display: none; }

/* ---------- aba Webhooks: painel lateral ---------- */
.ig-busca-plat { width: 100%; margin-bottom: 12px; }
.ig-plat-lista { display: grid; gap: 2px; }
.ig-plat-op {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; font-size: 14px;
}
.ig-plat-op .ig-mono { width: 32px; height: 32px; border-radius: 9px; background: var(--fill-2); flex: none; }
.ig-plat-op b { font-weight: 600; }
button.ig-plat-op:hover { background: var(--fill-2); }
.ig-plat-op.breve { color: var(--text-3); }
.ig-plat-op.breve b { font-weight: 500; }
.ig-plat-op.breve .ig-mono { color: var(--text-4); }
.ig-voltar { margin: -4px 0 12px; color: var(--text-2); }
.ig-painel-form { gap: 16px; margin-top: 14px; }
.ig-painel-form .form-acoes { padding-top: 4px; }
.pn-corpo > .ig-como { margin-bottom: 4px; }
.pn-corpo > .nota-rodape { margin-top: 14px; }

/* ---------- aba UTMs ---------- */
.ig-grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ig-col { display: grid; gap: 14px; min-width: 0; }
.ig-cods { margin: 0; padding: 0; list-style: none; }
.ig-cod-l { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ig-cod-l + .ig-cod-l { border-top: 1px solid var(--line); }
.ig-cod-l .ig-logo { width: 32px; height: 32px; border-radius: 9px; }
.ig-cod-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ig-cod-txt b { font-size: 13.5px; font-weight: 600; }
.ig-cod-txt small { font-size: 12px; color: var(--text-3); }
.ig-cod-l.breve .ig-logo { color: var(--ib-off); }
.ig-cod-l.breve .ig-cod-txt b { color: var(--text-2); font-weight: 500; }
.ig-pars { display: grid; gap: 8px; }
.ig-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ig-par-mais { justify-self: start; }
.ig-gerada { display: grid; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ig-gerada .ig-url { flex-wrap: wrap; }
.ig-gerada .ig-url code { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }

/* ---------- aba Pixel ---------- */
.ig-px { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.ig-px-ids { display: flex; flex-wrap: wrap; gap: 5px; }
.ig-px-id { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ig-px-regras { font-size: 12px; color: var(--text-3); white-space: normal !important; }
.ig-px-lado { display: grid; justify-items: end; gap: 10px; }
.ig-px-nums { display: flex; gap: 16px; }
.ig-px-n { display: grid; justify-items: end; gap: 0; }
.ig-px-n small { font-size: 11px; color: var(--text-3); }
.ig-px-n b { font: 650 17px/1.15 var(--fonte-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ig-px:not(.on) .ig-px-n b { color: var(--text-2); }

/* Painel do pixel. */
.ig-form-tit { margin: 6px 0 -6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--text); }
.ig-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-tipo {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--fill-1); color: var(--text-3); font-size: 12.5px; font-weight: 590;
}
.ig-tipo small { font-size: 10.5px; font-weight: 500; color: var(--text-4); }
.ig-tipo.on { background: var(--seg-on); color: var(--text); border-color: var(--line-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.ig-px-escs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ig-px-esc { height: 28px; padding: 0 3px 0 10px; gap: 7px; background: var(--fill-2); color: var(--text); }
.ig-px-esc code { font-size: 11px; color: var(--text-3); }
.ig-chip-x { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text-3); }
.ig-chip-x:hover { background: var(--fill-3); color: var(--text); }
.ig-px-sel { display: grid; gap: 8px; margin-top: 4px; padding: 10px; border-radius: 14px; background: var(--fill-1); border: 1px solid var(--line); }
.ig-px-sel .campo-busca { width: 100%; }
.ig-px-ops { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; }
.ig-px-op { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 8px 9px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; }
.ig-px-op:hover { background: var(--fill-2); }
.ig-px-op b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-px-op small { grid-column: 1; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-px-op .i { grid-row: 1 / span 2; grid-column: 2; color: var(--text-3); }
.ig-px-manual { display: flex; gap: 8px; }
.ig-opcoes { display: grid; gap: 6px; }
.ig-op {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left;
  border: 1px solid var(--line); background: var(--fill-1); color: var(--text); transition: border-color .15s, background .15s;
}
.ig-op:hover { border-color: var(--line-2); }
.ig-op b { display: block; font-size: 13px; font-weight: 590; }
.ig-op small { display: block; margin-top: 1px; font-size: 12px; color: var(--text-3); }
.ig-op-bola { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--text-4); transition: border .15s; }
.ig-op.on { border-color: var(--line-2); background: var(--fill-2); }
.ig-op.on .ig-op-bola { border: 5px solid var(--text); }
.ig-ofs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ig-of { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--fill-1); color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.ig-of input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ig-of.on { background: var(--text); color: var(--bg); border-color: transparent; }
.ig-of:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.ig-breves { display: grid; gap: 0; padding: 4px 12px 10px; border-radius: 14px; background: var(--fill-1); }
.ig-breve-l { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ig-breve-l b { font-size: 13px; font-weight: 500; color: var(--text-2); }
.ig-breves > small { padding-top: 9px; font-size: 12px; color: var(--text-3); }

/* ---------- aba WhatsApp ---------- */
.ig-wa-corpo { display: flex; align-items: flex-start; gap: 16px; padding: 4px 2px 6px; }
.ig-wa-corpo b { font-size: 14px; font-weight: 650; }
.ig-wa-corpo p { margin: 4px 0 14px; max-width: 60ch; font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* ---------- aba Testes ---------- */
.ig-grade-testes { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ig-gerada .btn-primario { flex: none; }
.ig-testes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ig-teste { padding: 12px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--fill-1); }
.ig-teste-cab { display: flex; align-items: center; gap: 10px; }
.ig-teste-tit { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ig-teste-tit b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-teste-tit small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-passos-t { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ig-passos-t li { position: relative; display: grid; gap: 6px; min-width: 0; }
.ig-passos-t li::after { content: ""; position: absolute; top: 10px; left: 26px; right: 4px; height: 1.5px; border-radius: 2px; background: var(--line-2); }
.ig-passos-t li:last-child::after { display: none; }
.ig-passos-t li.ok::after { background: color-mix(in srgb, var(--green) 55%, transparent); }
.ig-pt-ic { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--fill-3); color: var(--text-3); font: 650 11px/1 var(--fonte); }
.ig-passos-t li.ok .ig-pt-ic { background: var(--green); color: #fff; }
.ig-passos-t li.espera .ig-pt-ic { background: var(--fill-3); color: var(--text); }
.ig-passos-t li.travou .ig-pt-ic { background: color-mix(in srgb, var(--orange) 22%, transparent); color: var(--orange-ink); }
.ig-pt-txt { display: grid; gap: 1px; min-width: 0; padding-right: 6px; }
.ig-pt-txt b { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ig-passos-t li.ok .ig-pt-txt b { color: var(--text); }
.ig-pt-txt small { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-teste-msg, .ig-teste-ok { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ig-teste-msg .i, .ig-teste-ok .i { flex: none; margin-top: 3px; }
.ig-teste-msg.travou .i { color: var(--orange-ink); }
.ig-teste-ok .i { color: var(--green-ink); }

/* ---------- janelas ---------- */
.ig-modal { gap: 14px; }
.ig-mc-intro { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ig-mc-intro b { color: var(--text); }
.ig-mc-ops { display: grid; gap: 8px; }
.ig-mc-op {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 14px; text-align: left;
  border: 1px solid var(--line); background: var(--fill-1); color: var(--text); transition: border-color .15s, background .15s, transform .1s;
}
.ig-mc-op:not(:disabled):hover { border-color: var(--line-2); background: var(--fill-2); }
.ig-mc-op:not(:disabled):active { transform: scale(.99); }
.ig-mc-op > span:not(.ig-mc-op-ic) { flex: 1; min-width: 0; }
.ig-mc-op b { display: block; font-size: 14px; font-weight: 650; }
.ig-mc-op small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-3); }
.ig-mc-op > .i:last-child { color: var(--text-3); }
.ig-mc-op-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--fill-2); color: var(--ib-on); }
.ig-mc-rodape { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text-3); }
.ig-mc-estado { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 6px; text-align: center; }
.ig-mc-estado b { font-size: 16px; font-weight: 650; }
.ig-mc-estado p { margin: 0; max-width: 400px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ig-mc-estado .linha-botoes { justify-content: center; }
.ig-mc-roda { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--fill-2); color: var(--text-2); }
.ig-mc-ok { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; animation: ig-ok .4s var(--ease); }
.ig-mc-ok .i { width: 24px; height: 24px; stroke-width: 2.4; }
@keyframes ig-ok { from { transform: scale(.6); opacity: 0; } }
.ig-reforco { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 12px; background: var(--fill-1); font-size: 13px; color: var(--text); cursor: pointer; }
.ig-reforco input { margin: 2px 0 0; accent-color: var(--red); }
.ig-bloco-cod { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px; border-radius: 12px; background: var(--fill-1); border: 1px solid var(--line); }
.ig-bloco-cod pre { margin: 0; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.ig-notas { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ig-notas code, .ig-mc-intro code { padding: 1px 5px; border-radius: 5px; background: var(--fill-2); font-size: 12px; }

/* ---------- telas menores ---------- */
@media (max-width: 1000px) {
  .ig-grade-2, .ig-grade-testes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ig-barra { flex-wrap: wrap; gap: 8px; }
  .ig-abas { order: 2; width: 100%; }
  .ig-api { margin-left: auto; }
  .ig-card .cartao-cab { flex-wrap: wrap; }
  .ig-card .cartao-cab > .flex { display: none; }
  .ig-plat-cab { padding: 13px 14px; gap: 10px; }
  .ig-plat-cab .tom { display: none; }
  .ig-plat-corpo { padding: 14px 12px 14px; }
  .ig-item, .ig-px { grid-template-columns: auto minmax(0, 1fr); }
  .ig-item-lado, .ig-px-lado { grid-column: 1 / -1; justify-items: start; }
  .ig-px-lado { grid-template-columns: 1fr auto; align-items: center; width: 100%; }
  .ig-px-nums { justify-self: start; }
  .ig-px-n { justify-items: start; }
  .ig-item-lado .tom { max-width: 100%; }
  .ig-pf { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ig-pf > .tom, .ig-pf > .ig-pf-val { grid-column: 2; grid-row: 2; justify-self: start; }
  .ig-pf-acoes { grid-row: 1 / span 2; grid-column: 3; }
  .ig-pf-acoes .btn { padding: 0 8px; }
  .ig-ct-barra .campo-busca { width: 100%; }
  .ig-ct { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .ig-ct-st { grid-column: 1; grid-row: 2; }
  .ig-ct-chave { grid-column: 2; grid-row: 1 / span 2; }
  .ig-bm-cab { flex-wrap: wrap; }
  .ig-bm-cab small { order: 3; flex-basis: 100%; padding-left: 30px; }
  .ig-passos-t { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 12px; }
  .ig-passos-t li:nth-child(2)::after { display: none; }
  .ig-bloco-cod { grid-template-columns: minmax(0, 1fr); }
  .ig-bloco-cod .btn { justify-self: start; }
  .ig-wa-corpo { flex-direction: column; }
}