/* Quiet integration row, scoped to Productos and the existing Studio tokens. */
.ml-connection { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2rem; margin:0 0 1.5rem; padding:1.25rem 0; border-block:1px solid var(--admin-line); color:var(--admin-text); }
.ml-connection h2 { margin:0 0 .35rem; font:600 1.1rem/1.35 var(--admin-font-display); letter-spacing:-.025em; }
.ml-connection p { margin:0; max-width:65ch; overflow-wrap:anywhere; font:400 .875rem/1.6 var(--admin-font-body); color:var(--admin-muted); }
.ml-connection [data-ml-status] { min-height:1.4rem; }
.ml-connection [data-ml-identity] { margin-top:.5rem; color:var(--admin-text); font-variant-numeric:tabular-nums; }
.ml-connection .ml-connection-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.ml-connection button { min-height:44px; min-width:44px; padding:.65rem .85rem; border:1px solid var(--admin-line-strong); border-radius:8px; background:var(--admin-surface); color:var(--admin-text); font:600 .875rem/1.4 var(--admin-font-body); cursor:pointer; transition:background-color 150ms ease; }
.ml-connection button:hover { background:var(--admin-surface-soft); }
.ml-connection button:focus-visible { outline:2px solid var(--admin-brand); outline-offset:3px; }
.ml-connection button:disabled { opacity:.6; cursor:wait; }
.ml-connection .ml-connection-primary { background:var(--admin-brand); border-color:transparent; color:var(--admin-on-brand); }
.ml-connection .ml-connection-primary:hover { background:var(--admin-brand-strong); }
.ml-connection [data-ml-error] { grid-column:1/-1; color:var(--admin-danger); }
.ml-connection .ml-connection-note { grid-column:1/-1; font-size:.8rem; }
.ml-connection [data-ml-login] { justify-self:start; align-self:center; }
@media (max-width:767px) { .ml-connection { grid-template-columns:minmax(0,1fr); gap:1rem; } .ml-connection .ml-connection-actions { align-items:stretch; } .ml-connection .ml-connection-actions button { flex:1 1 10rem; } .ml-connection p { font-size:1rem; } .ml-connection .ml-connection-note { font-size:.875rem; } }
@media (prefers-reduced-motion:reduce) { .ml-connection button { transition:none; } }