/* ============================================================
   Filme das integrações (página /integracoes/, 02/10/2026): "como dois sistemas conversam de verdade".
   Uma venda do Mercado Livre chega como mensagem, a integração traduz campo por campo para o sistema de gestão,
   confere, grava, insiste quando a transportadora não responde e registra tudo. Prefixo it- (conferido livre).
   Peças comuns GERADAS de comum/pagina-viva.css nesta data; daqui em diante à mão.
   ============================================================ */
.it{--it-app:#FFFFFF;--it-p:#F8F6FC;--it-l:rgba(20,17,28,.11);--it-ok:#1A7A4A;--it-veu:rgba(255,255,255,.95);
  max-width:1100px;margin:0 auto}
[data-theme="dark"] .it{--it-app:#121019;--it-p:#1A1724;--it-l:rgba(255,255,255,.10);--it-ok:#3CCB82;--it-veu:rgba(18,16,25,.96)}
.it-rapido *{transition:none!important;animation:none!important}

/* capítulos e narração (mesma receita dos outros filmes) */
.it-cap{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px}
.it-cap button{width:100%;text-align:left;display:flex;flex-direction:column;gap:6px;color:var(--faint);font-size:.8rem;line-height:1.3;transition:color .3s}
.it-cap button:hover{color:var(--text)}
.it-cap b{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:.68rem;letter-spacing:.12em}
.it-cap i{display:block;height:3px;border-radius:3px;background:var(--it-l);overflow:hidden}
.it-cap em{display:block;height:100%;background:var(--purple);transform-origin:left;transform:scaleX(0)}
.it-cap li.feito button,.it-cap li.agora button{color:var(--text)}
.it-cap li.agora b{color:var(--accent)}
.it-narra{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:118px;margin-bottom:22px}
.it-n{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.it-narra strong{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.2;margin:6px 0;letter-spacing:-.01em}
.it-narra p{color:var(--muted);max-width:64ch;font-size:.95rem;line-height:1.55}
.it-narra.troca strong,.it-narra.troca p{animation:itEntra .55s var(--ease-out)}
@keyframes itEntra{from{opacity:0;transform:translateY(8px)}}

.it-app{position:relative;background:var(--it-app);border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--lift);overflow:hidden;min-width:0;transition:opacity .4s}
.it-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--it-l);font-size:.8rem;white-space:nowrap}
.it-bar b{font-weight:600}
.it-bar span{color:var(--muted)}
.it-dots{display:flex;gap:5px}
.it-dots i{width:9px;height:9px;border-radius:50%;background:var(--it-l)}
.it-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.it-live i{width:7px;height:7px;border-radius:50%;background:var(--it-ok);animation:itPisca 1.6s ease-in-out infinite}
@keyframes itPisca{50%{opacity:.3}}
.it-in{display:flex;flex-direction:column;gap:12px;padding:12px}
.it-p{position:relative;background:var(--it-p);border:1px solid var(--it-l);border-radius:12px;padding:12px;min-width:0;min-height:0;overflow:hidden;
  transition:opacity .45s,box-shadow .45s,border-color .45s}
.it.foco .it-p{opacity:.38}
.it.foco .it-p.on{opacity:1;border-color:var(--stroke-hi);box-shadow:0 0 0 3px var(--purple-dim)}
.it-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.76rem;font-weight:600;white-space:nowrap;margin-bottom:8px}
.it-ph small{font-weight:400;color:var(--muted);font-size:.68rem;overflow:hidden;text-overflow:ellipsis}

/* números da campanha */
.it-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px}
.it-kpi{background:var(--it-app);border:1px solid var(--it-l);border-radius:9px;padding:8px 10px;min-width:0}
.it-kpi small{display:block;font-size:.62rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-kpi b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:1.15rem;white-space:nowrap;transition:color .4s}
.it-kpi b.sobe{color:var(--it-ok)}
/* fim */
.it-fim{position:absolute;inset:45px 0 0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px;
  background:var(--it-veu);animation:itEntra .6s var(--ease-out)}
.it-fim[hidden]{display:none}
.it-fim h3{font-size:clamp(1.3rem,2.4vw,1.75rem);max-width:24ch}
.it-fim p{color:var(--muted);max-width:46ch;font-size:.95rem}
.it-fim .it-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* rodapé do filme */
.it-pe{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:26px}
.it-placar{display:flex;align-items:center;gap:10px 28px;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.it-placar div{display:flex;align-items:baseline;gap:9px}
.it-placar b{font-family:'Jost',sans-serif;font-weight:300;font-size:2rem;line-height:1;color:var(--text);min-width:1.2em;text-align:right}
.it-placar b.pula{animation:itPula .45s var(--ease-out)}
@keyframes itPula{40%{transform:translateY(-5px);color:var(--accent)}}
.it-ctl{display:flex;gap:8px}
.it-ctl button{padding:9px 18px;border-radius:99px;border:1px solid var(--stroke);font-size:.82rem;color:var(--text);background:var(--glass-2);transition:border-color .3s}
.it-ctl button:hover{border-color:var(--stroke-hi)}
.it-ctl button:disabled{opacity:.45;cursor:default}


.it{--it-er:#B8341F;--it-wn:#9A5B00}
[data-theme="dark"] .it{--it-er:#FF8A75;--it-wn:#F2B04A}
.it-linha{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:12px;height:330px}
.it-linha2{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;height:212px}
.it-linha .it-p,.it-linha2 .it-p{display:flex;flex-direction:column}
/* código (mensagens) */
.it-cod{flex:1;min-height:0;overflow:hidden;margin:0;padding:10px 12px;border-radius:9px;background:#121019;color:#D9D3E8;font-family:'JetBrains Mono',monospace;font-size:.62rem;line-height:1.65;white-space:pre}
.it-cod div{opacity:0;transition:opacity .3s,background .3s;border-radius:3px}
.it-cod div.on{opacity:1}
.it-cod div.luz{background:rgba(157,114,233,.28)}
.it-cod .k{color:#C7A9FF}
.it-cod .s{color:#8FE3B4}
.it-cod .n{color:#F2C97D}
.it-sis{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.it-sis i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.58rem}
.it-sis b{font-size:.74rem;font-weight:600;display:block}
.it-sis small{display:block;font-size:.62rem;color:var(--muted);font-weight:400}
/* tradutor */
.it-mapa{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px}
.it-m{display:grid;grid-template-columns:1fr 18px 1fr;gap:4px;align-items:center;padding:5px 7px;border-radius:8px;border:1px solid var(--it-l);background:var(--it-app);
  font-family:'JetBrains Mono',monospace;font-size:.58rem;opacity:.4;transition:opacity .3s,border-color .3s,background .3s}
.it-m span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it-m span:last-child{text-align:right}
.it-m i{font-style:normal;text-align:center;color:var(--accent)}
.it-m small{grid-column:1/-1;font-family:'Manrope',sans-serif;font-size:.58rem;color:var(--it-ok);display:none}
.it-m.on{opacity:1;border-color:var(--purple);background:var(--purple-dim)}
.it-m.feito{opacity:1}
.it-m.feito small,.it-m.on small{display:block}
.it-hub{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;font-size:.66rem;color:var(--muted)}
.it-hub b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;font-size:.6rem;box-shadow:0 0 0 6px var(--purple-dim)}
.it-hub.vai b{animation:itGira 1.2s linear infinite}
@keyframes itGira{50%{box-shadow:0 0 0 11px rgba(157,114,233,.08)}}
/* conferências e resposta */
.it-chk{list-style:none;display:flex;flex-direction:column;gap:3px;margin-top:8px}
.it-chk li{font-size:.64rem;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .3s}
.it-chk li.on{opacity:1}
.it-chk li::before{content:'✓';flex-shrink:0;display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--it-ok);color:#fff;font-size:.52rem}
.it-resp{margin-top:6px;padding:6px 9px;border-radius:8px;border:1px solid var(--it-ok);font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--it-ok);opacity:0;transition:opacity .35s}
.it-resp.on{opacity:1}
/* fila de novas tentativas */
.it-fila{display:flex;flex-direction:column}
.it-tents{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.it-t{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:6px 9px;border-radius:9px;border:1px solid var(--it-l);background:var(--it-app);font-size:.64rem;
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s,border-color .3s}
.it-t.on{opacity:1;transform:none}
.it-t>i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.66rem;background:var(--it-l)}
.it-t.erro{border-color:var(--it-er)}
.it-t.erro>i{background:var(--it-er);color:#fff}
.it-t.ok{border-color:var(--it-ok)}
.it-t.ok>i{background:var(--it-ok);color:#fff}
/* tema escuro: o verde e o salmão são claros, a marca vai escura (contraste, 05/10/2026) */
[data-theme="dark"] .it-t.erro>i,[data-theme="dark"] .it-t.ok>i,[data-theme="dark"] .it-chk li::before{color:#10120F}
.it-t small{display:block;color:var(--muted);font-size:.6rem}
.it-t em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted);white-space:nowrap}
.it-espera{display:flex;align-items:center;gap:8px;font-size:.62rem;color:var(--it-wn);opacity:0;transition:opacity .3s}
.it-espera.on{opacity:1}
.it-espera svg{width:22px;height:22px;transform:rotate(-90deg)}
.it-espera circle{fill:none;stroke-width:3}
.it-espera .f{stroke:var(--it-l)}
.it-espera .a{stroke:var(--it-wn);stroke-linecap:round;transition:stroke-dashoffset linear}
/* registro */
.it-log{display:flex;flex-direction:column}
.it-cons{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px 10px;border-radius:9px;
  background:#121019;color:#D9D3E8;font-family:'JetBrains Mono',monospace;font-size:.6rem;line-height:1.5}
.it-cons div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:itLinha .3s var(--ease-out)}
.it-cons span{color:#9C93B5;margin-right:6px}
.it-cons .ok{color:#6BE0A0}.it-cons .er{color:#FF8A75}.it-cons .wn{color:#F2B04A}
@keyframes itLinha{from{opacity:0;transform:translateY(-4px)}}
.it-graf{display:none;align-items:stretch;gap:6px;flex:1;min-height:0;padding-top:4px}
.it-log.dia .it-cons{display:none}
.it-log.dia .it-graf{display:flex}
.it-graf span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;font-size:.54rem;color:var(--muted)}
.it-graf i{display:block;width:100%;border-radius:4px 4px 0 0;background:linear-gradient(var(--accent),var(--purple));height:0;transition:height 1s var(--ease-out)}
/* computador: tudo cabe numa tela de notebook, como os outros filmes (05/10/2026: tinha 711 px de painel e a fila
   da transportadora ficava fora da tela em 1440x900). Números numa linha, tentativas lado a lado, código mais justo. */
@media (min-width:901px){
  .it-kpis{padding:8px}
  .it-kpi{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 10px}
  .it-kpi b{font-size:1.05rem}
  .it-linha{height:auto}
  .it-cod{line-height:1.5;padding:8px 11px}
  .it-sis{margin-bottom:6px}
  .it-hub{margin-bottom:6px}
  .it-hub b{width:26px;height:26px}
  .it-mapa{gap:4px}
  .it-m{padding:3px 7px}
  .it-chk{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;margin-top:7px}
  .it-chk li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .it-linha2{height:150px;margin-top:12px;grid-template-columns:1.25fr 1fr}
  .it-tents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:6px;align-content:start}
  .it-t{grid-template-columns:20px 1fr;grid-template-rows:auto auto;gap:2px 7px;padding:6px 8px}
  .it-t>i{width:20px;height:20px;font-size:.58rem;grid-row:1/3}
  .it-t em{grid-column:2}
  .it-t span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .it-espera{grid-column:1/-1}
}
/* celular e tablet: um quadro por vez */
@media (max-width:900px){
  .it-cap{gap:6px;margin-bottom:16px}
  .it-cap span{display:none}
  .it-cap button{align-items:center}
  .it-narra{min-height:150px;margin-bottom:16px}
  .it-narra p{font-size:.88rem}
  .it-bar span:not(.it-live){display:none}
  .it-kpis{grid-template-columns:1fr 1fr}
  .it-palco-in{position:relative;display:grid;height:auto;min-height:350px}   /* 05/10: altura do maior quadro (o código cortava) */
  .it-linha,.it-linha2{display:contents}
  .it-palco-in>*>.it-p,.it-palco-in .it-p{grid-area:1/1}
  .it .it-palco-in .it-p:not(.vis){opacity:0;visibility:hidden}
  .it.foco .it-palco-in .it-p.vis{opacity:1}
  .it-pe,.it-placar{justify-content:center}
}
@media (max-width:420px){
  .it-narra{min-height:170px}
  .it-placar b{font-size:1.6rem}
  .it-kpi b{font-size:1rem}
}

/* 05/10/2026 (Hugo): a tentativa que ainda não aconteceu não ocupa espaço; o aviso "nova tentativa" fica logo abaixo
   da que falhou, e a próxima entra no lugar dele */
.it-t:not(.on){display:none}
.it-espera:not(.on){display:none}