/* Configuración → Conexiones (03i, 2026-11-13). Usa los colores y medidas de crm.css. */
.cx .card-cuerpo { display: grid; gap: 10px; }
.cx-regla { background: var(--ac-s); border-radius: var(--r); padding: 10px 14px; font-size: 13px; line-height: 1.45; }
.cx-grupo { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cx-grupo small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--txt3); }
.cx-lista { border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; }
.cx-fila { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--borde); }
.cx-lista > .cx-fila:first-child { border-top: 0; }
.cx-ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--gris-s, #EEF2F7); color: var(--ac); }
.cx-txt { min-width: 0; display: grid; }
.cx-txt small { color: var(--txt2); overflow-wrap: anywhere; }
.cx-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.cx-pill.ok { background: var(--ok-s); color: var(--ok); } .cx-pill.no { background: var(--gris-s, #EEF2F7); color: var(--txt2); }
.cx-pill.adv { background: var(--adv-s); color: var(--adv); } .cx-pill.mal { background: var(--mal-s); color: var(--mal); }
.cx-pill.lyd { background: var(--ac-s); color: var(--ac); }
.cx-mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.cx-error { margin: 0; padding: 6px 14px 10px 62px; color: var(--mal); font-size: 12.5px; border-top: 0; }
.cx-registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cx-registro span { color: var(--txt3); font-variant-numeric: tabular-nums; }
.cx-registro small { color: var(--txt3); }
.cx-donde { background: var(--fondo); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.cx-donde ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.cx-campo { display: grid; gap: 6px; font-weight: 600; font-size: 13px; margin-top: 10px; }
.cx-campo span { display: flex; gap: 6px; }
.cx-campo input { flex: 1; min-width: 0; font: 13px ui-monospace, Consolas, monospace; padding: 8px 11px; border: 1px solid var(--borde2); border-radius: 8px; }
.cx-forma { margin: 8px 0 0; font-size: 12.5px; border-radius: 8px; padding: 7px 10px; }
.cx-forma.inf { background: var(--fondo); color: var(--txt2); } .cx-forma.ok { background: var(--ok-s); color: var(--ok); }
.cx-forma.adv { background: var(--adv-s); color: var(--adv); } .cx-forma.mal { background: var(--mal-s); color: var(--mal); }
.cx-guardada { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.cx-checks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.cx-checks .si { color: var(--ok); } .cx-checks .no { color: var(--mal); }
/* 03j: Facebook e Instagram tiene dos botones (Volver a conectar y Probar) */
.cx-botones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 700px) {
  .cx-fila { grid-template-columns: 36px minmax(0, 1fr); row-gap: 6px; }
  .cx-fila > .cx-pill, .cx-fila > .btn, .cx-fila > .cx-botones { grid-column: 2; justify-self: start; }
  .cx-error { padding-left: 14px; }
}