/* Estilo só de telas/integracoes.js (14-integracoes.html). A moldura
   (.cfw, .cfb, .sec, .blk, .aside) vem de configuracoes.css. */

.ig{max-width:1180px;margin:0 auto;padding:24px 24px 48px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ig>*{min-width:0}
.ig-pagina .hd{min-width:0}
.key{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;background:#fff}
.key .mono{font-size:13px}
.newkey{border:1.5px solid var(--tinta);border-radius:10px;padding:12px 14px;background:#fff}
.newkey .mono{font-size:13px;word-break:break-all}
.ig-passos{margin:10px 0 0;padding-left:18px;display:grid;gap:4px;color:var(--grafite)}
.cbk{border:1px solid var(--nevoa);border-radius:10px;overflow:hidden;min-width:0}
.cbk .bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--gelo);border-bottom:1px solid var(--nevoa);min-width:0}
.cbk pre{margin:0;padding:12px 14px;font:12px/1.65 ui-monospace,'SF Mono',Menlo,monospace;background:var(--tinta);color:#E7E9EC;overflow:auto}
.cbk pre .k{color:#C6CBD1}
.cbk pre .s{color:#9FC7B4}
.cbk pre .c{color:#8A9098}
.can{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--nevoa);font-size:12.5px}
.can:first-child{border-top:0}

@media (max-width:960px){
  .ig{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ig{padding:12px 16px 40px}
  .ig-pagina .hd{padding:0 12px;gap:8px}
  .ig-pagina .hd .vr,.ig-pagina .hd .sp{display:none}
  .ig-pagina .hd .h2{flex:1 1 auto;min-width:0}
  .ig .blk-h{flex-wrap:wrap}
  .ig .blk-h .grow{flex:1 1 calc(100% - 40px)}
  .cbk .bar .ell{display:none}
}