/* =====================================================================
   EMOSE Backoffice — conectores.css
   Styles for the Conectores screen (conectores.js) ONLY: a grid of
   integration cards, one per external system defined in
   window.EMOSE_BLUEPRINT.connectors (blueprint-data.js). Read-only screen
   — no forms/modals here (see casos.css for that vocabulary).

   OWNERSHIP: owned by the CRM agent, same as casos.js/casos.css — see
   styles.css's own header comment for the full cross-file map. All
   classes below are NEW (prefixed connector- or conn-), so there is no collision
   risk with any other file in this app.

   DEPENDENCIES: none new — reuses styles.css tokens + .card/.pill
   primitives only. The connector "Ligado"/"Placeholder" status pill and
   the kind badge (crm/compliance/scoring/quoting/payment/issuing/email)
   both reuse the EXISTING .pill/.pill-* classes verbatim — no bespoke
   color was invented for either, per the task's "never hardcode colors"
   rule.

   SECTIONS
     1. Card grid
     2. Card internals: header (icon/name/kind badge/status), description,
        metric block, step chips
     3. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Card grid
--------------------------------------------------------------------- */
.connector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}

.connector-card{display:flex;flex-direction:column;gap:14px;transition:border-color .15s;}
/* Overrides only border-color (not the .card shorthand) so specificity
   (.connector-card.is-connected, two classes) cleanly wins over the base
   .card rule (one class) without !important. */
.connector-card.is-connected{border-color:var(--success);}
.connector-card.is-placeholder{opacity:.92;}

/* ---------------------------------------------------------------------
   2. Card internals
--------------------------------------------------------------------- */
.conn-top{display:flex;align-items:flex-start;gap:12px;}
.conn-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--sunken);color:var(--text2);display:flex;align-items:center;justify-content:center;}
.connector-card.is-connected .conn-icon{background:var(--success-surf);color:var(--success);}
.conn-icon svg{width:19px;height:19px;}

.conn-heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.conn-name{font-size:15.5px;font-weight:800;color:var(--text);margin:0;letter-spacing:-.01em;}
.conn-kind-badge{align-self:flex-start;padding:3px 10px;font-size:11px;}

.conn-desc{font-size:13.5px;color:var(--text2);line-height:1.5;margin:0;}

.conn-metric{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:13px;background:var(--surface-alt);}
.conn-metric-value{font-size:13.5px;font-weight:800;color:var(--text);}
.connector-card.is-connected .conn-metric-value{color:var(--success);}
.conn-metric-example{font-size:12px;color:var(--text2);font-weight:600;}
.conn-metric-example code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--sunken);padding:1px 6px;border-radius:6px;font-size:11.5px;color:var(--text);}
.conn-metric.conn-metric-empty .conn-metric-value{color:var(--text3);}

/* Pins the step-chip footer to the bottom of the card so every card in a
   row ends flush, even when descriptions wrap to different heights —
   .connector-grid's items stretch to the row's tallest by default (CSS
   grid's own align-items:stretch), and .connector-card is itself a flex
   column, so margin-top:auto on the last block is enough. */
.conn-steps{display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:2px;}
.conn-steps-label{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);}
.conn-steps-list{display:flex;gap:6px;flex-wrap:wrap;}
.conn-step-chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--sunken);color:var(--text2);}

/* ---------------------------------------------------------------------
   3. Responsive
--------------------------------------------------------------------- */
@media (max-width:760px){
  .connector-grid{grid-template-columns:1fr;}
}