/* Integraciones. Builds on marketing-pro.css and settings-pro.css. */
.in-health{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin-bottom:16px;border-radius:16px;border:1px solid}
.in-health.ok{background:#f2f8ef;border-color:#d3e6cb;color:#2f6b46}
.in-health.warn{background:#fff8ec;border-color:#f2dfbd;color:#8a5414}
.in-health-icon .icon{width:20px;height:20px}
.in-health strong{display:block;font-size:13.5px;margin-bottom:2px}
.in-health small{display:block;font-size:12px;line-height:1.45;opacity:.9}
.in-health em{margin-left:auto;font-style:normal;font:700 12px 'DM Sans',sans-serif;white-space:nowrap}
.in-group{margin-bottom:18px;animation:mp-rise .4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 50ms)}
.in-group>header h3{margin:0;font:750 15px 'Plus Jakarta Sans',sans-serif}
.in-group>header p{margin:2px 0 10px;font-size:12.5px;color:var(--cp-muted)}
.in-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.in-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--cp-line);border-radius:16px;background:#fff;transition:box-shadow .15s,transform .15s}
.in-card:not(.soon):hover{box-shadow:0 8px 22px #1c36280f;transform:translateY(-1px)}
.in-card.connected{border-color:#cfe3c6;background:linear-gradient(160deg,#f6fbf3,#fff 60%)}
.in-card.soon{opacity:.75}
.in-card header{display:flex;align-items:center;gap:10px}
.in-card header strong{display:block;font-size:13.5px;color:var(--cp-ink)}
.in-card header small{display:block;font-size:11.5px;color:var(--cp-muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-card p{margin:0;flex:1;font-size:12.5px;line-height:1.45;color:var(--cp-text)}
.in-card footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.in-card footer small{font-size:11.5px;color:var(--cp-muted)}
.in-mark{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--c);color:#fff;font:800 12px 'DM Sans',sans-serif;letter-spacing:-.3px}
.in-pill{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:2px 9px;border-radius:999px;background:#eef1ed;color:#5f6f63;font:650 11px 'DM Sans',sans-serif;white-space:nowrap}
.in-pill.connected{background:#e2f0dc;color:#2f6b46}.in-pill.connected i{width:6px;height:6px;border-radius:50%;background:currentColor}
.in-pill.soon{background:#f3f0fc;color:#5b48a8}
.in-drawer-title .in-pill{margin-left:0}
.in-foot{display:flex;align-items:center;gap:6px}.in-foot .icon{width:14px;height:14px;flex:none}
.in-foot code{font-size:11.5px;background:#eef3ea;padding:1px 5px;border-radius:5px}

/* Drawer */
.in-drawer{width:min(500px,calc(100vw - 20px))}
.in-drawer>header{display:flex;justify-content:space-between;gap:10px}
.in-drawer-title{display:flex;align-items:center;gap:12px}
.in-drawer-title h2{margin:0;font:750 18px 'Plus Jakarta Sans',sans-serif}
.in-drawer-title p{margin:2px 0 0;font-size:12.5px;color:var(--cp-muted);display:flex;align-items:center;gap:6px}
.in-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.in-steps li{flex:1;display:flex;align-items:center;gap:6px;padding:8px;border-radius:10px;background:#f4f6f2;font-size:11.5px;font-weight:600;color:var(--cp-muted)}
.in-steps li i{width:18px;height:18px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;font-style:normal;font-size:10.5px}
.in-steps li .icon{width:11px;height:11px;stroke-width:3}
.in-steps li.now{background:#e7f1e2;color:var(--cp-ink)}.in-steps li.now i{background:var(--cp-accent);color:#fff}
.in-steps li.done{color:#2f6b46}.in-steps li.done i{background:#2f6b46;color:#fff}
.in-form{display:flex;flex-direction:column;gap:12px;animation:mp-rise .3s cubic-bezier(.22,1,.36,1) both}
.in-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--cp-ink)}
.in-url{display:flex;align-items:stretch}
.in-url .mp-input{border-top-right-radius:0;border-bottom-right-radius:0}
.in-url em{display:flex;align-items:center;padding:0 10px;border:1px solid var(--cp-line);border-left:0;border-radius:0 10px 10px 0;background:#f4f6f2;font-style:normal;font-weight:500;font-size:12.5px;color:var(--cp-muted);white-space:nowrap}
.in-code{max-width:180px;font:700 22px/1 'DM Sans',sans-serif!important;letter-spacing:8px;text-align:center}
.in-help{margin:0;font-size:12px;line-height:1.5;color:var(--cp-muted)}
.in-help .icon{width:13px;height:13px;vertical-align:-2px;color:#2f6b46}
.in-help.warn{padding:10px 12px;border-radius:12px;background:#fbe9e7;color:#8f3a28}
.in-link{border:0;background:none;padding:0;color:var(--cp-accent);font:600 12px 'DM Sans',sans-serif;text-decoration:underline;cursor:pointer}
.in-fb{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:0;border-radius:12px;background:#1877f2;color:#fff;font:650 14px 'DM Sans',sans-serif;cursor:pointer}
.in-fb:hover{background:#166fe0}.in-fb .icon{width:17px;height:17px}
.in-choice{display:flex;flex-direction:column;gap:8px}
.in-choice label{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1.5px solid var(--cp-line);border-radius:13px;cursor:pointer;transition:border-color .15s,background .15s}
.in-choice label:has(input:checked){border-color:var(--cp-accent);background:#f4f9f1}
.in-choice input{margin-top:2px;accent-color:var(--cp-accent)}
.in-choice strong{display:block;font-size:13px}.in-choice small{font-size:12px;color:var(--cp-muted);line-height:1.4}
.in-scopes{list-style:none;margin:0;padding:12px;border-radius:13px;background:#f6f8f4;display:flex;flex-direction:column;gap:8px}
.in-scopes li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--cp-ink)}
.in-scopes .icon{width:15px;height:15px;flex:none;color:var(--cp-accent)}
.in-sync{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:13px;background:#f6f8f4}
.in-sync-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 60px;align-items:center;gap:10px;font-size:12.5px;color:var(--cp-text)}
.in-sync-row>i{height:7px;border-radius:999px;background:#e3ebdf;overflow:hidden}
.in-sync-row>i>i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3d7b52,#86b578)}
.in-sync-row b{text-align:right;color:var(--cp-ink);font-variant-numeric:tabular-nums}
.in-done{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:#f2f8ef;color:#2f6b46}
.in-done>.icon{width:26px;height:26px;padding:5px;border-radius:50%;background:#2f6b46;color:#fff;stroke-width:3;animation:ob-pop .4s cubic-bezier(.34,1.56,.64,1)}
.in-done strong{font-size:14px;color:var(--cp-ink)}.in-done span{font-size:12.5px;line-height:1.5;color:var(--cp-text)}
@keyframes ob-pop{from{transform:scale(.6)}}
.in-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.in-actions.spread{justify-content:space-between}
.button.danger{background:#b3402a;border-color:#b3402a;color:#fff}
.in-rows{display:flex;flex-direction:column}
.in-rows div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eef2ec;font-size:12.5px;color:var(--cp-text)}
.in-rows b{color:var(--cp-ink);text-align:right}
.in-hooks{list-style:none;margin:0;padding:0}
.in-hooks li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.in-hooks li>i{width:7px;height:7px;border-radius:50%;background:#2fa35a}
.in-hooks code{font-size:11.5px;color:var(--cp-ink)}.in-hooks small{margin-left:auto;color:var(--cp-muted)}
@media(prefers-reduced-motion:reduce){.in-group,.in-form,.in-done>.icon{animation:none}}

/* Live connections (integrations-live.js) */
.in-server{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border-radius:14px;font-size:12.5px;line-height:1.45}
.in-server .icon{width:16px;height:16px;flex:none}
.in-server.on{background:#eef6ff;color:#24467a;border:1px solid #d6e5fa}
.in-server.off{background:#f6f8f4;color:var(--cp-text);border:1px dashed #cfdbc9}
.in-server code,.in-howto code,.in-help code{font-size:11.5px;background:#ffffffb3;padding:1px 5px;border-radius:5px}
.in-server .button{margin-left:auto;flex:none}
.in-pill.meta{background:#eef2fd;color:#3550a0}
.in-pill.setup{background:#fdf0dc;color:#9a5b12}
.in-card footer small.err{color:#b3402a}
.in-card-warn{display:flex;gap:6px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:10px;background:#fff8ec;color:#8a5414;font-size:11.5px;line-height:1.4}
.in-card-warn .icon{width:13px;height:13px;flex:none;margin-top:1px}
.in-mini-sync{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--cp-text)}
.in-mini-sync i{width:12px;height:12px;border-radius:50%;border:2px solid #cfe3c6;border-top-color:var(--cp-accent);animation:in-spin .8s linear infinite}
@keyframes in-spin{to{transform:rotate(360deg)}}
.in-sync-row>i>i.indeterminate{width:40%;animation:in-slide 1.1s ease-in-out infinite}
@keyframes in-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.in-howto{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.45;color:var(--cp-ink)}
.in-copy{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#f6f8f4;font-size:12px;color:var(--cp-muted)}
.in-copy code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--cp-ink)}
.in-copy.col code{white-space:normal;line-height:1.6}
@media(prefers-reduced-motion:reduce){.in-mini-sync i,.in-sync-row>i>i.indeterminate{animation:none}}
.in-help.note{padding:10px 12px;border-radius:12px;background:#fff8ec;color:#8a5414}

/* Live refresh keeps these nodes mounted. Motion belongs to opening the drawer,
   not to the arrival of every batch. Brand artwork keeps its original colors. */
.in-group{animation:none}
.in-mark.in-brand{background:#fff;border:1px solid #e7ebe6;border-radius:12px;box-shadow:none;width:44px;height:44px;display:grid;place-items:center;flex:none;padding:5px;box-sizing:border-box}
.in-brand img{display:block;width:32px;height:32px;object-fit:contain}
.in-card.soon .in-brand{opacity:1}
.in-mini-sync{padding:10px 12px;background:#f1f6ee;border-radius:10px;gap:10px}
.in-mini-sync strong{display:block;font-size:12px;font-weight:600}
.in-mini-sync small{display:block;margin-top:2px;color:var(--cp-muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.in-sync-orbit{width:20px;height:20px;display:grid;place-items:center;flex:none;border:2px solid #dce8d7;border-top-color:#59874d;border-radius:50%;box-sizing:border-box;animation:in-spin 1.8s linear infinite}
.in-sync-summary{border:1px solid #e1e8dc;border-radius:16px;padding:16px;background:#f7faf5;overflow:hidden}
.in-sync-heading{display:flex;align-items:center;gap:12px}
.in-sync-heading strong{display:block;font-size:13px;color:var(--cp-ink)}
.in-sync-heading small{display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--cp-muted)}
.in-sync-metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:20px}
.in-sync-metrics span{display:block;font-size:11.5px;color:var(--cp-muted)}
.in-sync-metrics b{display:block;margin-top:4px;font:650 22px/1.2 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:var(--cp-ink)}
.in-sync-track{height:3px;overflow:hidden;background:#e3ebdf;border-radius:6px;margin-top:18px}
.in-sync-track span{display:block;width:35%;height:100%;border-radius:inherit;background:#82a86e;animation:in-sync-travel 2.6s linear infinite}
.in-sync-summary.done .in-sync-orbit,.in-sync-summary.error .in-sync-orbit{animation:none;border-color:transparent;background:#e4efdd;color:#3c6b33}
.in-sync-summary.done .in-sync-orbit .icon,.in-sync-summary.error .in-sync-orbit .icon{width:14px;height:14px}
.in-sync-summary.done .in-sync-track span{animation:none;width:100%;background:#82a86e}
.in-sync-summary.error{background:#fff9f1;border-color:#efdfc8}
.in-sync-summary.error .in-sync-orbit{background:#f4e6d2;color:#9c641b}
.in-sync-summary.error .in-sync-track span{animation:none;background:#c79e65;opacity:.5}
.in-sync-summary.waiting .in-sync-orbit,.in-sync-summary.waiting .in-sync-track span{animation:none}
@keyframes in-sync-travel{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
@media(prefers-reduced-motion:reduce){.in-sync-orbit,.in-sync-track span{animation:none}.in-sync-track span{width:35%;opacity:.7}}